Responsive Hero Section

Get this professional hero section for your website. Includes a gradient text effect, stylish background blurs, and a perfectly aligned image section. Easy to integrate and fully customizable for any project.

This tailwind example is contributed by Homayoun, on 28-Sep-2025. Component is made with Tailwind v3.4. It is responsive. It supports dark mode. similar terms for this example are CTA,banner

Call to Action Hero

Author Homayoun

Tailwind v3.4 678 6

Fork Fullscreen

<div class="relative flex max-w-3xl flex-col items-center text-center lg:items-start lg:text-left">
        <h1 class="text-4xl font-bold leading-tight sm:text-5xl md:text-6xl xl:text-7xl text-gray-900 dark:text-gray-100">
          Lorem ipsum dolor
          <span class="relative inline-block bg-gradient-to-br from-blue-500 via-purple-500 to-cyan-500 bg-clip-text text-transparent">
            sit amet
            <span class="absolute -bottom-2 left-0 h-1 w-full rounded-full bg-gradient-to-r from-blue-500 via-purple-500 to-cyan-500"></span>
          </span>
          consectetur.
        </h1>
        <p class="mt-6 text-lg text-gray-600 dark:text-gray-300 sm:text-xl">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
        </p>
      </div>

<div class="relative flex-1 max-w-3xl lg:max-w-none group">
        
        <div class="absolute -top-8 -right-8 h-16 w-16 rounded-2xl bg-gradient-to-br from-blue-500 to-purple-500 opacity-80 backdrop-blur-sm shadow-2xl shadow-blue-500/40 dark:opacity-60"></div>

<div class="absolute inset-0 z-20 rounded-3xl bg-gradient-to-br from-blue-500/10 to-purple-500/10 opacity-0 transition-opacity duration-300 group-hover:opacity-100"></div>

<div class="absolute -bottom-6 -left-6 h-12 w-12 rounded-full bg-gradient-to-br from-emerald-500 to-teal-500 opacity-90 backdrop-blur-sm shadow-2xl shadow-emerald-500/40 dark:opacity-70"></div>
      </div>
    </div>
  </div>
</section>

Related Examples

Hero Section
Full width hero section for landing pages

Manon Daniel

4 years ago

15k
Product Page
Showcase for the product.

Prem..

4 years ago

34.7k
Hero section

Mohit Prajapati

4 years ago

12.9k
Hero section with call to action buttons

Prashant

4 years ago

15.9k
Hero section with image

Sophia Baker

3 years ago

14k
Minimalistic hero section

Sophia Baker

3 years ago

12k
Very simple hero

Laurits

3 years ago

9.7k
Hero section with button

Samuel Dawson

3 years ago

13.5k
Hero section with a gradient background
With text overlay, and a call-to-action button

Anonymous

3 years ago

21.2k
SaaS Feature Section
It has a Gradient text headline and CTA buttons

Junclarkaizen Pagu

2 years ago

10.1k
Product Page
Showcase for the product.

muhamadrofii911

2 years ago

3.1k
Chat Box for Marketing
An Onyx component. This chat box is great for SAAS landing pages where you want to mock customer interactions or expectations.

Coastal UI

2 years ago

2.7k