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 198

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

less is more
less is more by salvator

Baraka Salvator

1 year ago

1.6k
login_form
used for user to logging in

nii fanny

1 year ago

1.3k
heroimage
svg and hero image, basic html code

Anonymous

1 year ago

1.6k
Hero

ABDO-SY

1 year ago

2.6k
Hero section with fancy heading

Laurits

4 years ago

12.7k
login
Sign in page on computer screen. Desktop computer with login form and sign in button. User account. Modern concept for web

Augustin

1 year ago

1.5k
Hero Section
Full width hero section for landing pages

Manon Daniel

4 years ago

15k
future ai robot
this an ai template by salvator

Baraka Salvator

1 year ago

1.7k
Smooth Slide-in Animation for Text in Tailwind CSS
Learn how to create a smooth slide-in animation for text using Tailwind CSS. This guide covers defining custom animations in tailwind.config.js and applying them to elements for a modern and engaging UI effect. 🚀

Vikas Kushwah

1 year ago

2.7k
Donate Hero section
Best New tailwindcss,help save the children

ORGIN_DREAMS

1 year ago

1.4k
Hero Banner
visually striking banner section It features pattern background with using SVG

Cosimo Fazio

2 years ago

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