Back to marketing components
Newsletter Signup
Newsletter signup components created with Tailwind CSS. Perfect for capturing email leads and growing your audience on marketing websites and web applications.
2/2 Dark Mode Updated: Dec 7, 2025
<div class="bg-gray-100">
<div class="mx-auto max-w-7xl px-4 py-8 sm:px-6 lg:px-8">
<div class="max-w-prose">
<h2 class="text-2xl font-semibold text-gray-900 sm:text-3xl">
Sign up for our newsletter
</h2>
<p class="mt-4 text-pretty text-gray-700">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur doloremque saepe
architecto maiores repudiandae amet perferendis repellendus, reprehenderit voluptas
sequi.
</p>
</div>
<form action="#" class="mt-6 flex max-w-xl flex-col gap-4 sm:flex-row sm:items-center">
<label for="Email" class="flex-1">
<span class="sr-only"> Email </span>
<input
type="email"
id="Email"
placeholder="Enter your email"
class="h-12 w-full rounded border-gray-300 shadow-sm"
/>
</label>
<button
type="submit"
class="h-12 rounded-sm border border-indigo-600 bg-indigo-600 px-12 py-3 text-sm font-medium text-white hover:bg-transparent hover:text-indigo-600"
>
Sign Up
</button>
</form>
</div>
</div>Plugins: @tailwindcss/forms
<div class="bg-gray-100 dark:bg-gray-800">
<div class="mx-auto max-w-7xl px-4 py-8 sm:px-6 lg:px-8">
<div class="max-w-prose">
<h2 class="text-2xl font-semibold text-gray-900 sm:text-3xl dark:text-white">
Sign up for our newsletter
</h2>
<p class="mt-4 text-pretty text-gray-700 dark:text-gray-200">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur doloremque saepe
architecto maiores repudiandae amet perferendis repellendus, reprehenderit voluptas
sequi.
</p>
</div>
<form action="#" class="mt-6 flex max-w-xl flex-col gap-4 sm:flex-row sm:items-center">
<label for="Email" class="flex-1">
<span class="sr-only"> Email </span>
<input
type="email"
id="Email"
placeholder="Enter your email"
class="h-12 w-full rounded border-gray-300 shadow-sm dark:border-gray-600 dark:bg-gray-900 dark:text-white"
/>
</label>
<button
type="submit"
class="h-12 rounded-sm border border-indigo-600 bg-indigo-600 px-12 py-3 text-sm font-medium text-white hover:bg-transparent hover:text-indigo-600 dark:text-white dark:hover:bg-indigo-700 dark:hover:text-white"
>
Sign Up
</button>
</form>
</div>
</div>Plugins: @tailwindcss/forms
<div class="bg-gray-100">
<div class="mx-auto max-w-7xl px-4 py-8 sm:px-6 lg:px-8">
<div class="mx-auto max-w-prose text-center">
<h2 class="text-2xl font-semibold text-gray-900 sm:text-3xl">
Sign up for our newsletter
</h2>
<p class="mt-4 text-pretty text-gray-700">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur doloremque saepe
architecto maiores repudiandae amet perferendis repellendus, reprehenderit voluptas
sequi.
</p>
</div>
<form
action="#"
class="mx-auto mt-6 flex max-w-xl flex-col gap-4 sm:flex-row sm:items-center sm:justify-center"
>
<label for="Email" class="flex-1">
<span class="sr-only"> Email </span>
<input
type="email"
id="Email"
placeholder="Enter your email"
class="h-12 w-full rounded border-gray-300 shadow-sm"
/>
</label>
<button
type="submit"
class="h-12 rounded-sm border border-indigo-600 bg-indigo-600 px-12 py-3 text-sm font-medium text-white hover:bg-transparent hover:text-indigo-600"
>
Sign Up
</button>
</form>
</div>
</div>Plugins: @tailwindcss/forms
<div class="bg-gray-100 dark:bg-gray-800">
<div class="mx-auto max-w-7xl px-4 py-8 sm:px-6 lg:px-8">
<div class="mx-auto max-w-prose text-center">
<h2 class="text-2xl font-semibold text-gray-900 sm:text-3xl dark:text-white">
Sign up for our newsletter
</h2>
<p class="mt-4 text-pretty text-gray-700 dark:text-gray-200">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur doloremque saepe
architecto maiores repudiandae amet perferendis repellendus, reprehenderit voluptas
sequi.
</p>
</div>
<form
action="#"
class="mx-auto mt-6 flex max-w-xl flex-col gap-4 sm:flex-row sm:items-center sm:justify-center"
>
<label for="Email" class="flex-1">
<span class="sr-only"> Email </span>
<input
type="email"
id="Email"
placeholder="Enter your email"
class="h-12 w-full rounded border-gray-300 shadow-sm dark:border-gray-600 dark:bg-gray-900 dark:text-white"
/>
</label>
<button
type="submit"
class="h-12 rounded-sm border border-indigo-600 bg-indigo-600 px-12 py-3 text-sm font-medium text-white hover:bg-transparent hover:text-indigo-600 dark:text-white dark:hover:bg-indigo-700 dark:hover:text-white"
>
Sign Up
</button>
</form>
</div>
</div>Plugins: @tailwindcss/forms