Home
Homayoun
Free Responsive Hero Section

Free 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,Front page

Call to Action Hero Landing Page

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