Back to Discover
Tailwind CSS Hero Section Examples

Amelia
Created Nov 03, 2025
0 views
0 likes
0 comments
0 forks
Export Fork Like
<script src="https://cdn.tailwindcss.com"></script>
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
<script type="module" src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"></script>

<body class="bg-gray-50">
  <!-- Hero Section 1: Centered with CTA -->
  <section class="bg-white min-h-screen flex items-center">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20">
      <div class="text-center">
        <h1 class="text-5xl md:text-6xl font-bold text-gray-900 mb-6">
          Build Something Amazing
        </h1>
        <p class="text-xl text-gray-600 mb-8 max-w-2xl mx-auto">
          Create beautiful, responsive websites with modern tools and frameworks. Start your journey today.
        </p>
        <div class="flex flex-col sm:flex-row gap-4 justify-center">
          <button class="bg-blue-600 text-white px-8 py-3 rounded-lg font-medium hover:bg-blue-700 transition flex items-center justify-center gap-2">
            Get Started
            <ion-icon name="arrow-forward-outline"></ion-icon>
          </button>
          <button class="border border-gray-300 text-gray-700 px-8 py-3 rounded-lg font-medium hover:bg-gray-50 transition flex items-center justify-center gap-2">
            <ion-icon name="play-outline"></ion-icon>
            Watch Demo
          </button>
        </div>
      </div>
    </div>
  </section>

  <!-- Hero Section 2: Left-aligned with Image -->
  <section class="bg-gray-900 text-white min-h-screen flex items-center">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20">
      <div class="grid md:grid-cols-2 gap-12 items-center">
        <div>
          <div class="inline-flex items-center gap-2 bg-blue-600 text-white px-4 py-2 rounded-full text-sm mb-6">
            <ion-icon name="sparkles-outline"></ion-icon>
            <span>New Feature Available</span>
          </div>
          <h1 class="text-4xl md:text-5xl font-bold mb-6">
            Modern Web Development Made Simple
          </h1>
          <p class="text-xl text-gray-300 mb-8">
            Ship faster with our powerful tools and pre-built components. Focus on what matters most.
          </p>
          <div class="flex items-center gap-4">
            <button class="bg-white text-gray-900 px-8 py-3 rounded-lg font-medium hover:bg-gray-100 transition">
              Start Free Trial
            </button>
            <button class="text-white flex items-center gap-2 hover:text-gray-300 transition">
              Learn More
              <ion-icon name="chevron-forward-outline"></ion-icon>
            </button>
          </div>
          <div class="flex items-center gap-8 mt-12 text-sm text-gray-400">
            <div class="flex items-center gap-2">
              <ion-icon name="checkmark-circle" class="text-green-500 text-xl"></ion-icon>
              <span>No credit card required</span>
            </div>
            <div class="flex items-center gap-2">
              <ion-icon name="checkmark-circle" class="text-green-500 text-xl"></ion-icon>
              <span>14-day free trial</span>
            </div>
          </div>
        </div>
        <div class="relative">
          <div class="bg-gradient-to-br from-blue-500 to-purple-600 rounded-2xl aspect-square flex items-center justify-center">
            <ion-icon name="code-slash-outline" class="text-white" style="font-size: 120px;"></ion-icon>
          </div>
        </div>
      </div>
    </div>
  </section>

  <!-- Hero Section 3: With Stats and Alpine.js Counter -->
  <section class="bg-gradient-to-br from-blue-50 to-indigo-100 min-h-screen flex items-center" x-data="{ 
                                                                                                       stats: [
                                                                                                       { label: 'Active Users', value: 0, target: 50000, suffix: '+' },
                                                                                                       { label: 'Projects Built', value: 0, target: 10000, suffix: '+' },
                                                                                                       { label: 'Countries', value: 0, target: 120, suffix: '+' }
                                                                                                       ],
                                                                                                       animateStats() {
                                                                                                       this.stats.forEach((stat, index) => {
                                                                                                       const duration = 2000;
                                                                                                       const steps = 60;
                                                                                                       const increment = stat.target / steps;
                                                                                                       let current = 0;

                                                                                                       const timer = setInterval(() => {
                                                                                                       current += increment;
                                                                                                       if (current >= stat.target) {
                                                                                                       this.stats[index].value = stat.target;
                                                                                                       clearInterval(timer);
                                                                                                       } else {
                                                                                                       this.stats[index].value = Math.floor(current);
                                                                                                       }
                                                                                                       }, duration / steps);
                                                                                                       });
                                                                                                       }
                                                                                                       }" x-init="animateStats()">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20">
      <div class="text-center">
        <h1 class="text-5xl md:text-6xl font-bold text-gray-900 mb-6">
          Trusted by Developers Worldwide
        </h1>
        <p class="text-xl text-gray-600 mb-12 max-w-3xl mx-auto">
          Join thousands of developers building exceptional products with our platform
        </p>

        <div class="grid grid-cols-1 md:grid-cols-3 gap-8 mb-12">
          <template x-for="(stat, index) in stats" :key="index">
            <div class="bg-white rounded-xl p-8 shadow-sm">
              <div class="text-4xl font-bold text-blue-600 mb-2">
                <span x-text="stat.value.toLocaleString()"></span><span x-text="stat.suffix"></span>
              </div>
              <div class="text-gray-600" x-text="stat.label"></div>
            </div>
          </template>
        </div>

        <button class="bg-blue-600 text-white px-8 py-3 rounded-lg font-medium hover:bg-blue-700 transition inline-flex items-center gap-2">
          <ion-icon name="rocket-outline"></ion-icon>
          Get Started Now
        </button>
      </div>
    </div>
  </section>

  <!-- Hero Section 4: Minimal with Search -->
  <section class="bg-white min-h-screen flex items-center">
    <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-20 text-center">
      <div class="inline-flex items-center justify-center w-16 h-16 bg-blue-100 rounded-full mb-6">
        <ion-icon name="search-outline" class="text-blue-600 text-2xl"></ion-icon>
      </div>
      <h1 class="text-5xl md:text-6xl font-bold text-gray-900 mb-6">
        Find What You Need
      </h1>
      <p class="text-xl text-gray-600 mb-8">
        Search through millions of resources and documentation
      </p>
      <div class="relative max-w-2xl mx-auto">
        <div class="relative">
          <ion-icon name="search-outline" class="absolute left-4 top-1/2 -translate-y-1/2 text-gray-400 text-xl"></ion-icon>
          <input 
                 type="text" 
                 placeholder="Search for anything..." 
                 class="w-full pl-12 pr-4 py-4 rounded-lg border border-gray-300 focus:border-blue-500 focus:ring-2 focus:ring-blue-200 outline-none text-lg"
                 />
        </div>
      </div>
      <div class="flex flex-wrap items-center justify-center gap-3 mt-6 text-sm text-gray-500">
        <span>Popular:</span>
        <button class="px-3 py-1 bg-gray-100 rounded-full hover:bg-gray-200 transition">Documentation</button>
        <button class="px-3 py-1 bg-gray-100 rounded-full hover:bg-gray-200 transition">Tutorials</button>
        <button class="px-3 py-1 bg-gray-100 rounded-full hover:bg-gray-200 transition">Components</button>
      </div>
    </div>
  </section>
Comments (0)

No comments yet. Be the first!