HTML 代码
<div class="dark:bg-gray-900 min-h-screen p-8">
<div class="max-w-4xl mx-auto">
<div class="bg-gray-800 dark:bg-gray-950 rounded-lg shadow-xl overflow-hidden">
<div class="flex border-b border-gray-700 dark:border-gray-700">
<button class="flex-1 py-4 px-6 text-center text-lg font-semibold text-cyan-400 dark:text-cyan-500 border-b-2 border-cyan-400 dark:border-cyan-500 hover:bg-gray-700 dark:hover:bg-gray-800 focus:outline-none transition-colors duration-300">
Featured Articles
</button>
<button class="flex-1 py-4 px-6 text-center text-lg font-semibold text-purple-400 dark:text-purple-500 hover:bg-gray-700 dark:hover:bg-gray-800 focus:outline-none transition-colors duration-300">
Popular Posts
</button>
<button class="flex-1 py-4 px-6 text-center text-lg font-semibold text-fuchsia-400 dark:text-fuchsia-500 hover:bg-gray-700 dark:hover:bg-gray-800 focus:outline-none transition-colors duration-300">
Latest News
</button>
</div>
<div class="p-6 md:p-8">
<!-- Tab Content 1: Featured Articles -->
<div class="space-y-8">
<div class="flex flex-col md:flex-row bg-gray-700 dark:bg-gray-900 rounded-lg shadow-md overflow-hidden transform transition-transform duration-300 hover:scale-[1.02]">
<img class="w-full md:w-1/3 h-48 md:h-auto object-cover" src="https://picsum.photos/seed/article1/600/400" alt="Article Thumbnail">
<div class="p-6 flex flex-col justify-between">
<div>
<h3 class="text-2xl font-bold text-white mb-2">The Future of AI in Content Creation</h3>
<p class="text-gray-300 text-base leading-relaxed">Explore how artificial intelligence is revolutionizing the way we create and consume digital content, from automated writing to personalized recommendations.</p>
</div>
<div class="mt-4 flex items-center text-gray-400">
<img class="w-8 h-8 rounded-full mr-2" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Author Avatar">
<span>John Doe • 2 hours ago</span>
</div>
</div>
</div>
<div class="flex flex-col md:flex-row bg-gray-700 dark:bg-gray-900 rounded-lg shadow-md overflow-hidden transform transition-transform duration-300 hover:scale-[1.02]">
<img class="w-full md:w-1/3 h-48 md:h-auto object-cover" src="https://picsum.photos/seed/article2/600/400" alt="Article Thumbnail">
<div class="p-6 flex flex-col justify-between">
<div>
<h3 class="text-2xl font-bold text-white mb-2">Mastering Responsive Design with Tailwind CSS</h3>
<p class="text-gray-300 text-base leading-relaxed">Dive deep into the utility-first CSS framework and learn how to build stunning, responsive web interfaces with ease and efficiency.</p>
</div>
<div class="mt-4 flex items-center text-gray-400">
<img class="w-8 h-8 rounded-full mr-2" src="https://randomuser.me/api/portraits/women/44.jpg" alt="Author Avatar">
<span>Jane Smith • Yesterday</span>
</div>
</div>
</div>
<div class="flex flex-col md:flex-row bg-gray-700 dark:bg-gray-900 rounded-lg shadow-md overflow-hidden transform transition-transform duration-300 hover:scale-[1.02]">
<img class="w-full md:w-1/3 h-48 md:h-auto object-cover" src="https://picsum.photos/seed/article3/600/400" alt="Article Thumbnail">
<div class="p-6 flex flex-col justify-between">
<div>
<h3 class="text-2xl font-bold text-white mb-2">The Art of Storytelling in Digital Media</h3>
<p class="text-gray-300 text-base leading-relaxed">Uncover the timeless principles of captivating narratives and how they apply to modern digital platforms and content forms.</p>
</div>
<div class="mt-4 flex items-center text-gray-400">
<img class="w-8 h-8 rounded-full mr-2" src="https://randomuser.me/api/portraits/men/21.jpg" alt="Author Avatar">
<span>Peter Jones • 3 days ago</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>