Creative Hero Section

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

Header Hero Animation

Author Ijila Itunu

Tailwind v3.4 2k 7

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

Hero section
Hero section for your project

Prajwal Hallale

4 years ago

9.2k
Full-page header for landing pages
an attention-grabbing header with a strong message and clear calls to action.

Junclarkaizen Pagu

3 years ago

12.2k
Hero

Aman kumar

2 years ago

7.7k
Hero Section
Home hero section search bar

$$@(\/)(\/)¥$ $@(\/)(\/)¥

2 years ago

8.5k
Stars: Sun and Moon Illustrations
I Created Sun and Moon Illustrations with Tailwind CSS, Embracing Light and Dark Modes

$$@(\/)(\/)¥$ $@(\/)(\/)¥

2 years ago

5k
3D Animated Image Gallery
3D Animated Image Gallery

$$@(\/)(\/)¥$ $@(\/)(\/)¥

2 years ago

9.9k
Yoga Coach Hero Section

$$@(\/)(\/)¥$ $@(\/)(\/)¥

2 years ago

6.7k
Portfolio Hero Section 1
visually stunning and captivating hero section component for your portfolio website.

$$@(\/)(\/)¥$ $@(\/)(\/)¥

2 years ago

6.4k
Portfolio Hero Section 2
visually stunning and captivating hero section component for your portfolio website.

$$@(\/)(\/)¥$ $@(\/)(\/)¥

2 years ago

6.2k
Portfolio Hero Section 3
visually stunning and captivating hero section component for your portfolio website.

$$@(\/)(\/)¥$ $@(\/)(\/)¥

2 years ago

9.7k
Tailwind Hero Section
Fully Responsive Hero Section with Navbar

AKASH GANDHAR

2 years ago

5.4k
Tailwind Pricing Section
Fully Responsive Pricing Section

AKASH GANDHAR

2 years ago

2.3k