Home
KULDEEP
Hero Section

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 CSS v3. It is responsive.

Hero Other

Author KULDEEP

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

Author:
Marc

1 year ago

5.8k
Simple Hero Section
Hero Section using Tailwind

Author:
Ahita Bisma Adlula

5 months ago

765
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.

Author:
Ayyamperumal S

5 months ago

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

Author:
Ameth Galarcio

5 months ago

1.1k
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.

Author:
Coastal UI

4 months ago

835
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.

Author:
Abdul Baset Bappy

3 months ago

541
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.

Author:
Muhammad Umair Arshad

3 months ago

174
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)

Author:
Ayyamperumal S

2 months ago

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

Author:
ORGIN_DREAMS

1 month ago

202
Hero

Author:
ORGIN_DREAMS

1 month ago

281
Life Tree
by salvator

Author:
Baraka Salvator

1 month ago

191
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

Author:
Augustin

1 month ago

348

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components