Back to Discover
Tailwind CSS Startup Homepage Template

Amelia
Created Nov 03, 2025
164 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-white text-gray-900">
  <!-- Navigation -->
  <nav class="fixed w-full bg-white/90 backdrop-blur-sm z-50 border-b border-gray-100" x-data="{ mobileMenu: false }">
    <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-2xl text-blue-600"></ion-icon>
          <span class="text-xl font-bold">StartupCo</span>
        </div>

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

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

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

  <!-- Hero Section -->
  <section class="pt-32 pb-20 px-4 sm:px-6 lg:px-8">
    <div class="max-w-7xl mx-auto text-center">
      <h1 class="text-5xl md:text-6xl font-bold mb-6 leading-tight">
        Build Something<br/>
        <span class="text-blue-600">Amazing Today</span>
      </h1>
      <p class="text-xl text-gray-600 mb-8 max-w-2xl mx-auto">
        The ultimate platform to transform your ideas into reality. Fast, reliable, and built for modern teams.
      </p>
      <div class="flex flex-col sm:flex-row gap-4 justify-center">
        <button class="px-8 py-4 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition text-lg font-medium">
          Start Free Trial
        </button>
        <button class="px-8 py-4 border-2 border-gray-300 rounded-lg hover:border-gray-400 transition text-lg font-medium">
          Watch Demo
        </button>
      </div>
    </div>
  </section>

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

      <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="w-12 h-12 bg-blue-100 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 mb-3">Lightning Fast</h3>
          <p class="text-gray-600">Optimized performance that delivers results in milliseconds, not minutes.</p>
        </div>

        <div class="bg-white p-8 rounded-xl shadow-sm hover:shadow-md transition">
          <div class="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center mb-4">
            <ion-icon name="shield-checkmark" class="text-2xl text-blue-600"></ion-icon>
          </div>
          <h3 class="text-xl font-semibold mb-3">Secure by Default</h3>
          <p class="text-gray-600">Enterprise-grade security to keep your data safe and protected.</p>
        </div>

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

        <div class="bg-white p-8 rounded-xl shadow-sm hover:shadow-md transition">
          <div class="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center mb-4">
            <ion-icon name="analytics" class="text-2xl text-blue-600"></ion-icon>
          </div>
          <h3 class="text-xl font-semibold mb-3">Advanced Analytics</h3>
          <p class="text-gray-600">Get insights that matter with detailed analytics and reporting.</p>
        </div>

        <div class="bg-white p-8 rounded-xl shadow-sm hover:shadow-md transition">
          <div class="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center mb-4">
            <ion-icon name="code-slash" class="text-2xl text-blue-600"></ion-icon>
          </div>
          <h3 class="text-xl font-semibold mb-3">Developer Friendly</h3>
          <p class="text-gray-600">Clean APIs and comprehensive documentation for easy integration.</p>
        </div>

        <div class="bg-white p-8 rounded-xl shadow-sm hover:shadow-md transition">
          <div class="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center mb-4">
            <ion-icon name="sync" class="text-2xl text-blue-600"></ion-icon>
          </div>
          <h3 class="text-xl font-semibold mb-3">Auto-Sync</h3>
          <p class="text-gray-600">Your data is always up-to-date across all your devices.</p>
        </div>
      </div>
    </div>
  </section>

  <!-- Pricing Section -->
  <section id="pricing" class="py-20 px-4 sm:px-6 lg:px-8">
    <div class="max-w-7xl mx-auto">
      <h2 class="text-4xl font-bold text-center mb-4">Simple Pricing</h2>
      <p class="text-gray-600 text-center mb-16 max-w-2xl mx-auto">Choose the plan that fits your needs</p>

      <div class="grid md:grid-cols-3 gap-8">
        <div class="border-2 border-gray-200 rounded-xl p-8 hover:border-blue-600 transition">
          <h3 class="text-2xl font-bold mb-2">Starter</h3>
          <p class="text-gray-600 mb-6">Perfect for individuals</p>
          <div class="mb-6">
            <span class="text-4xl font-bold">$9</span>
            <span class="text-gray-600">/month</span>
          </div>
          <ul class="space-y-3 mb-8">
            <li class="flex items-center">
              <ion-icon name="checkmark-circle" class="text-green-500 mr-2"></ion-icon>
              <span>5 Projects</span>
            </li>
            <li class="flex items-center">
              <ion-icon name="checkmark-circle" class="text-green-500 mr-2"></ion-icon>
              <span>10GB Storage</span>
            </li>
            <li class="flex items-center">
              <ion-icon name="checkmark-circle" class="text-green-500 mr-2"></ion-icon>
              <span>Basic Support</span>
            </li>
          </ul>
          <button class="w-full py-3 border-2 border-gray-300 rounded-lg hover:border-gray-400 transition font-medium">
            Get Started
          </button>
        </div>

        <div class="border-2 border-blue-600 rounded-xl p-8 relative shadow-lg">
          <div class="absolute -top-4 left-1/2 transform -translate-x-1/2 bg-blue-600 text-white px-4 py-1 rounded-full text-sm">
            Popular
          </div>
          <h3 class="text-2xl font-bold mb-2">Pro</h3>
          <p class="text-gray-600 mb-6">For growing teams</p>
          <div class="mb-6">
            <span class="text-4xl font-bold">$29</span>
            <span class="text-gray-600">/month</span>
          </div>
          <ul class="space-y-3 mb-8">
            <li class="flex items-center">
              <ion-icon name="checkmark-circle" class="text-green-500 mr-2"></ion-icon>
              <span>Unlimited Projects</span>
            </li>
            <li class="flex items-center">
              <ion-icon name="checkmark-circle" class="text-green-500 mr-2"></ion-icon>
              <span>100GB Storage</span>
            </li>
            <li class="flex items-center">
              <ion-icon name="checkmark-circle" class="text-green-500 mr-2"></ion-icon>
              <span>Priority Support</span>
            </li>
            <li class="flex items-center">
              <ion-icon name="checkmark-circle" class="text-green-500 mr-2"></ion-icon>
              <span>Advanced Analytics</span>
            </li>
          </ul>
          <button class="w-full py-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition font-medium">
            Get Started
          </button>
        </div>

        <div class="border-2 border-gray-200 rounded-xl p-8 hover:border-blue-600 transition">
          <h3 class="text-2xl font-bold mb-2">Enterprise</h3>
          <p class="text-gray-600 mb-6">For large organizations</p>
          <div class="mb-6">
            <span class="text-4xl font-bold">$99</span>
            <span class="text-gray-600">/month</span>
          </div>
          <ul class="space-y-3 mb-8">
            <li class="flex items-center">
              <ion-icon name="checkmark-circle" class="text-green-500 mr-2"></ion-icon>
              <span>Unlimited Everything</span>
            </li>
            <li class="flex items-center">
              <ion-icon name="checkmark-circle" class="text-green-500 mr-2"></ion-icon>
              <span>Unlimited Storage</span>
            </li>
            <li class="flex items-center">
              <ion-icon name="checkmark-circle" class="text-green-500 mr-2"></ion-icon>
              <span>24/7 Support</span>
            </li>
            <li class="flex items-center">
              <ion-icon name="checkmark-circle" class="text-green-500 mr-2"></ion-icon>
              <span>Custom Integration</span>
            </li>
          </ul>
          <button class="w-full py-3 border-2 border-gray-300 rounded-lg hover:border-gray-400 transition font-medium">
            Contact Sales
          </button>
        </div>
      </div>
    </div>
  </section>

  <!-- CTA Section -->
  <section class="py-20 bg-blue-600 text-white px-4 sm:px-6 lg:px-8">
    <div class="max-w-4xl mx-auto text-center">
      <h2 class="text-4xl font-bold mb-6">Ready to Get Started?</h2>
      <p class="text-xl mb-8 text-blue-100">Join thousands of teams already building with StartupCo</p>
      <button class="px-8 py-4 bg-white text-blue-600 rounded-lg hover:bg-gray-100 transition text-lg font-medium">
        Start Your Free Trial
      </button>
    </div>
  </section>

  <!-- Footer -->
  <footer class="bg-gray-900 text-gray-400 py-12 px-4 sm:px-6 lg:px-8">
    <div class="max-w-7xl mx-auto">
      <div class="grid md:grid-cols-4 gap-8 mb-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">StartupCo</span>
          </div>
          <p class="text-sm">Building the future, one project 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">Features</a></li>
            <li><a href="#" class="hover:text-white">Pricing</a></li>
            <li><a href="#" class="hover:text-white">Security</a></li>
            <li><a href="#" class="hover:text-white">Roadmap</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">About</a></li>
            <li><a href="#" class="hover:text-white">Blog</a></li>
            <li><a href="#" class="hover:text-white">Careers</a></li>
            <li><a href="#" class="hover:text-white">Contact</a></li>
          </ul>
        </div>
        <div>
          <h4 class="text-white font-semibold mb-4">Legal</h4>
          <ul class="space-y-2 text-sm">
            <li><a href="#" class="hover:text-white">Privacy</a></li>
            <li><a href="#" class="hover:text-white">Terms</a></li>
            <li><a href="#" class="hover:text-white">Cookie Policy</a></li>
            <li><a href="#" class="hover:text-white">Licenses</a></li>
          </ul>
        </div>
      </div>
      <div class="border-t border-gray-800 pt-8 flex flex-col md:flex-row justify-between items-center">
        <p class="text-sm">&copy; 2024 StartupCo. All rights reserved.</p>
        <div class="flex space-x-6 mt-4 md:mt-0">
          <a href="#" class="hover:text-white"><ion-icon name="logo-twitter" class="text-xl"></ion-icon></a>
          <a href="#" class="hover:text-white"><ion-icon name="logo-github" class="text-xl"></ion-icon></a>
          <a href="#" class="hover:text-white"><ion-icon name="logo-linkedin" class="text-xl"></ion-icon></a>
        </div>
      </div>
    </div>
  </footer>