Home
KULDEEP
Hero Section

Hero Section

Responsive Hero Section for you Project
Background Image: A stunning, high-quality Unsplash photo that creates a unique visual impact.
Overlay: Semi-transparent black overlay with blur effect for readability and a modern aesthetic.
Content Area: Centered with a gradient background overlay for contrast, bold headline, engaging subtext.
Buttons: Vibrant gradient and clean border with smooth hover animations to draw attention.
Responsive Design: Looks great on all screen sizes with adaptable padding and font sizes.

This tailwind example is contributed by KULDEEP, on 20-Jun-2025. Component is made with Tailwind CSS v3. It is responsive. similar terms for this example are CTA,banner

Breadcrumb Call to Action Carousel Hero Other Gradient

Author KULDEEP

1.3k

Fork Fullscreen

<body class="min-h-screen flex items-center justify-center bg-gray-900 font-sans px-4">
  <div class="relative w-full max-w-7xl mx-auto rounded-xl overflow-hidden shadow-2xl">
    
    <div class="absolute inset-0 bg-cover bg-center" style="background-image: url('https://images.unsplash.com/photo-1506744038136-46273834b3fb?ixlib=rb-4.0.3&auto=format&fit=crop&w=1600&q=80');"></div>
    <div class="absolute inset-0 bg-black bg-opacity-40 backdrop-blur-sm"></div>
    
    
    <div class="relative z-10 flex flex-col items-center justify-center text-center px-6 py-24 md:py-32 bg-gradient-to-b from-transparent via-black/50 to-black/80">
      <h1 class="text-4xl md:text-6xl font-extrabold text-white drop-shadow-lg mb-4 tracking-wide leading-tight">
        Unlock Your Creative Potential
      </h1>

<p class="text-lg md:text-xl text-gray-200 mb-8 max-w-2xl mx-auto">
        Dive into innovative designs, seamless user experiences, and cutting-edge technology. Your journey to greatness starts here.
      </p>
      <div class="flex flex-col md:flex-row gap-4">
        <a href="#" class="px-8 py-4 bg-gradient-to-r from-pink-500 via-red-500 to-yellow-500 text-white font-semibold rounded-full shadow-lg transform hover:scale-105 transition duration-300 ease-in-out text-lg">
          Get Started
        </a>
        <a href="#" class="px-8 py-4 border-2 border-white text-white font-semibold rounded-full hover:bg-white hover:text-gray-900 transition duration-300 ease-in-out text-lg">
          Explore More
        </a>
      </div>
    </div>
  </div>
</body>

Related Examples