File size: 11,728 Bytes
c3ebd85 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tailwind CSS Demo</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
/* Custom CSS if needed */
.custom-bg {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}
.card-hover:hover {
transform: translateY(-5px);
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}
</style>
</head>
<body class="font-sans">
<!-- Navigation -->
<nav class="bg-white shadow-lg">
<div class="max-w-6xl mx-auto px-4">
<div class="flex justify-between">
<div class="flex space-x-7">
<div>
<a href="#" class="flex items-center py-4 px-2">
<i class="fas fa-rocket text-purple-600 text-2xl mr-2"></i>
<span class="font-semibold text-gray-500 text-lg">Tailwind Demo</span>
</a>
</div>
<div class="hidden md:flex items-center space-x-1">
<a href="#" class="py-4 px-2 text-purple-600 border-b-4 border-purple-600 font-semibold">Home</a>
<a href="#" class="py-4 px-2 text-gray-500 font-semibold hover:text-purple-600 transition duration-300">Services</a>
<a href="#" class="py-4 px-2 text-gray-500 font-semibold hover:text-purple-600 transition duration-300">About</a>
<a href="#" class="py-4 px-2 text-gray-500 font-semibold hover:text-purple-600 transition duration-300">Contact</a>
</div>
</div>
<div class="hidden md:flex items-center space-x-3">
<a href="#" class="py-2 px-2 font-medium text-gray-500 rounded hover:bg-purple-600 hover:text-white transition duration-300">Log In</a>
<a href="#" class="py-2 px-2 font-medium text-white bg-purple-600 rounded hover:bg-purple-700 transition duration-300">Sign Up</a>
</div>
<div class="md:hidden flex items-center">
<button class="outline-none mobile-menu-button">
<i class="fas fa-bars text-gray-500 text-xl"></i>
</button>
</div>
</div>
</div>
</nav>
<!-- Hero Section -->
<div class="custom-bg py-20">
<div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="md:flex md:items-center md:justify-between">
<div class="md:w-1/2 mb-10 md:mb-0">
<h1 class="text-4xl md:text-5xl font-bold text-white leading-tight mb-6">Build modern websites with Tailwind CSS</h1>
<p class="text-xl text-purple-100 mb-8">A utility-first CSS framework packed with classes that can be composed to build any design, directly in your markup.</p>
<div class="flex flex-wrap gap-4">
<button class="bg-white text-purple-600 hover:bg-gray-100 font-bold py-3 px-6 rounded-full transition duration-300 transform hover:scale-105">
Get Started
</button>
<button class="border-2 border-white text-white hover:bg-white hover:text-purple-600 font-bold py-3 px-6 rounded-full transition duration-300 transform hover:scale-105">
Learn More
</button>
</div>
</div>
<div class="md:w-1/2 flex justify-center">
<div class="relative w-64 h-64 md:w-80 md:h-80">
<div class="absolute inset-0 bg-purple-400 rounded-full opacity-20 animate-pulse"></div>
<div class="absolute inset-4 bg-purple-500 rounded-full opacity-30 animate-ping"></div>
<div class="absolute inset-8 bg-white rounded-full flex items-center justify-center shadow-xl">
<i class="fas fa-code text-purple-600 text-5xl"></i>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Features Section -->
<div class="py-16 bg-gray-50">
<div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-16">
<h2 class="text-3xl font-bold text-gray-800 mb-4">Amazing Features</h2>
<p class="text-xl text-gray-600 max-w-2xl mx-auto">Everything you need to build modern websites with Tailwind CSS</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
<!-- Feature 1 -->
<div class="bg-white rounded-xl shadow-md overflow-hidden transition duration-500 card-hover">
<div class="p-6">
<div class="flex items-center justify-center w-16 h-16 bg-purple-100 rounded-full mb-4">
<i class="fas fa-bolt text-purple-600 text-2xl"></i>
</div>
<h3 class="text-xl font-semibold text-gray-800 mb-2">Rapid Development</h3>
<p class="text-gray-600">Build quickly with utility classes that can be composed to create any design directly in your markup.</p>
</div>
</div>
<!-- Feature 2 -->
<div class="bg-white rounded-xl shadow-md overflow-hidden transition duration-500 card-hover">
<div class="p-6">
<div class="flex items-center justify-center w-16 h-16 bg-purple-100 rounded-full mb-4">
<i class="fas fa-mobile-alt text-purple-600 text-2xl"></i>
</div>
<h3 class="text-xl font-semibold text-gray-800 mb-2">Responsive Design</h3>
<p class="text-gray-600">Easily build responsive designs with Tailwind's responsive modifiers for every utility class.</p>
</div>
</div>
<!-- Feature 3 -->
<div class="bg-white rounded-xl shadow-md overflow-hidden transition duration-500 card-hover">
<div class="p-6">
<div class="flex items-center justify-center w-16 h-16 bg-purple-100 rounded-full mb-4">
<i class="fas fa-cog text-purple-600 text-2xl"></i>
</div>
<h3 class="text-xl font-semibold text-gray-800 mb-2">Customizable</h3>
<p class="text-gray-600">Tailwind is designed to be customized. Extend it, change it, or even create your own design system.</p>
</div>
</div>
</div>
</div>
</div>
<!-- CTA Section -->
<div class="bg-purple-700 py-16">
<div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
<h2 class="text-3xl font-bold text-white mb-6">Ready to get started?</h2>
<p class="text-xl text-purple-100 mb-8 max-w-2xl mx-auto">Join thousands of developers who are building amazing things with Tailwind CSS.</p>
<button class="bg-white text-purple-600 hover:bg-gray-100 font-bold py-3 px-8 rounded-full text-lg transition duration-300 transform hover:scale-105">
Sign Up for Free
</button>
</div>
</div>
<!-- Footer -->
<footer class="bg-gray-800 text-white py-12">
<div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="grid grid-cols-1 md:grid-cols-4 gap-8">
<div>
<h3 class="text-xl font-bold mb-4">Tailwind Demo</h3>
<p class="text-gray-400">Building the web with utility-first CSS framework.</p>
<div class="flex space-x-4 mt-4">
<a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-twitter"></i></a>
<a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-github"></i></a>
<a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-linkedin"></i></a>
</div>
</div>
<div>
<h4 class="text-lg font-semibold mb-4">Product</h4>
<ul class="space-y-2">
<li><a href="#" class="text-gray-400 hover:text-white">Features</a></li>
<li><a href="#" class="text-gray-400 hover:text-white">Pricing</a></li>
<li><a href="#" class="text-gray-400 hover:text-white">Documentation</a></li>
</ul>
</div>
<div>
<h4 class="text-lg font-semibold mb-4">Company</h4>
<ul class="space-y-2">
<li><a href="#" class="text-gray-400 hover:text-white">About</a></li>
<li><a href="#" class="text-gray-400 hover:text-white">Blog</a></li>
<li><a href="#" class="text-gray-400 hover:text-white">Careers</a></li>
</ul>
</div>
<div>
<h4 class="text-lg font-semibold mb-4">Legal</h4>
<ul class="space-y-2">
<li><a href="#" class="text-gray-400 hover:text-white">Privacy</a></li>
<li><a href="#" class="text-gray-400 hover:text-white">Terms</a></li>
<li><a href="#" class="text-gray-400 hover:text-white">Cookie Policy</a></li>
</ul>
</div>
</div>
<div class="border-t border-gray-700 mt-8 pt-8 text-center text-gray-400">
<p>© 2023 Tailwind Demo. All rights reserved.</p>
</div>
</div>
</footer>
<script>
// Mobile menu toggle
document.querySelector('.mobile-menu-button').addEventListener('click', function() {
// This would toggle a mobile menu (not implemented in this demo)
alert('Mobile menu would open here in a complete implementation!');
});
// Simple animation on scroll
document.addEventListener('DOMContentLoaded', function() {
const cards = document.querySelectorAll('.card-hover');
cards.forEach(card => {
card.addEventListener('mouseenter', function() {
this.style.transition = 'transform 0.3s ease, box-shadow 0.3s ease';
});
});
});
</script>
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=Skidrive/skidrive" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html> |