Modal Promo Happysock - Tailwind Component

The modal promo sign up with email by happysock e-commerce, it is made with Tailwind CSS.
modal
Loading component...
index.html
50 lines
<div class="min-h-screen bg-gray-50 flex flex-col justify-center relative overflow-hidden py-8">
  <div
    class="relative px-6 bg-[#fff200] shadow-xl ring-1 ring-gray-900/5 sm:max-w-lg mx-4 sm:mx-auto sm:rounded-lg sm:px-10 py-4">
    <div class="max-w-md mx-auto">
      <div
        class="float-right bg-white px-1 cursor-pointer py-1 border-2 border-b-4 border-black flex items-center text-center m-auto hover:bg-black hover:text-white hover:border-white">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 20 20" fill="currentColor">
          <path fill-rule="evenodd"
            d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
            clip-rule="evenodd" />
        </svg>
      </div>
      <div class="divide-y divide-gray-300/50 py-2">
        <div class="py-8 text-base leading-7 space-y-6 text-gray-600 flex flex-col items-center mx-8">
          <span
            class="flex-shrink-0 inline-flex mx-3 item-center justify-center leading-none bg-green-500 dark:bg-green-600 rounded-full w-20">
            <img src="https://a.storyblok.com/f/54304/400x400/50687dd9d1/fw21-happinesseverywhere-logo.gif"
              alt="fw21-happinesseverywhere-logo" class="w-20">
          </span>
          <h1 class="text-xl font-bold text-center px-8 sm:px-10 text-black">Fancy 10% off your first order?</h1>
          <p class="text-center text-sm text-gray-800 font-medium">Who doesn't! Get our newsletter for a 10% discount &
            the latest news and offers.</p>
          <form class="w-full">
            <div class="relative z-0 mb-6 w-full group">
              <input type="email" name="floating_email"
                class="block py-2.5 px-0 w-full text-sm text-gray-900 bg-transparent border-0 border-b border-gray-800 appearance-none focus:outline-none focus:ring-0 peer"
                placeholder=" " required />
              <label for="floating_email"
                class="absolute text-sm  duration-300 transform -translate-y-6 scale-75 top-3 -z-10 origin-[0] peer-focus:left-0 text-gray-800 peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-6">Email
                address</label>
            </div>
          </form>
          <button class="font-semibold px-16 py-2 border-b-8 border-2 shadow-lg bg-white border-black text-black">
            Sign up
          </button>
          <small class="text-center text-gray-800 mx-8">By signing up you agree to <span
              class="underline cursor-pointer hover:text-black">our email privacy policy</span>.</small>
        </div>
      </div>
    </div>
  </div>
</div>

<style>
  @import url('https://fonts.googleapis.com/css2?family=Space+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap');

  body {
    font-family: 'Space Mono', monospace;
  }
</style>
Modal Promo Happysock - Tailwind Component

Preview - Modal Promo Happysock - Tailwind Component
