HTML 代码
<header class="bg-white py-4 shadow-sm dark:bg-gray-900 border-b border-gray-200 dark:border-gray-700">
<a href="#main-content" class="sr-only focus:not-sr-only focus:absolute focus:left-1/2 focus:-translate-x-1/2 focus:top-4 focus:z-50 px-4 py-2 bg-black text-white dark:bg-white dark:text-black rounded-md text-sm font-semibold tracking-tight uppercase focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-black dark:focus:ring-white transition-colors duration-200">
Skip to Main Content
</a>
<nav class="container mx-auto px-4 flex justify-between items-center">
<div class="text-2xl font-bold text-gray-900 dark:text-white uppercase tracking-tighter">
<a href="#" class="hover:text-gray-700 dark:hover:text-gray-300 transition-colors duration-200">AthleticPulse</a>
</div>
<ul class="hidden md:flex space-x-8">
<li><a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white font-medium uppercase text-sm tracking-tight transition-colors duration-200">Workout Plans</a></li>
<li><a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white font-medium uppercase text-sm tracking-tight transition-colors duration-200">Nutrition Guides</a></li>
<li><a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white font-medium uppercase text-sm tracking-tight transition-colors duration-200">Team Stats</a></li>
<li><a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white font-medium uppercase text-sm tracking-tight transition-colors duration-200">Classes</a></li>
</ul>
<button class="md:hidden flex items-center p-2 text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-black dark:focus:ring-white rounded-md" aria-label="Open menu">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path></svg>
</button>
</nav>
</header>
<main id="main-content" class="container mx-auto px-4 py-12 bg-gray-50 dark:bg-gray-800 text-gray-900 dark:text-gray-100 min-h-screen">
<h1 class="text-4xl md:text-5xl font-extrabold mb-8 text-black dark:text-white uppercase tracking-tighter leading-tight">
Unleash Your Full Potential
</h1>
<p class="text-lg md:text-xl leading-relaxed mb-8 max-w-3xl">
Welcome to AthleticPulse – your ultimate destination for achieving peak physical performance. Explore our expertly crafted workout plans, comprehensive nutrition guides, and real-time team statistics.
</p>
<section class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 mb-12">
<div class="bg-white dark:bg-gray-900 p-6 rounded-lg shadow-md border border-gray-100 dark:border-gray-700">
<img src="https://picsum.photos/400/250?random=1" alt="Workout Plan" class="w-full h-40 object-cover rounded-md mb-4 border border-gray-200 dark:border-gray-600">
<h3 class="text-xl font-bold mb-2 text-gray-900 dark:text-white uppercase tracking-tight">Strength Training</h3>
<p class="text-gray-700 dark:text-gray-300 text-sm">Build muscle and increase power with our tailored strength programs.</p>
</div>
<div class="bg-white dark:bg-gray-900 p-6 rounded-lg shadow-md border border-gray-100 dark:border-gray-700">
<img src="https://picsum.photos/400/250?random=2" alt="Nutrition Guide" class="w-full h-40 object-cover rounded-md mb-4 border border-gray-200 dark:border-gray-600">
<h3 class="text-xl font-bold mb-2 text-gray-900 dark:text-white uppercase tracking-tight">Balanced Diet</h3>
<p class="text-gray-700 dark:text-gray-300 text-sm">Fuel your body right with our expert nutrition advice and meal plans.</p>
</div>
<div class="bg-white dark:bg-gray-900 p-6 rounded-lg shadow-md border border-gray-100 dark:border-gray-700">
<img src="https://picsum.photos/400/250?random=3" alt="Team Stats" class="w-full h-40 object-cover rounded-md mb-4 border border-gray-200 dark:border-gray-600">
<h3 class="text-xl font-bold mb-2 text-gray-900 dark:text-white uppercase tracking-tight">Performance Tracking</h3>
<p class="text-gray-700 dark:text-gray-300 text-sm">Monitor your team's progress and individual achievements.</p>
</div>
</section>
<div class="p-6 bg-gray-100 dark:bg-gray-900 rounded-lg shadow-inner border border-gray-200 dark:border-gray-700">
<h2 class="text-2xl font-bold mb-4 text-gray-900 dark:text-white uppercase tracking-tight">Latest Updates</h2>
<ul class="space-y-4">
<li class="flex items-start">
<div class="flex-shrink-0 w-12 h-12 rounded-full overflow-hidden mr-4 border-2 border-black dark:border-white">
<img src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar" class="w-full h-full object-cover">
</div>
<div>
<p class="text-gray-800 dark:text-gray-200 font-semibold">New Speed Training Module Launched!</p>
<p class="text-sm text-gray-600 dark:text-gray-400">Our new module focuses on agility drills and explosive power. Available now.</p>
</div>
</li>
<li class="flex items-start">
<div class="flex-shrink-0 w-12 h-12 rounded-full overflow-hidden mr-4 border-2 border-black dark:border-white">
<img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="w-full h-full object-cover">
</div>
<div>
<p class="text-gray-800 dark:text-gray-200 font-semibold">March Fitness Challenge Winners Announced!</p>
<p class="text-sm text-gray-600 dark:text-gray-400">A huge congratulations to all participants. Check your dashboard for insights.</p>
</div>
</li>
</ul>
</div>
</main>
<footer class="bg-black text-white dark:bg-gray-950 py-6 mt-12">
<div class="container mx-auto px-4 text-center text-sm font-medium uppercase tracking-tight">
© 2023 AthleticPulse. All rights reserved.
</div>
</footer>