#app
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'
import React, { useRef } from 'https://cdn.skypack.dev/react'
import { render } from 'https://cdn.skypack.dev/react-dom'

const WhimsicalForm = () => {
  const audioRef = useRef(null)
  const submitRef = useRef(null)
  const formRef = useRef(null)
  const handleSubmit = e => {
    e.preventDefault()
    audioRef.current.play()
    const BOUNDS = submitRef.current.getBoundingClientRect()
    confetti({
      disableForReducedMotion: true,
      origin: {
        x: (BOUNDS.x + BOUNDS.width / 2) / window.innerWidth,
        y: (BOUNDS.y + BOUNDS.height / 2) / window.innerHeight,
      },
    })
    setTimeout(() => formRef.current.submit(), 1000)
  }
  return (
    <form ref={formRef} onSubmit={handleSubmit} className="whimsy-form text-white rounded-md p-6 bg-gray-800 max-w-prose" id="signup-form" action="https://www.getrevue.co/profile/jh3y/add_subscriber" method="post" name="revue-form" target="_blank">
  <audio ref={audioRef} src="https://assets.codepen.io/605876/horn.mp3" preload="auto"></audio>
  <h1 className="m-0 mb-2 text-3xl">Delivery! 📦</h1>
  <p className="mb-6">Get snippets of awesome delivered straight to your Inbox! No spam! Unsubscribe anytime!</p>
  <div className="flex flex-col lg:flex-row">
    <div className="whimsy-form__group flex-grow mb-6 lg:mb-0">
      <label className="sr-only">Email address</label>
      <input className="p-4 rounded-md w-full border-white border-2 text-black" type="email" required="true" data-lpignore="true" placeholder="Email address"/>
    </div>
    <div className="whimsy-form__actions">
      <input className="p-4 rounded-md bg-gray-800 border-2 border-white cursor-pointer hover:bg-gray-700 lg:ml-4" type="submit" ref={submitRef} value="Subscribe"/>
    </div>
  </div>
</form>
  )
}

render(<WhimsicalForm/>, document.getElementById('app'))
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.