Home
Ijila Itunu
Creative Hero Section

Creative Hero Section

This tailwind example is contributed by Ijila Itunu, on 29-Apr-2025. Component is made with Tailwind CSS v3. It is responsive. similar terms for this example is Transitions

Header Hero Animation

Author Ijila Itunu

1.4k

Fork Fullscreen

<div class="relative overflow-hidden bg-gradient-to-br from-purple-600 via-pink-500 to-orange-400">
    
    <div class="absolute inset-0 bg-black bg-opacity-5">
      <div class="absolute inset-0 bg-funky-pattern"></div>
    </div>

<div class="absolute top-[10%] left-[5%] transform rotate-12 animate-pulse-slow">
      <svg class="w-6 h-6 text-yellow-300" fill="currentColor" viewBox="0 0 24 24">
        <path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z"></path>
      </svg>
    </div>
    <div class="absolute top-[80%] left-[15%] transform -rotate-12 animate-pulse-slow">
      <svg class="w-6 h-6 text-purple-300" fill="currentColor" viewBox="0 0 24 24">
        <path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"></path>
      </svg>
    </div>
    <div class="absolute top-[20%] left-[90%] transform rotate-45 animate-pulse-slow">
      <svg class="w-6 h-6 text-yellow-300" fill="currentColor" viewBox="0 0 24 24">
        <path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z"></path>
      </svg>
    </div>
    <div class="absolute top-[70%] left-[80%] transform -rotate-45 animate-pulse-slow">
      <svg class="w-6 h-6 text-purple-300" fill="currentColor" viewBox="0 0 24 24">
        <path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"></path>
      </svg>
    </div>

<div class="relative min-h-screen flex items-center justify-center px-4 py-16 md:py-24">
      <div class="max-w-6xl w-full mx-auto grid grid-cols-1 md:grid-cols-2 gap-8 items-center">
        
        
        <div class="text-center md:text-left space-y-6 z-10">
          <div class="inline-block mb-4">
            <div class="flex items-center gap-2 bg-white bg-opacity-20 backdrop-blur-sm rounded-full px-4 py-2 text-white font-medium">
              <svg class="w-4 h-4 text-yellow-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 3v4M3 5h4M6 17v4m-2-2h4m5-16l2.286 6.857L21 12l-5.714 2.143L13 21l-2.286-6.857L5 12l5.714-2.143L13 3z"></path>
              </svg>
              <span>Something awesome is coming</span>
            </div>
          </div>
          
          <h1 class="text-4xl md:text-6xl font-bold text-white leading-tight">
            <span class="bg-clip-text text-transparent bg-gradient-to-r from-white to-purple-200">
              Unlock Your
            </span>
            <br />
            <span class="inline-block bg-clip-text text-transparent bg-gradient-to-r from-yellow-300 to-pink-300 animate-float">
              Creative Superpower
            </span>
          </h1>
          
          <p class="text-lg md:text-xl text-white text-opacity-90">
            Break through the ordinary with our extraordinary platform that empowers your wildest ideas.
          </p>
          
          <div class="flex flex-col sm:flex-row gap-4 justify-center md:justify-start pt-4">
            <button class="group px-8 py-3 bg-white rounded-full font-medium text-purple-700 hover:bg-opacity-90 transform transition-all duration-300 hover:scale-105 shadow-lg hover:shadow-xl">
              <span class="relative z-10">Get Started Now</span>
            </button>
            
            <button class="group px-8 py-3 border-2 border-white border-opacity-50 rounded-full font-medium text-white hover:bg-white hover:bg-opacity-10 transition-all duration-300">
              <span class="flex items-center justify-center gap-2">
                <span>Watch Demo</span>
                <svg class="w-4 h-4 text-white group-hover:animate-ping" fill="currentColor" viewBox="0 0 24 24">
                  <circle cx="12" cy="12" r="10"></circle>
                </svg>
              </span>  
            </button>
          </div>
        </div>
        
        
        <div class="relative h-64 md:h-full flex items-center justify-center">
          
          <div class="absolute w-64 h-64 md:w-80 md:h-80 bg-gradient-to-br from-pink-500 to-purple-600 rounded-full animate-pulse-slow"></div>
          
          
          <div class="absolute w-64 h-64 md:w-80 md:h-80 border-4 border-white border-opacity-20 rounded-full transform rotate-45 animate-spin-slow"></div>
          
          
          <div class="absolute w-32 h-32 md:w-40 md:h-40 bg-gradient-to-br from-yellow-400 to-orange-500 rounded-full animate-float"></div>
          
          
          <div class="absolute w-16 h-16 bg-gradient-to-br from-blue-400 to-teal-300 rounded-full top-1/4 right-1/4 animate-float-delay"></div>
        </div>
      </div>
    </div>

<div class="absolute bottom-0 left-0 w-full overflow-hidden">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none" class="w-full h-16 md:h-24">
        <path fill="rgba(255, 255, 255, 0.1)" d="M321.39,56.44c58-10.79,114.16-30.13,172-41.86,82.39-16.72,168.19-17.73,250.45-.39C823.78,31,906.67,72,985.66,92.83c70.05,18.48,146.53,26.09,214.34,3V120H0V92.83C0,92.83,260.94,84.31,321.39,56.44Z"></path>
      </svg>
    </div>
  </div>

Related Examples

yvette
vibes kbx

Author:
Umutoniwase Yvette

8 months ago

648
Hero Section Fashion Page

Author:
ABDO-SY

10 months ago

1k
modern portifolio
by salvator

Author:
Baraka Salvator

8 months ago

791
Hero Section
Full width hero section for landing pages

Author:
Manon Daniel

3 years ago

13.9k
Hero section for website

Author:
Leon Bachmann

3 years ago

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

Author:
Anonymous

2 years ago

20.2k
Responsive Tailwind CSS Header with Navigation & Buttons | Ready to Use
A fully responsive and modern header built with Tailwind CSS. Features a sleek navigation menu, login/register buttons, and adaptive design for all screen sizes. Open-source and easy to integrate into any web project!

Author:
Abdul Baset Bappy

10 months ago

2.1k
Animated Title
App Logo or Main Title

Author:
khalidrootdevs

2 years ago

7.1k
DevPort
modern portifolio by salvator

Author:
Baraka Salvator

8 months ago

1.2k
Animasyonlu Arama Textbox Widget
Üzerine gelince animasyonlu olarak açılan textbox.

Author:
Sedat Kumcu

1 year ago

2k
Spinner
The Spinner is a simple and visually appealing component that indicates ongoing processes like loading or data fetching. It's a great way to improve user engagement and reduce frustration during wait times. Different styles and animations (circular, dots, pulsating). Customizable size, color, and speed. Easy to integrate with loading states in any app. Lightweight and responsive.

Author:
Abhiraj

1 year ago

2.1k
Elevated Buton
On hover merge shadow

Author:
Anonymous

1 year ago

2.4k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components