Back to Discover
Tailwind CSS Landing Page Layout Code

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">
  <!-- Navigation -->
  <nav x-data="{ mobileMenuOpen: false }" class="bg-white shadow-sm sticky top-0 z-50">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
      <div class="flex justify-between items-center h-16">
        <div class="flex items-center space-x-2">
          <ion-icon name="rocket" class="text-3xl text-blue-600"></ion-icon>
          <span class="text-xl font-bold text-gray-900">BrandName</span>
        </div>

        <!-- Desktop Menu -->
        <div class="hidden md:flex items-center space-x-8">
          <a href="#features" class="text-gray-700 hover:text-blue-600 transition">Features</a>
          <a href="#about" class="text-gray-700 hover:text-blue-600 transition">About</a>
          <a href="#pricing" class="text-gray-700 hover:text-blue-600 transition">Pricing</a>
          <a href="#contact" class="text-gray-700 hover:text-blue-600 transition">Contact</a>
          <button class="bg-blue-600 text-white px-6 py-2 rounded-lg hover:bg-blue-700 transition">
            Get Started
          </button>
        </div>

        <!-- Mobile Menu Button -->
        <button @click="mobileMenuOpen = !mobileMenuOpen" class="md:hidden text-gray-700">
          <ion-icon :name="mobileMenuOpen ? 'close' : 'menu'" class="text-2xl"></ion-icon>
        </button>
      </div>

      <!-- Mobile Menu -->
      <div x-show="mobileMenuOpen" x-transition class="md:hidden pb-4">
        <div class="flex flex-col space-y-3">
          <a href="#features" class="text-gray-700 hover:text-blue-600 transition">Features</a>
          <a href="#about" class="text-gray-700 hover:text-blue-600 transition">About</a>
          <a href="#pricing" class="text-gray-700 hover:text-blue-600 transition">Pricing</a>
          <a href="#contact" class="text-gray-700 hover:text-blue-600 transition">Contact</a>
          <button class="bg-blue-600 text-white px-6 py-2 rounded-lg hover:bg-blue-700 transition text-left">
            Get Started
          </button>
        </div>
      </div>
    </div>
  </nav>

  <!-- Hero Section -->
  <section class="bg-gradient-to-br from-blue-50 to-white py-20">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
      <div class="text-center max-w-3xl mx-auto">
        <h1 class="text-5xl md:text-6xl font-bold text-gray-900 mb-6">
          Build Something Amazing Today
        </h1>
        <p class="text-xl text-gray-600 mb-8">
          Transform your ideas into reality with our powerful platform. Simple, fast, and designed for modern teams.
        </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 hover:bg-blue-700 transition font-medium">
            Start Free Trial
          </button>
          <button class="bg-white text-gray-700 px-8 py-3 rounded-lg border-2 border-gray-300 hover:border-blue-600 transition font-medium">
            Watch Demo
          </button>
        </div>
      </div>
    </div>
  </section>

  <!-- Features Section -->
  <section id="features" class="py-20">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
      <div class="text-center mb-16">
        <h2 class="text-4xl font-bold text-gray-900 mb-4">Powerful Features</h2>
        <p class="text-xl text-gray-600">Everything you need to succeed</p>
      </div>

      <div class="grid md:grid-cols-3 gap-8">
        <div class="bg-white p-8 rounded-xl shadow-sm hover:shadow-md transition">
          <div class="bg-blue-100 w-12 h-12 rounded-lg flex items-center justify-center mb-4">
            <ion-icon name="flash" class="text-2xl text-blue-600"></ion-icon>
          </div>
          <h3 class="text-xl font-semibold text-gray-900 mb-3">Lightning Fast</h3>
          <p class="text-gray-600">Optimized performance that delivers results in milliseconds, not seconds.</p>
        </div>

        <div class="bg-white p-8 rounded-xl shadow-sm hover:shadow-md transition">
          <div class="bg-green-100 w-12 h-12 rounded-lg flex items-center justify-center mb-4">
            <ion-icon name="shield-checkmark" class="text-2xl text-green-600"></ion-icon>
          </div>
          <h3 class="text-xl font-semibold text-gray-900 mb-3">Secure by Default</h3>
          <p class="text-gray-600">Enterprise-grade security built into every layer of our platform.</p>
        </div>

        <div class="bg-white p-8 rounded-xl shadow-sm hover:shadow-md transition">
          <div class="bg-purple-100 w-12 h-12 rounded-lg flex items-center justify-center mb-4">
            <ion-icon name="people" class="text-2xl text-purple-600"></ion-icon>
          </div>
          <h3 class="text-xl font-semibold text-gray-900 mb-3">Team Collaboration</h3>
          <p class="text-gray-600">Work together seamlessly with real-time updates and sharing.</p>
        </div>
      </div>
    </div>
  </section>

  <!-- Stats Section -->
  <section class="bg-blue-600 py-20">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
      <div class="grid md:grid-cols-3 gap-8 text-center text-white">
        <div>
          <div class="text-5xl font-bold mb-2">50K+</div>
          <div class="text-blue-100">Active Users</div>
        </div>
        <div>
          <div class="text-5xl font-bold mb-2">99.9%</div>
          <div class="text-blue-100">Uptime</div>
        </div>
        <div>
          <div class="text-5xl font-bold mb-2">4.9/5</div>
          <div class="text-blue-100">User Rating</div>
        </div>
      </div>
    </div>
  </section>

  <!-- CTA Section -->
  <section class="py-20 bg-white">
    <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
      <h2 class="text-4xl font-bold text-gray-900 mb-4">Ready to Get Started?</h2>
      <p class="text-xl text-gray-600 mb-8">
        Join thousands of satisfied customers and transform your workflow today.
      </p>
      <button class="bg-blue-600 text-white px-8 py-3 rounded-lg hover:bg-blue-700 transition font-medium text-lg">
        Start Your Free Trial
      </button>
    </div>
  </section>

  <!-- Footer -->
  <footer class="bg-gray-900 text-gray-300 py-12">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
      <div class="grid md:grid-cols-4 gap-8">
        <div>
          <div class="flex items-center space-x-2 mb-4">
            <ion-icon name="rocket" class="text-2xl text-blue-500"></ion-icon>
            <span class="text-xl font-bold text-white">BrandName</span>
          </div>
          <p class="text-sm">Building the future, one line of code at a time.</p>
        </div>

        <div>
          <h4 class="text-white font-semibold mb-4">Product</h4>
          <ul class="space-y-2 text-sm">
            <li><a href="#" class="hover:text-white transition">Features</a></li>
            <li><a href="#" class="hover:text-white transition">Pricing</a></li>
            <li><a href="#" class="hover:text-white transition">Security</a></li>
          </ul>
        </div>

        <div>
          <h4 class="text-white font-semibold mb-4">Company</h4>
          <ul class="space-y-2 text-sm">
            <li><a href="#" class="hover:text-white transition">About</a></li>
            <li><a href="#" class="hover:text-white transition">Blog</a></li>
            <li><a href="#" class="hover:text-white transition">Careers</a></li>
          </ul>
        </div>

        <div>
          <h4 class="text-white font-semibold mb-4">Connect</h4>
          <div class="flex space-x-4">
            <a href="#" class="hover:text-white transition">
              <ion-icon name="logo-twitter" class="text-2xl"></ion-icon>
            </a>
            <a href="#" class="hover:text-white transition">
              <ion-icon name="logo-linkedin" class="text-2xl"></ion-icon>
            </a>
            <a href="#" class="hover:text-white transition">
              <ion-icon name="logo-github" class="text-2xl"></ion-icon>
            </a>
          </div>
        </div>
      </div>

      <div class="border-t border-gray-800 mt-8 pt-8 text-sm text-center">
        <p>&copy; 2024 BrandName. All rights reserved.</p>
      </div>
    </div>
  </footer>
Comments (0)

No comments yet. Be the first!