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...
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>