Hero Section

This tailwind example is contributed by Muzammil Riaz, on 13-Jul-2026. Component is made with Tailwind v3.4. It is responsive.

Hero

Author Muzammil Riaz

Tailwind v3.4 194

Fork Fullscreen

<section class="relative overflow-hidden bg-gradient-to-br from-indigo-50 via-purple-50 to-pink-50 rounded-2xl p-8 md:p-12 lg:p-16">
  
  <div class="absolute top-0 right-0 w-64 h-64 bg-gradient-to-br from-indigo-300/20 to-purple-300/20 rounded-full blur-3xl -mr-32 -mt-32"></div>
  <div class="absolute bottom-0 left-0 w-96 h-96 bg-gradient-to-tr from-pink-300/20 to-purple-300/20 rounded-full blur-3xl -ml-48 -mb-48"></div>
  <div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-96 h-96 bg-indigo-200/10 rounded-full blur-3xl"></div>

<h1 class="text-4xl md:text-5xl lg:text-6xl font-bold leading-tight">
        <span class="text-gray-800">Build the future</span>
        <br />
        <span class="bg-gradient-to-r from-indigo-600 via-purple-600 to-pink-600 bg-clip-text text-transparent">
          with Nexus
        </span>
      </h1>

<p class="text-base md:text-lg text-gray-600 leading-relaxed max-w-xl mx-auto lg:mx-0">
        Enterprise-grade platform that empowers teams to build, deploy, and scale
        applications faster than ever before. Trusted by 10,000+ companies worldwide.
      </p>

<div class="flex flex-col sm:flex-row items-center justify-center lg:justify-start gap-4 pt-2">
        <a
          href="#"
          class="w-full sm:w-auto px-8 py-3.5 bg-gradient-to-r from-indigo-600 to-purple-600 text-white font-semibold rounded-xl shadow-lg hover:shadow-xl hover:scale-[1.02] transition-all duration-200 flex items-center justify-center space-x-2"
        >
          <span>Get started free</span>
          <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6" />
          </svg>
        </a>
        <a
          href="#"
          class="w-full sm:w-auto px-8 py-3.5 bg-white/80 backdrop-blur-sm border border-gray-200 text-gray-700 font-semibold rounded-xl hover:bg-white hover:shadow-lg transition-all duration-200 flex items-center justify-center space-x-2"
        >
          <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z" />
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
          </svg>
          <span>Watch demo</span>
        </a>
      </div>

<div class="flex flex-col sm:flex-row items-center justify-center lg:justify-start gap-6 pt-4">
        <div class="flex items-center space-x-1">
          <div class="flex -space-x-2">
            <div class="w-8 h-8 rounded-full border-2 border-white bg-gradient-to-br from-blue-400 to-blue-600 flex items-center justify-center text-white text-xs font-bold">JD</div>
            <div class="w-8 h-8 rounded-full border-2 border-white bg-gradient-to-br from-purple-400 to-purple-600 flex items-center justify-center text-white text-xs font-bold">SM</div>
            <div class="w-8 h-8 rounded-full border-2 border-white bg-gradient-to-br from-orange-400 to-orange-600 flex items-center justify-center text-white text-xs font-bold">AK</div>
            <div class="w-8 h-8 rounded-full border-2 border-white bg-gradient-to-br from-green-400 to-green-600 flex items-center justify-center text-white text-xs font-bold">+</div>
          </div>
          <span class="text-sm text-gray-600">
            <span class="font-semibold text-gray-800">12,000+</span> developers
          </span>
        </div>
        <div class="flex items-center space-x-2">
          <div class="flex">
            <svg class="w-4 h-4 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" />
            </svg>
            <svg class="w-4 h-4 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" />
            </svg>
            <svg class="w-4 h-4 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" />
            </svg>
            <svg class="w-4 h-4 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" />
            </svg>
            <svg class="w-4 h-4 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" />
            </svg>
          </div>
          <span class="text-sm text-gray-600">
            <span class="font-semibold text-gray-800">4.9</span> / 5.0 (2,400+ reviews)
          </span>
        </div>
      </div>
    </div>

<div class="flex-1 flex justify-center lg:justify-end">
      <div class="relative w-full max-w-md">
        
        <div class="bg-white/80 backdrop-blur-xl rounded-2xl shadow-2xl p-6 border border-white/30">
          
          <div class="space-y-4">
            
            <div class="flex items-center justify-between">
              <div class="flex items-center space-x-3">
                <div class="w-10 h-10 bg-gradient-to-br from-indigo-600 to-purple-600 rounded-xl flex items-center justify-center">
                  <svg class="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
                  </svg>
                </div>
                <div>
                  <p class="text-sm font-semibold text-gray-800">Nexus Platform</p>
                  <p class="text-xs text-gray-400">Live Analytics</p>
                </div>
              </div>
              <span class="text-xs font-medium text-green-600 bg-green-100 px-3 py-1 rounded-full">Active</span>
            </div>

<div class="flex items-end space-x-2 h-32 pt-4">
              <div class="flex-1 bg-gradient-to-t from-indigo-400 to-indigo-500 rounded-lg h-[20%] hover:h-[25%] transition-all duration-300"></div>
              <div class="flex-1 bg-gradient-to-t from-indigo-400 to-indigo-500 rounded-lg h-[45%] hover:h-[50%] transition-all duration-300"></div>
              <div class="flex-1 bg-gradient-to-t from-purple-400 to-purple-500 rounded-lg h-[70%] hover:h-[75%] transition-all duration-300"></div>
              <div class="flex-1 bg-gradient-to-t from-purple-400 to-purple-500 rounded-lg h-[55%] hover:h-[60%] transition-all duration-300"></div>
              <div class="flex-1 bg-gradient-to-t from-indigo-400 to-indigo-500 rounded-lg h-[85%] hover:h-[90%] transition-all duration-300"></div>
              <div class="flex-1 bg-gradient-to-t from-indigo-400 to-indigo-500 rounded-lg h-[60%] hover:h-[65%] transition-all duration-300"></div>
              <div class="flex-1 bg-gradient-to-t from-pink-400 to-pink-500 rounded-lg h-[95%] hover:h-[100%] transition-all duration-300"></div>
              <div class="flex-1 bg-gradient-to-t from-purple-400 to-purple-500 rounded-lg h-[75%] hover:h-[80%] transition-all duration-300"></div>
              <div class="flex-1 bg-gradient-to-t from-indigo-400 to-indigo-500 rounded-lg h-[40%] hover:h-[45%] transition-all duration-300"></div>
              <div class="flex-1 bg-gradient-to-t from-pink-400 to-pink-500 rounded-lg h-[65%] hover:h-[70%] transition-all duration-300"></div>
            </div>

<div class="grid grid-cols-3 gap-3 pt-4 border-t border-gray-100">
              <div class="text-center">
                <p class="text-lg font-bold text-gray-800">$12.4B</p>
                <p class="text-xs text-gray-400">Revenue</p>
              </div>
              <div class="text-center">
                <p class="text-lg font-bold text-gray-800">84.7%</p>
                <p class="text-xs text-gray-400">Growth</p>
              </div>
              <div class="text-center">
                <p class="text-lg font-bold text-gray-800">2.1M</p>
                <p class="text-xs text-gray-400">Users</p>
              </div>
            </div>
          </div>
        </div>

<div class="absolute -top-6 -right-6 bg-white rounded-xl shadow-xl px-4 py-2 border border-gray-100 animate-bounce">
          <div class="flex items-center space-x-2">
            <svg class="w-4 h-4 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
            </svg>
            <span class="text-sm font-semibold text-gray-800">+32% this week</span>
          </div>
        </div>

<div class="absolute -bottom-4 -left-6 bg-white rounded-xl shadow-xl px-4 py-2 border border-gray-100">
          <div class="flex items-center space-x-2">
            <div class="flex -space-x-1">
              <div class="w-6 h-6 rounded-full border-2 border-white bg-blue-400 flex items-center justify-center text-white text-[8px] font-bold">JD</div>
              <div class="w-6 h-6 rounded-full border-2 border-white bg-purple-400 flex items-center justify-center text-white text-[8px] font-bold">SM</div>
            </div>
            <span class="text-xs text-gray-600">12 team members online</span>
          </div>
        </div>
      </div>
    </div>
  </div>

<div class="relative mt-12 pt-8 border-t border-white/30">
    <p class="text-center text-xs font-semibold text-gray-400 uppercase tracking-wider mb-4">
      Trusted by leading companies
    </p>
    <div class="flex flex-wrap items-center justify-center gap-8 md:gap-12">
      <span class="text-gray-400 font-bold text-lg opacity-60 hover:opacity-100 transition-opacity duration-200">Google</span>
      <span class="text-gray-400 font-bold text-lg opacity-60 hover:opacity-100 transition-opacity duration-200">Microsoft</span>
      <span class="text-gray-400 font-bold text-lg opacity-60 hover:opacity-100 transition-opacity duration-200">Amazon</span>
      <span class="text-gray-400 font-bold text-lg opacity-60 hover:opacity-100 transition-opacity duration-200">Netflix</span>
      <span class="text-gray-400 font-bold text-lg opacity-60 hover:opacity-100 transition-opacity duration-200">Spotify</span>
    </div>
  </div>
</section>

Related Examples

Hero Section

Gbenga Adegoke

3 years ago

10.3k
Pro Camera System
The Action Mode on iPhone 15 is a camera feature that provides extreme stabilization for shooting smooth, shake-free videos—ideal for fast movement or handheld filming. 🔍 Key Features: Super Stabilized Videos – Great for running, walking, or action shots. High Quality – Captures in up to 2.8K at 60fps while staying stable. Improved Low-Light Performance – Better than iPhone 14’s version. Automatic Adjustments – Detects motion and adapts accordingly.

ishimwe prince

1 year ago

1.6k
mobil navigation
mobil navigation

Omer fils ELENGA

10 months ago

1.2k
login form php
A login form is a user interface element commonly found on websites and applications. Its main purpose is to authenticate users by asking them to entecredentian

nii fanny

1 year ago

1.6k
NFT Header with Hero

Abdul Baset Bappy

1 year ago

1.9k
booking room or chamber
reflesh, freedom,sleeping,good vibes, etc.........

Uwase Alliance

1 year ago

1.3k
Hero example simply beautiful

Lucas Martinez

3 years ago

15.3k
Food App Web design

Aitrik Saha

1 year ago

2.5k
DevPort
modern portifolio by salvator

Baraka Salvator

1 year ago

1.6k
Zoo management
this a navigation bar and hero section of a zoo management system

ishimwe shadad

1 year ago

1.4k
future ai robot
this an ai template by salvator

Baraka Salvator

1 year ago

1.7k
MovieTrade
"About Us" section you can add to your movie trading website, designed in Tailwind CSS. This section explains your platform’s mission, features, and team (if applicable).

INGRIDE MUZIRANENGE

1 year ago

1.5k