form#signup-form.whimsy-form.text-white.rounded-md.p-6.bg-gray-800.max-w-prose(action="https://www.getrevue.co/profile/jh3y/add_subscriber" method="post" name="revue-form" target="_blank")
  audio(src="https://assets.codepen.io/605876/horn.mp3" preload="auto")
  h1.m-0.mb-2.text-3xl Delivery! 📦
  p.mb-6. 
    Get snippets of awesome delivered straight to your Inbox! No spam! Unsubscribe anytime!
  .flex.flex-col(class="lg:flex-row")
    .whimsy-form__group.flex-grow.mb-6(class="lg:mb-0")
      label.sr-only Email address
      input.p-4.rounded-md.w-full.border-white.border-2.text-black(type="email", required="true" data-lpignore="true" placeholder="Email address")
    .whimsy-form__actions
      input.p-4.rounded-md.bg-gray-800.border-2.border-white.cursor-pointer(type="submit", value="Subscribe" class="hover:bg-gray-700 lg:ml-4")
View Compiled
*
  box-sizing border-box

:root
  --red hsl(10, 80%, 80%)
  --orange hsl(35, 80%, 80%)
  --yellow hsl(45, 80%, 80%)
  --green hsl(85, 80%, 80%)
  --blue hsl(215, 80%, 80%)
  --indigo hsl(285, 80%, 80%)
  --violet hsl(320, 80%, 80%)
  
body
  
  min-height 100vh
  display grid
  place-items center
  background linear-gradient(65deg, var(--red), var(--orange), var(--yellow), var(--green), var(--blue), var(--indigo), var(--violet))
View Compiled
import confetti from 'https://cdn.skypack.dev/canvas-confetti'
const FORM = document.querySelector("form")
const SUBMIT = FORM.querySelector('[type="submit"]')
const AUDIO = FORM.querySelector('audio')

const onSubmit = e => {
  e.preventDefault()
  AUDIO.play()
  const BOUNDS = SUBMIT.getBoundingClientRect()
  confetti({
    disableForReducedMotion: true,
    origin: {
      x: (BOUNDS.x + BOUNDS.width / 2) / window.innerWidth,
      y: (BOUNDS.y + BOUNDS.height / 2) / window.innerHeight,
    },
  })
  setTimeout(() => FORM.submit(), 1000)
}

FORM.addEventListener('submit', onSubmit)
View Compiled

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.0.3/tailwind.min.css

External JavaScript

This Pen doesn't use any external JavaScript resources.