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")
  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"]')

FORM.addEventListener('submit', () => {
  confetti({
    disableForReducedMotion: true
  })
})
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.