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

Use 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 Tools

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