HTML 代码
<div class="bg-gray-100 dark:bg-gray-800 min-h-screen p-6">
<div class="container mx-auto">
<header class="text-center mb-10">
<h1 class="text-3xl font-bold text-gray-800 dark:text-gray-200">My Blog</h1>
<p class="text-gray-600 dark:text-gray-400">Insights, stories, and thoughts</p>
</header>
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
<article class="bg-white dark:bg-gray-700 rounded-lg shadow-md p-5">
<img src="https://picsum.photos/300/200" alt="Blog post image" class="rounded-md mb-4"/>
<h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Blog Post Title 1</h2>
<p class="text-gray-600 dark:text-gray-400">Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
<a href="#" class="text-blue-500 dark:text-blue-400 hover:underline">Read more</a>
</article>
<article class="bg-white dark:bg-gray-700 rounded-lg shadow-md p-5">
<img src="https://picsum.photos/300/200?random=1" alt="Blog post image" class="rounded-md mb-4"/>
<h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Blog Post Title 2</h2>
<p class="text-gray-600 dark:text-gray-400">Suspendisse potenti. In hac habitasse platea dictumst...</p>
<a href="#" class="text-blue-500 dark:text-blue-400 hover:underline">Read more</a>
</article>
<article class="bg-white dark:bg-gray-700 rounded-lg shadow-md p-5">
<img src="https://picsum.photos/300/200?random=2" alt="Blog post image" class="rounded-md mb-4"/>
<h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Blog Post Title 3</h2>
<p class="text-gray-600 dark:text-gray-400">Curabitur nec libero vel arcu elementum mattis...</p>
<a href="#" class="text-blue-500 dark:text-blue-400 hover:underline">Read more</a>
</article>
</div>
<footer class="mt-10 text-center">
<p class="text-gray-600 dark:text-gray-400">© 2023 My Blog. All rights reserved.</p>
</footer>
</div>
</div>