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 2.1k 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

Fireflies
Fireflies in the night sky. Based on anonymous/background-animation-2

Nick Girga

1 year ago

2k
Markert shop
wellcome tothe my online shoping

Umutoniwase Yvette

1 year ago

1.2k
PortfoClean & Colorful Hero Section for Developer Portfolios (Tailwind CSS + Dark Mode)

SAI BENDE

1 year ago

1.6k
Hero section responsive

Samuel Dawson

3 years ago

15.8k
Simple Btn animation

Ranit Saha

1 year ago

2.3k
Active Beauty Main Page

Maxim

1 year ago

1.9k
Hero block with image

Simon Scheffer

3 years ago

15.9k
Brutalist Hero

threehymns

1 year ago

3k
background animation
background animation

Anonymous

11 months ago

706
The Free AI Tools Grid Section (210+ Tools, No Signup)
A responsive and SEO-optimized grid section showcasing over 210 free AI tools. Designed with Tailwind CSS, fully responsive, fast-loading, and built for high user engagement. No sign-up required, privacy-friendly, and optimized for performance and discoverability.https://www.thefreeaitools.com/

Achraf Testq

6 months ago

633
New Collection
A "New Collection" in fashion refers to a series of new garments and accessories designed and released by a designer or brand for a specific season (e.g., Spring/Summer, Fall/Winter). It's a carefully curated selection of items that typically share a common theme, style, or inspiration, reflecting the brand's identity and target audienc

nii fanny

1 year ago

1.5k
Managing Finance Hero
Create a modern and responsive Hero Section using TailwindCSS. This section features a bold headline, a subheading, and a call-to-action button, designed to grab user attention instantly. With a clean layout, engaging typography, and a visually appealing background, this hero section enhances the first impression of your website. Ideal for landing pages, e-commerce, and SaaS platforms, it ensures a seamless experience across all devices.

SHARIFUL ISLAM

1 year ago

1.9k