Tailwind CSS Startup Homepage Template
Amelia
Created Nov 03, 2025
<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">© 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>
Comments (0)
Login to leave a comment
Login
No comments yet. Be the first!