Hero Section

Modern Gradient Color Scheme - Uses a professional purple-to-teal gradient for visual appeal

Animated Elements:

Floating decorative circles with subtle animation

Fade-in effect for the main illustration

Pulsing status indicator

Engaging Typography:

Gradient text for key phrases

Responsive font sizing

Clean Poppins font family

Social Proof Elements:

Client avatars

Star ratings

Trust indicators ("Trusted by 500+ businesses")

Call-to-Action Buttons:

Primary gradient button

Secondary outlined button

Hover effects and transitions

Visual Hierarchy:

Clear headline with emphasis on transformation

Supporting subheading

Balanced layout with image

Performance Indicators:

ROI badge

Growth metric badge

Responsive Design:

Works on mobile and desktop

Grid layout that adapts to screen size

This tailwind example is contributed by KULDEEP, on 04-Jul-2025. Component is made with Tailwind v3.4. It is responsive.

Hero Other

Author KULDEEP

Tailwind v3.4 1.4k 3

Fork Fullscreen

<section class="relative overflow-hidden font-poppins bg-light text-dark mb-10">
  
  <div class="absolute inset-0 bg-gradient-to-br from-primary/5 via-light to-secondary/5 -z-10"></div>

<div class="absolute top-20 left-10 w-16 h-16 rounded-full bg-primary/10 animate-float -z-10"></div>
  <div class="absolute top-1/3 right-20 w-24 h-24 rounded-full bg-secondary/10 animate-float-reverse -z-10"></div>
  <div class="absolute bottom-20 left-1/4 w-20 h-20 rounded-full bg-primary/15 animate-float -z-10"></div>
  <div class="absolute bottom-1/3 right-1/4 w-32 h-32 rounded-full bg-secondary/15 animate-float-reverse -z-10"></div>

<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-24 md:py-32">
    <div class="grid grid-cols-1 md:grid-cols-2 gap-12 items-center">
      
      <div class="text-center md:text-left">
        <span class="inline-block px-3 py-1 text-xs font-semibold tracking-wider text-primary uppercase rounded-full bg-primary/10 mb-4">
                        Digital Excellence
                    </span>
        <h1 class="text-4xl sm:text-5xl lg:text-6xl font-bold leading-tight mb-6">
          <span class="text-gradient">Transform</span> Your Brand's
          <span class="text-gradient">Digital Presence</span>
        </h1>
        <p class="text-lg text-gray-600 mb-8 max-w-lg">
          We craft data-driven digital marketing strategies that drive growth, engagement, and measurable results for
          your business.
        </p>
        <div class="flex flex-col sm:flex-row gap-4 justify-center md:justify-start">
          <a href="#"
            class="px-8 py-3.5 rounded-lg btn-gradient text-white font-semibold shadow-lg hover:shadow-xl transition-all duration-300">
            Get Started
          </a>
          <a href="#"
            class="px-8 py-3.5 rounded-lg border-2 border-primary text-primary font-semibold hover:bg-primary/5 transition-all duration-300">
            Learn More
          </a>
        </div>

<div class="mt-12 flex items-center justify-center md:justify-start gap-6">
          <div class="flex -space-x-2">
            <img class="w-10 h-10 rounded-full border-2 border-white" src="https://randomuser.me/api/portraits/women/12.jpg" alt="Client">
            <img class="w-10 h-10 rounded-full border-2 border-white" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Client">
            <img class="w-10 h-10 rounded-full border-2 border-white" src="https://randomuser.me/api/portraits/women/45.jpg" alt="Client">
          </div>
          <div>
            <div class="flex items-center">
              <svg class="w-5 h-5 text-yellow-400" fill="currentColor" viewBox="0 0 20 20">
                <path
                  d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z">
                </path>
              </svg>
              <svg class="w-5 h-5 text-yellow-400" fill="currentColor" viewBox="0 0 20 20">
                <path
                  d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z">
                </path>
              </svg>
              <svg class="w-5 h-5 text-yellow-400" fill="currentColor" viewBox="0 0 20 20">
                <path
                  d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z">
                </path>
              </svg>
              <svg class="w-5 h-5 text-yellow-400" fill="currentColor" viewBox="0 0 20 20">
                <path
                  d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z">
                </path>
              </svg>
              <svg class="w-5 h-5 text-yellow-400" fill="currentColor" viewBox="0 0 20 20">
                <path
                  d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z">
                </path>
              </svg>
            </div>
            <p class="text-sm text-gray-600">Trusted by 500+ businesses worldwide</p>
          </div>
        </div>
      </div>

<div class="relative animate__animated animate__fadeIn">
        <div class="relative max-w-md mx-auto">
          <div class="absolute -top-10 -left-10 w-32 h-32 bg-primary/10 rounded-2xl -z-10 animate-float"></div>
          <div class="absolute -bottom-10 -right-10 w-32 h-32 bg-secondary/10 rounded-2xl -z-10 animate-float-reverse">
          </div>
          <img class="relative rounded-xl shadow-2xl border-8 border-white" src="https://images.unsplash.com/photo-1551288049-bebda4e38f71?ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&q=80" alt="Digital Marketing">
        </div>
        <div class="absolute -bottom-8 left-1/4 bg-white px-4 py-2 rounded-lg shadow-md flex items-center">
          <div class="w-3 h-3 bg-green-500 rounded-full mr-2 animate-pulse"></div>
          <span class="text-sm font-medium">+85% ROI</span>
        </div>
        <div class="absolute -top-8 right-1/4 bg-white px-4 py-2 rounded-lg shadow-md">
          <span class="text-sm font-medium">📈 3x Growth</span>
        </div>
      </div>
    </div>
  </div>
</section>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" />
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<script>
  tailwind.config = {
            theme: {
                extend: {
                    fontFamily: {
                        poppins: ['Poppins', 'sans-serif'],
                    },
                    colors: {
                        primary: '#4f46e5',
                        secondary: '#10b981',
                        dark: '#1e293b',
                        light: '#f8fafc',
                    },
                    animation: {
                        'float': 'float 6s ease-in-out infinite',
                        'float-reverse': 'float-reverse 5s ease-in-out infinite',
                    },
                    keyframes: {
                        float: {
                            '0%, 100%': { transform: 'translateY(0)' },
                            '50%': { transform: 'translateY(-20px)' },
                        },
                        'float-reverse': {
                            '0%, 100%': { transform: 'translateY(0)' },
                            '50%': { transform: 'translateY(20px)' },
                        }
                    }
                }
            }
        }
</script>
<style type="text/tailwindcss">
  @layer utilities {
            .text-gradient {
                @apply bg-clip-text text-transparent bg-gradient-to-r from-primary to-secondary;
            }
            .btn-gradient {
                @apply bg-gradient-to-r from-primary to-secondary hover:from-primary/90 hover:to-secondary/90;
            }
        }
    </style>

Related Examples

Background image section

Marc

2 years ago

7.4k
Simple Hero Section
Hero Section using Tailwind

Ahita Bisma Adlula

1 year ago

1.9k
Modern Responsive Footer with Tailwind CSS
This sleek and modern responsive footer is built using HTML and Tailwind CSS. It features three sections: brand information, useful links, and social media icons. The footer includes smooth hover effects, subtle fade-in animations, and a fully responsive design that adapts seamlessly to different screen sizes. Perfect for websites looking for a professional and stylish footer section.

Ayyamperumal S

1 year ago

2.7k
DailyDev Card
Card -based card used in the Dailydev Card, this is created to be modified to taste of each user

Ameth Galarcio

1 year ago

2.4k
Animated bento box.
A Coastal UI component (coastalui.com). This can be used as part of a bento box, great for showing connectivity between context, could be used beyond just showing tech stacks.

Coastal UI

1 year ago

2.2k
Hero Section with Tailwind CSS With Buttons
A modern, responsive Hero Section designed with Tailwind CSS to capture attention and drive engagement. Featuring a bold heading, compelling CTA buttons, and a high-quality image, this design enhances user experience and conversions. Ideal for landing pages, portfolios, and business websites, ensuring a strong first impression and higher interaction rates.

Abdul Baset Bappy

1 year ago

1.4k
Responsive Hero Section with Typewriter Effect
A modern hero section featuring a typewriter animation effect, social media links, and responsive design. Includes a user avatar placeholder and a clean dark gradient background. Built with Tailwind CSS and Font Awesome icons. Perfect for personal portfolio websites.

Muhammad Umair Arshad

1 year ago

1.4k
Clean AI Chat UI with Tailwind CSS – ChatGPT-Style Interface
A polished and responsive AI chat interface built using modern Web Components and Tailwind CSS. This UI replicates the smooth, minimal experience of ChatGPT with a clean layout, floating input bar, animated scrollable message feed, and mock AI responses. Ideal for SaaS dashboards, AI assistants, or frontend prototypes. Designed with professional spacing, accessible colors, and reusable components. Key features: Responsive layout with mobile support Floating input bar with auto-expanding textarea Tailwind-powered message bubbles with clear sender roles Modern dark theme with subtle gradients and shadows Easily extendable to real AI APIs (e.g., OpenAI)

Ayyamperumal S

1 year ago

2.9k
3d Box
Let's build a 3d world empowered by Orgin Dreams.these are 3d objects

ORGIN_DREAMS

1 year ago

1.8k
Hero

ORGIN_DREAMS

1 year ago

2.2k
Life Tree
by salvator

Baraka Salvator

1 year ago

1.3k
coffee
a beverage brewed from the roasted and ground seeds of the tropical evergreen coffee plant. Coffee is one of the three most popular beverages in the world (alongside water and tea), and it is one of the most profitable international commodities

Augustin

1 year ago

1.5k