Home
Homayoun
Responsive Hero Section

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 CSS v3. It is responsive. It supports dark mode. similar terms for this example are CTA,banner

Call to Action Hero

Author Homayoun

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