sectionnewsletterbeginner
Newsletter Section
An email subscription section with an inline input and submit button.
Preview
Stay Updated
Get the latest tips and tutorials delivered to your inbox.
<section class="bg-gray-50 py-16 px-4">
<div class="max-w-xl mx-auto text-center">
<h2 class="text-2xl font-bold text-gray-900 mb-2">Stay Updated</h2>
<p class="text-gray-500 mb-6">Get the latest tips and tutorials delivered to your inbox.</p>
<form class="flex gap-2">
<input type="email" placeholder="Enter your email" class="flex-1 px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent text-sm" />
<button type="submit" class="px-6 py-3 bg-blue-600 text-white font-semibold rounded-lg hover:bg-blue-700 transition-colors text-sm whitespace-nowrap">Subscribe</button>
</form>
</div>
</section>Color Breakdown
Section Background
bg-gray-50
#f9fafb
Title
text-gray-900
#111827
Subtitle
text-gray-500
#6b7280
Input Border
border-gray-300
#d1d5db
Focus Ring
focus:ring-blue-500
#3b82f6
Button
bg-blue-600
#2563eb
Dark Mode Variant
Add these Tailwind classes for a dark mode adaptation of this recipe.
dark:bg-gray-800 dark:text-white dark:border-gray-600Use Cases
Blog subscription formsProduct update signupsMarketing landing pages
Browser Support
All modern browsers.
Related Recipes
Build Your Own Color Recipe
Use our Tailwind CSS tools to experiment with colors, gradients, and component styles.
Explore ToolsFrequently Asked Questions
How do I stack the input and button on mobile?▼
Change the flex container to flex-col on small screens with flex flex-col sm:flex-row.