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

Responsive 3-Tier Pricing Card Section
A clean and responsive pricing table component featuring three distinct tiers (e.g., Basic, Standard, Premium) presented in a card layout. Built with HTML and Tailwind CSS, it stacks vertically on small screens and transitions to a side-by-side view on medium screens (md breakpoint - 768px) and up. Each plan card includes a placeholder icon, title, description, price details, a call-to-action button, and a bulleted list of features with checkmarks. The generic content makes it easy to adapt for various websites or applications needing a clear pricing comparison structure.

Author:
Hamza Atig

2 months ago

190
Hero Section
Full width hero section for landing pages

Author:
Manon Daniel

2 years ago

13k
htmlcss0

Author:
Anonymous

2 weeks ago

64
About Us Component

Author:
KULDEEP

6 days ago

38
color blur
blur

Author:
BocchiChan

4 months ago

650
Show credit card details

Author:
Manuela Bianka

2 years ago

11.7k
background animation
background animation

Author:
Anonymous

1 year ago

46k
beautifull web page
I create a web page using cloude ai its amazing.

Author:
Akram Khan

1 year ago

2.3k
Hero

Author:
Hasan AlDoy (McDoy)

5 months ago

1.1k
Home
html , css

Author:
Hacker Development

2 months ago

129
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

3 months ago

832
Tailwind Google Map widget

Author:
Dung Vuong

2 weeks ago

44

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components