DocsAllOver Modern Tailwind CSS Hero Section with Promo and Dual Buttons Snippets

Modern Tailwind CSS Hero Section with Promo and Dual Buttons

June 15, 2025

Tailwind, Responsive, Hero Section, Clean UI, Ecommerce

Full Screen

<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://cdn.tailwindcss.com"></script>
  <script>
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            'custom-blue': '#5271ff',
          }
        }
      }
    }
  </script>
</head>
<body>
    <div class="relative my-12 flex w-full flex-col items-center sm:mt-24">
        <a target="_blank" rel="noreferrer" href="https://example.com"
          class="mx-auto flex max-w-fit items-center justify-center space-x-2 overflow-hidden rounded-full bg-blue-100 px-7 py-2 transition-all hover:bg-blue-200">
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 248 204" class="h-5 w-5 text-[#5271ff]">
            <path fill="currentColor"
              d="M221.95 51.29c.15 2.17.15 4.34.15 6.53 0 66.73-50.8 143.69-143.69 143.69v-.04c-27.44.04-54.31-7.82-77.41-22.64 3.99.48 8 .72 12.02.73 22.74.02 44.83-7.61 62.72-21.66-21.61-.41-40.56-14.5-47.18-35.07 7.57 1.46 15.37 1.16 22.8-.87-23.56-4.76-40.51-25.46-40.51-49.5v-.64c7.02 3.91 14.88 6.08 22.92 6.32C11.58 63.31 4.74 33.79 18.14 10.71c25.64 31.55 63.47 50.73 104.08 52.76-4.07-17.54 1.49-35.92 14.61-48.25 20.34-19.12 52.33-18.14 71.45 2.19 11.31-2.23 22.15-6.38 32.07-12.26-3.77 11.69-11.66 21.62-22.2 27.93 10.01-1.18 19.79-3.86 29-7.95-6.78 10.16-15.32 19.01-25.20 26.16z">
            </path>
          </svg>
          <p class="text-sm font-semibold text-[#5271ff]">Introducing New Feature</p>
        </a>
        <h1
          class="mt-8 max-w-sm bg-gradient-to-br from-gray-500 via-custom-blue to-gray-500 bg-clip-text text-center text-4xl font-extrabold text-transparent sm:max-w-4xl sm:text-6xl">
          Empowering Tomorrow with AI Today
        </h1>
        <span class="mt-8 max-w-lg text-center text-xl leading-relaxed text-gray-800">
          Discover the latest features and enhancements for your SaaS product. Stay ahead in the market with these improvements.
        </span>
        <p class="mt-3 rounded border px-3 py-1 shadow">
          &#127873; <span class="text-accent font-semibold">$50 off</span> for the first 1,000 customers!
        </p>
        <div class="mt-12 grid grid-cols-1 gap-8 sm:grid-cols-2 sm:gap-0 sm:gap-x-4">
          <a href="https://example.com/new-feature"
            class="flex flex-row items-center justify-center gap-x-2 rounded-lg text-white px-10 py-3 bg-custom-blue">
            <svg class="h-[30px] text-white" stroke="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"
              stroke-width="3" stroke="#000000" fill="none">
              <path d="M14,39.87,24.59,50.51s33-14,31.23-42.29C55.82,8.22,29.64,4.28,14,39.87Z"></path>
              <path d="M44.69,9.09a12.3,12.3,0,0,0,3.48,6.73,12.31,12.31,0,0,0,7,3.52"></path>
              <circle cx="39.46" cy="24.56" r="6.2"></circle>
              <path d="M14.89,37.82l-5.3.68a.27.27,0,0,1-.28-.37l3.93-9a2.65,2.65,0,0,1-.88-1.53l6.59-1.38"></path>
              <path d="M26.55,49.4l-.69,5.3a.27.27,0,0,0,.37.28l9-3.92a2.69,2.69,0,0,0,1.53-1.89l1.38-6.59"></path>
              <path d="M22.21,48.13c-2.37,7.41-14.1,7.78-14.1,7.78S8,44.51,15.76,41.67"></path>
            </svg>
            Get the Latest Update
          </a>
          <a href="#demo"
            class="flex flex-row items-center justify-center gap-x-2 rounded-lg border border-custom-blue px-10 py-3 text-custom-blue">Learn
            More  &rarr;
          </a>
        </div>
      </div>
</body>
</html>

/* Doesn't require any CSS. */

//Doesn't require any JS.

This Tailwind CSS snippet showcases a modern and impactful hero section designed to capture immediate attention with a prominent feature announcement, a compelling promotional offer, and dual call-to-action buttons.

Key Features:

Responsive Design: The hero section adapts fluidly to different screen sizes, providing optimal viewing and interaction on desktops, tablets, and mobile devices.
Prominent Feature/Product Announcement: Includes a clear area to highlight new features, product launches, or key updates, often with a distinct visual cue (like the "Introducing New Feature" badge).
Dual Call-to-Action Buttons: Provides two distinct buttons, allowing users to choose between primary and secondary actions (e.g., "Get the Latest Update" and "Learn More").
Impactful First Impression: Designed to immediately convey value and encourage visitors to explore further.

Implementation:

Include Tailwind CSS: Ensure that Tailwind CSS is installed and properly configured in your project.
Create the HTML Structure: Define the HTML structure for the hero section, including a main container, a headline, a descriptive paragraph, the promotional offer element, and the two call-to-action buttons.
Apply Tailwind CSS Classes: Utilize Tailwind CSS utility classes extensively to style the hero section's background, padding, text, button appearance, and overall layout. Focus on visual hierarchy to draw attention to the key elements.

By following these steps, you can seamlessly integrate a responsive and highly effective hero section with promotional offers and dual call-to-action buttons into your Tailwind CSS project, ensuring an impactful and engaging introduction for your website visitors.

Latest Snippets

View All