Newsletter Sections
Ready to use Tailwind CSS newsletter section components with production-ready, copy-paste HTML code. Use them as they are, or as a starting point to build beautiful websites.
If you have any kind of content, a blog, a product, updates worth sharing, getting people's emails is still one of the better moves you can make. These newsletter sections are straightforward: a headline, maybe a line of supporting text, an email input, and a button. We have a few layout variations, from a centered block to a full-width accent-colored section to a compact inline version that works well between content or in a footer. You handle the actual subscription logic.
Tailwind
<div class="bg-white py-24 sm:py-32">
<div class="px-6 text-center lg:px-8">
<h2 class="mx-auto max-w-2xl text-3xl font-semibold tracking-tight text-gray-900 sm:text-4xl">Stay informed about our launch!</h2>
<p class="mx-auto mt-2 max-w-xl text-lg leading-8 text-gray-600">Receive exclusive updates and be among the first to explore our latest features.</p>
<form method="POST" action="#" class="mx-auto mt-10 sm:max-w-md">
<div class="flex flex-col flex-wrap gap-4 sm:flex-row">
<div class="flex-auto">
<label for="email" class="sr-only">Email</label>
<input type="email" name="email" id="email" placeholder="Enter your email" class="w-full rounded-md border-0 bg-white px-3.5 py-2 text-base text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-pink-500 sm:text-sm sm:leading-6" />
</div>
<button type="submit" class="flex-none rounded-md bg-pink-500 px-3.5 py-2.5 text-sm font-semibold text-white hover:bg-pink-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-pink-500">Subscribe</button>
</div>
</form>
<div class="mt-6 flex flex-col items-center justify-center gap-x-4 gap-y-2 sm:flex-row">
<div class="flex flex-none items-center -space-x-3" role="group" aria-label="Subscriber profile pictures">
<div class="relative -m-0.5 rounded-full bg-white p-0.5">
<span aria-hidden="true" class="absolute inset-0.5 h-8 w-8 rounded-full ring-1 ring-inset ring-gray-900/10"></span>
<img alt="" class="h-8 w-8 rounded-full object-cover" src="https://images.unsplash.com/photo-1534528741775-53994a69daeb?q=80&w=256&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
</div>
<div class="relative -m-0.5 rounded-full bg-white p-0.5">
<span aria-hidden="true" class="absolute inset-0.5 h-8 w-8 rounded-full ring-1 ring-inset ring-gray-900/10"></span>
<img alt="" class="h-8 w-8 rounded-full object-cover" src="https://images.unsplash.com/photo-1587397845856-e6cf49176c70?q=80&w=256&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
</div>
<div class="relative -m-0.5 rounded-full bg-white p-0.5">
<span aria-hidden="true" class="absolute inset-0.5 h-8 w-8 rounded-full ring-1 ring-inset ring-gray-900/10"></span>
<img alt="" class="h-8 w-8 rounded-full object-cover" src="https://images.unsplash.com/photo-1488426862026-3ee34a7d66df?q=80&w=256&h=256&auto=format&fit=facearea&facepad=2&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
</div>
<div class="relative -m-0.5 rounded-full bg-white p-0.5">
<span aria-hidden="true" class="absolute inset-0.5 h-8 w-8 rounded-full ring-1 ring-inset ring-gray-900/10"></span>
<img alt="" class="h-8 w-8 rounded-full object-cover" src="https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?q=80&w=256&h=256&auto=format&fit=facearea&facepad=2&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
</div>
</div>
<p class="text-sm font-medium text-gray-600" aria-label="3,000 subscribers">3,000+ already subscribed</p>
</div>
</div>
</div>Requires @tailwindcss/forms plugin
Install via npm:
npm install -D @tailwindcss/forms
Add to tailwind.config.js:
plugins: [require('@tailwindcss/forms')]
<div class="bg-white py-24 sm:py-32">
<div class="mx-auto max-w-7xl px-6 lg:px-8">
<div class="max-w-2xl">
<h2 class="inline text-3xl font-semibold tracking-tight text-gray-900 sm:block sm:text-4xl">Subscribe to our newsletter.</h2>
<p class="inline text-3xl font-semibold tracking-tight text-gray-900 sm:block sm:text-4xl">Stay ahead with the latest updates!</p>
</div>
<form method="POST" action="#" class="mt-10">
<div class="flex flex-col flex-wrap gap-4 sm:max-w-md sm:flex-row">
<div class="flex-auto">
<label for="email" class="sr-only">Email</label>
<input type="email" name="email" id="email" placeholder="Enter your email" class="w-full rounded-md border-0 bg-white px-3.5 py-2 text-base text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-pink-500 sm:text-sm sm:leading-6" />
</div>
<div class="inline-flex w-full items-center gap-x-2.5 sm:order-last">
<div class="group relative flex h-4 w-4">
<input type="checkbox" name="privacy" id="privacy" class="h-4 w-4 rounded border-gray-300 bg-white text-pink-500 checked:bg-none indeterminate:bg-none focus:border-gray-300 focus:ring-2 focus:ring-pink-500 focus:ring-offset-2 focus:ring-offset-white disabled:bg-gray-100 disabled:checked:border-gray-300 disabled:checked:bg-gray-100 disabled:indeterminate:border-gray-300 disabled:indeterminate:bg-gray-100" checked />
<svg class="pointer-events-none absolute left-1/2 top-1/2 h-3 w-3 -translate-x-1/2 -translate-y-1/2 stroke-white group-has-[:disabled]:stroke-gray-300" aria-hidden="true" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<path class="opacity-0 group-has-[:indeterminate]:opacity-100" d="M2.5 6H9.5" stroke-width="1.67" stroke-linecap="round" />
<path class="opacity-0 group-has-[:checked]:opacity-100" d="M2 6.05059L4.47477 8.52525L10 3" stroke-width="1.67" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</div>
<label for="privacy" class="select-none text-sm leading-6 text-gray-600">
I agree to the
<a href="#" class="font-semibold text-pink-500">privacy policy</a>.
</label>
</div>
<button type="submit" class="flex-none rounded-md bg-pink-500 px-3.5 py-2.5 text-sm font-semibold text-white hover:bg-pink-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-pink-500">Subscribe</button>
</div>
</form>
</div>
</div><div class="bg-white py-24 sm:py-32">
<div class="mx-auto max-w-7xl sm:px-6 lg:px-8">
<div class="relative isolate overflow-clip bg-gray-900 px-6 pt-16 shadow-2xl sm:rounded-3xl sm:px-16 md:pt-24 lg:flex lg:gap-x-20 lg:px-24 lg:pt-0">
<div aria-hidden="true" class="absolute right-0 top-0 -z-10 aspect-square w-full max-w-3xl translate-x-3/4 rounded-full bg-pink-500/60 blur-[10rem] lg:-top-[40rem] lg:left-1/2 lg:-translate-x-1/2"></div>
<div class="mx-auto max-w-md text-center lg:mx-0 lg:flex-auto lg:py-24 lg:text-start">
<h2 class="text-3xl font-semibold tracking-tight text-white sm:text-4xl">Stay informed about our upcoming launch!</h2>
<p class="mt-4 text-lg leading-8 text-gray-300">Receive exclusive updates and be among the first to explore our latest features.</p>
<form method="POST" action="#" class="mt-10">
<div class="flex flex-col gap-4 sm:max-w-md sm:flex-row">
<div class="flex-auto">
<label for="email" class="sr-only">Email</label>
<input type="email" name="email" id="email" placeholder="Enter your email" class="w-full rounded-md border-0 bg-white/5 px-3.5 py-2 text-base text-white shadow-sm ring-1 ring-inset ring-white/10 placeholder:text-gray-500 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white sm:text-sm sm:leading-6" />
</div>
<button type="submit" class="flex-none rounded-md bg-white px-3.5 py-2.5 text-sm font-semibold text-gray-900 hover:bg-gray-100 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white">Notify me</button>
</div>
</form>
</div>
<div class="relative mt-16 h-80 lg:mt-8 lg:h-auto">
<img width="1920" height="1139" class="absolute left-0 top-0 w-[58rem] max-w-none rounded-2xl bg-white/5 ring-1 ring-white/10 lg:top-14" src="https://htmlwind.com/assets/images/dark-dashboard-screenshot.webp" alt="dashboard screenshot" />
</div>
</div>
</div>
</div>Requires @tailwindcss/forms plugin
Install via npm:
npm install -D @tailwindcss/forms
Add to tailwind.config.js:
plugins: [require('@tailwindcss/forms')]
<div class="bg-white py-24 sm:py-32">
<div class="mx-auto max-w-7xl px-6 lg:px-8">
<div class="grid grid-cols-1 gap-10 lg:grid-cols-12">
<div class="max-w-xl lg:col-span-7">
<h2 class="inline text-3xl font-semibold tracking-tight text-gray-900 sm:block sm:text-4xl">Want the latest product updates?</h2>
<p class="inline text-3xl font-semibold tracking-tight text-gray-900 sm:block sm:text-4xl">Subscribe to our newsletter.</p>
</div>
<form method="POST" action="#" class="lg:col-span-5">
<div class="flex flex-col flex-wrap gap-4 sm:max-w-md sm:flex-row">
<div class="flex-auto">
<label for="email" class="sr-only">Email</label>
<input type="email" name="email" id="email" placeholder="Enter your email" class="w-full rounded-md border-0 bg-white px-3.5 py-2 text-base text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-pink-500 sm:text-sm sm:leading-6" />
</div>
<div class="inline-flex w-full items-center gap-x-2.5 sm:order-last">
<div class="group relative flex h-4 w-4">
<input type="checkbox" name="privacy" id="privacy" class="h-4 w-4 rounded border-gray-300 bg-white text-pink-500 checked:bg-none indeterminate:bg-none focus:border-gray-300 focus:ring-2 focus:ring-pink-500 focus:ring-offset-2 focus:ring-offset-white disabled:bg-gray-100 disabled:checked:border-gray-300 disabled:checked:bg-gray-100 disabled:indeterminate:border-gray-300 disabled:indeterminate:bg-gray-100" checked />
<svg class="pointer-events-none absolute left-1/2 top-1/2 h-3 w-3 -translate-x-1/2 -translate-y-1/2 stroke-white group-has-[:disabled]:stroke-gray-300" aria-hidden="true" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<path class="opacity-0 group-has-[:indeterminate]:opacity-100" d="M2.5 6H9.5" stroke-width="1.67" stroke-linecap="round" />
<path class="opacity-0 group-has-[:checked]:opacity-100" d="M2 6.05059L4.47477 8.52525L10 3" stroke-width="1.67" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</div>
<label for="privacy" class="select-none text-sm leading-6 text-gray-600">
I agree to the
<a href="#" class="font-semibold text-pink-500">privacy policy</a>.
</label>
</div>
<button type="submit" class="flex-none rounded-md bg-pink-500 px-3.5 py-2.5 text-sm font-semibold text-white hover:bg-pink-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-pink-500">Subscribe</button>
</div>
</form>
</div>
</div>
</div>Requires @tailwindcss/forms plugin
Install via npm:
npm install -D @tailwindcss/forms
Add to tailwind.config.js:
plugins: [require('@tailwindcss/forms')]
<div class="bg-gray-900 py-24 sm:py-32">
<div class="mx-auto max-w-7xl px-6 lg:px-8">
<div class="grid grid-cols-1 gap-10 lg:grid-cols-12">
<div class="max-w-xl lg:col-span-7">
<h2 class="inline text-3xl font-semibold tracking-tight text-white sm:block sm:text-4xl">Want the latest product updates?</h2>
<p class="inline text-3xl font-semibold tracking-tight text-white sm:block sm:text-4xl">Subscribe to our newsletter.</p>
</div>
<form method="POST" action="#" class="lg:col-span-5">
<div class="flex flex-col flex-wrap gap-4 sm:max-w-md sm:flex-row">
<div class="flex-auto">
<label for="email" class="sr-only">Email</label>
<input type="email" name="email" id="email" placeholder="Enter your email" class="w-full rounded-md border-0 bg-white/5 px-3.5 py-2 text-base text-white shadow-sm ring-1 ring-inset ring-white/10 placeholder:text-gray-500 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-pink-500 sm:text-sm sm:leading-6" />
</div>
<div class="inline-flex w-full items-center gap-x-2.5 sm:order-last">
<div class="group relative flex h-4 w-4">
<input type="checkbox" name="privacy" id="privacy" class="h-4 w-4 rounded border-gray-600 bg-gray-900 text-pink-500 checked:bg-none indeterminate:bg-none focus:border-gray-600 focus:ring-2 focus:ring-pink-500 focus:ring-offset-2 focus:ring-offset-gray-900 disabled:bg-gray-800 disabled:checked:border-gray-600 disabled:checked:bg-gray-800 disabled:indeterminate:border-gray-600 disabled:indeterminate:bg-gray-800" checked />
<svg class="pointer-events-none absolute left-1/2 top-1/2 h-3 w-3 -translate-x-1/2 -translate-y-1/2 stroke-white group-has-[:disabled]:stroke-gray-600" aria-hidden="true" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<path class="opacity-0 group-has-[:indeterminate]:opacity-100" d="M2.5 6H9.5" stroke-width="1.67" stroke-linecap="round" />
<path class="opacity-0 group-has-[:checked]:opacity-100" d="M2 6.05059L4.47477 8.52525L10 3" stroke-width="1.67" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</div>
<label for="privacy" class="select-none text-sm leading-6 text-gray-300">
I agree to the
<a href="#" class="font-semibold text-white">privacy policy</a>.
</label>
</div>
<button type="submit" class="flex-none rounded-md bg-pink-500 px-3.5 py-2.5 text-sm font-semibold text-white hover:bg-pink-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-pink-500">Subscribe</button>
</div>
</form>
</div>
</div>
</div>Requires @tailwindcss/forms plugin
Install via npm:
npm install -D @tailwindcss/forms
Add to tailwind.config.js:
plugins: [require('@tailwindcss/forms')]
<div class="bg-white py-24 sm:py-32">
<div class="mx-auto max-w-7xl sm:px-6 lg:px-8">
<div class="grid grid-cols-1 gap-10 bg-gray-50 px-6 py-16 sm:rounded-2xl sm:px-16 lg:grid-cols-12">
<div class="max-w-xl lg:col-span-7">
<h2 class="inline text-3xl font-semibold tracking-tight text-gray-900 sm:block sm:text-4xl">Want the latest product updates?</h2>
<p class="inline text-3xl font-semibold tracking-tight text-gray-900 sm:block sm:text-4xl">Subscribe to our newsletter.</p>
</div>
<form method="POST" action="#" class="lg:col-span-5">
<div class="flex flex-col flex-wrap gap-4 sm:max-w-md sm:flex-row">
<div class="flex-auto">
<label for="email" class="sr-only">Email</label>
<input type="email" name="email" id="email" placeholder="Enter your email" class="w-full rounded-md border-0 bg-white px-3.5 py-2 text-base text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-pink-500 sm:text-sm sm:leading-6" />
</div>
<div class="inline-flex w-full items-center gap-x-2.5 sm:order-last">
<div class="group relative flex h-4 w-4">
<input type="checkbox" name="privacy" id="privacy" class="h-4 w-4 rounded border-gray-300 bg-white text-pink-500 checked:bg-none indeterminate:bg-none focus:border-gray-300 focus:ring-2 focus:ring-pink-500 focus:ring-offset-2 focus:ring-offset-white disabled:bg-gray-100 disabled:checked:border-gray-300 disabled:checked:bg-gray-100 disabled:indeterminate:border-gray-300 disabled:indeterminate:bg-gray-100" checked />
<svg class="pointer-events-none absolute left-1/2 top-1/2 h-3 w-3 -translate-x-1/2 -translate-y-1/2 stroke-white group-has-[:disabled]:stroke-gray-300" aria-hidden="true" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<path class="opacity-0 group-has-[:indeterminate]:opacity-100" d="M2.5 6H9.5" stroke-width="1.67" stroke-linecap="round" />
<path class="opacity-0 group-has-[:checked]:opacity-100" d="M2 6.05059L4.47477 8.52525L10 3" stroke-width="1.67" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</div>
<label for="privacy" class="select-none text-sm leading-6 text-gray-600">
I agree to the
<a href="#" class="font-semibold text-pink-500">privacy policy</a>.
</label>
</div>
<button type="submit" class="flex-none rounded-md bg-pink-500 px-3.5 py-2.5 text-sm font-semibold text-white hover:bg-pink-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-pink-500">Subscribe</button>
</div>
</form>
</div>
</div>
</div>Requires @tailwindcss/forms plugin
Install via npm:
npm install -D @tailwindcss/forms
Add to tailwind.config.js:
plugins: [require('@tailwindcss/forms')]
<div class="relative bg-white">
<div class="relative h-80 md:absolute md:left-0 md:top-0 md:h-full md:w-1/3 lg:w-1/2">
<img class="h-full w-full object-cover" src="https://images.unsplash.com/photo-1557426272-fc759fdf7a8d?auto=format&fit=crop&w=1920&q=80&blend=ec4899&sat=-100&blend-mode=multiply" alt="" />
<div aria-hidden="true" class="absolute bottom-4 right-10 aspect-square h-1/2 rounded-full bg-gradient-to-b from-pink-500 to-amber-400/40 opacity-50 blur-3xl"></div>
</div>
<div class="mx-auto max-w-7xl px-6 lg:px-8">
<div class="md:flex">
<div class="ml-auto py-24 md:w-2/3 md:py-32 md:pl-16 lg:w-1/2 lg:pl-24 xl:pl-32">
<h2 class="text-3xl font-semibold tracking-tight text-gray-900 sm:text-4xl">Join our newsletter for the latest updates</h2>
<p class="mt-6 text-lg leading-8 text-gray-600">Stay updated with the latest news, tips, and exclusive offers. Join our community and never miss out on what's important to you!</p>
<form method="POST" action="#" class="mt-10">
<div class="flex flex-col flex-wrap gap-4 sm:max-w-md sm:flex-row">
<div class="flex-auto">
<label for="email" class="sr-only">Email</label>
<input type="email" name="email" id="email" placeholder="Enter your email" class="w-full rounded-md border-0 bg-white px-3.5 py-2 text-base text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-pink-500 sm:text-sm sm:leading-6" />
</div>
<div class="inline-flex w-full items-center gap-x-2.5 sm:order-last">
<div class="group relative flex h-4 w-4">
<input type="checkbox" name="privacy" id="privacy" class="h-4 w-4 rounded border-gray-300 bg-white text-pink-500 checked:bg-none indeterminate:bg-none focus:border-gray-300 focus:ring-2 focus:ring-pink-500 focus:ring-offset-2 focus:ring-offset-white disabled:bg-gray-100 disabled:checked:border-gray-300 disabled:checked:bg-gray-100 disabled:indeterminate:border-gray-300 disabled:indeterminate:bg-gray-100" checked />
<svg class="pointer-events-none absolute left-1/2 top-1/2 h-3 w-3 -translate-x-1/2 -translate-y-1/2 stroke-white group-has-[:disabled]:stroke-gray-300" aria-hidden="true" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<path class="opacity-0 group-has-[:indeterminate]:opacity-100" d="M2.5 6H9.5" stroke-width="1.67" stroke-linecap="round" />
<path class="opacity-0 group-has-[:checked]:opacity-100" d="M2 6.05059L4.47477 8.52525L10 3" stroke-width="1.67" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</div>
<label for="privacy" class="select-none text-sm leading-6 text-gray-600">
I agree to the
<a href="#" class="font-semibold text-pink-500">privacy policy</a>.
</label>
</div>
<button type="submit" class="flex-none rounded-md bg-pink-500 px-3.5 py-2.5 text-sm font-semibold text-white hover:bg-pink-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-pink-500">Subscribe</button>
</div>
</form>
</div>
</div>
</div>
</div><div class="bg-white py-24 sm:py-32">
<div class="px-6 text-center lg:px-8">
<h2 class="mx-auto max-w-2xl text-3xl font-semibold tracking-tight text-gray-900 sm:text-4xl">Stay informed about our launch!</h2>
<p class="mx-auto mt-2 max-w-xl text-lg leading-8 text-gray-600">Receive exclusive updates and be among the first to explore our latest features.</p>
<form method="POST" action="#" class="mx-auto mt-10 sm:max-w-md">
<div class="flex flex-col flex-wrap gap-4 sm:flex-row">
<div class="flex-auto">
<label for="email" class="sr-only">Email</label>
<input type="email" name="email" id="email" placeholder="Enter your email" class="w-full rounded-md border-0 bg-white px-3.5 py-2 text-base text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-pink-500 sm:text-sm sm:leading-6" />
</div>
<button type="submit" class="flex-none rounded-md bg-pink-500 px-3.5 py-2.5 text-sm font-semibold text-white hover:bg-pink-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-pink-500">Subscribe</button>
</div>
</form>
</div>
</div><div class="relative isolate overflow-clip bg-gray-900 py-24 sm:py-32">
<div aria-hidden="true" class="absolute left-1/2 top-0 -z-10 aspect-square w-[42rem] -translate-x-1/2 -translate-y-3/4 rounded-full bg-pink-500/60 blur-[10rem]"></div>
<div class="px-6 text-center lg:px-8">
<h2 class="mx-auto max-w-2xl text-3xl font-semibold tracking-tight text-white sm:text-4xl">Stay informed about our launch!</h2>
<p class="mx-auto mt-2 max-w-xl text-lg leading-8 text-gray-300">Receive exclusive updates and be among the first to explore our latest features.</p>
<form method="POST" action="#" class="mx-auto mt-10 sm:max-w-md">
<div class="flex flex-col gap-4 sm:flex-row">
<div class="flex-auto">
<label for="email" class="sr-only">Email</label>
<input type="email" name="email" id="email" placeholder="Enter your email" class="w-full rounded-md border-0 bg-white/5 px-3.5 py-2 text-base text-white shadow-sm ring-1 ring-inset ring-white/10 placeholder:text-gray-500 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white sm:text-sm sm:leading-6" />
</div>
<button type="submit" class="flex-none rounded-md bg-white px-3.5 py-2.5 text-sm font-semibold text-gray-900 hover:bg-gray-100 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white">Notify me</button>
</div>
</form>
</div>
</div>Frequently asked questions
-
Centered single column, two-column side-by-side, full-width accent color, and compact embeddable versions designed to go between other sections or inside a footer.
-
That's on you to wire up, just point the form action at your provider's endpoint. Mailchimp, ConvertKit, Beehiiv, whatever you use will have a form URL or API you can hook into.
-
Only for some of them. A few variants use @tailwindcss/forms for the input styling, the rest don't need it. You'll see a notice in the code panel when a component requires it.
-
Yes. Two-column versions collapse to single column on mobile.
Related Tailwind CSS components
More free, copy-paste Tailwind CSS components to use in your projects.