<section class="py-24 sm:pt-32 sm:pb-64 bg-gray-100">
<div class="container px-4 mx-auto">
<div class="flex items-center mb-24">
<span class="font-heading text-xl">03</span>
<div class="mx-4 rounded-full bg-gray-200 h-1 w-1"></div>
<span class="font-heading text-xl">Newsletter</span>
</div>
<div class="text-center">
<h1 class="font-heading text-4xl sm:text-6xl lg:text-7xl mb-24">
<span class="block">Sign up for</span>
<span>email newsletters</span>
</h1>
<div class="max-w-xl mx-auto lg:max-w-2xl xl:max-w-4xl">
<form action="#" method="post">
<div class="flex flex-wrap items-center justify-center -mx-4">
<div class="w-full sm:w-2/3 px-4 mb-4 sm:mb-0">
<div class="relative px-10 py-3 bg-transparent border border-gray-400 rounded-lg">
<input class="block mt-3 bg-transparent outline-none w-full" type="email" placeholder="mat@hello.dev" value="">
<label class="absolute top-0 left-0 ml-10 mt-3 text-xs font-normal text-gray-400" for="">Your email</label>
</div>
</div>
<div class="w-full sm:w-auto px-4">
<button class="inline-block w-full sm:w-auto px-7 py-4 text-center font-medium bg-indigo-500 hover:bg-indigo-600 text-white rounded transition duration-250" type="submit">Sign Me</button>
</div>
</div>
</form>
</div>
</div>
</div>
</section>
Can't find the right component?
Describe it and Shuffle AI builds it in seconds, ready to edit and export.
Free to start
Generate with AI
