HTML 代码
<div class="bg-gray-900 p-8 rounded-lg shadow-lg space-y-6 dark:bg-gray-800">
<div class="flex items-center space-x-4">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-12 h-12 rounded-full">
<div class="text-white">
<h2 class="text-xl font-bold">Author Name</h2>
<p class="text-gray-400">March 1, 2023</p>
</div>
</div>
<img src="https://picsum.photos/600/400" alt="Blog Post" class="w-full rounded-lg">
<h3 class="text-white text-2xl font-semibold">Blog Post Title</h3>
<p class="text-gray-300">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam.</p>
<div class="flex justify-between items-center">
<span class="bg-green-600 text-white py-1 px-3 rounded-full">Category</span>
<button class="bg-blue-600 text-white py-2 px-4 rounded hover:bg-blue-700">Read More</button>
</div>
</div>
<div class="bg-gray-900 p-8 rounded-lg shadow-lg space-y-6 dark:bg-gray-800">
<div class="flex items-center space-x-4">
<img src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar" class="w-12 h-12 rounded-full">
<div class="text-white">
<h2 class="text-xl font-bold">Author Name</h2>
<p class="text-gray-400">March 2, 2023</p>
</div>
</div>
<img src="https://picsum.photos/600/401" alt="Blog Post" class="w-full rounded-lg">
<h3 class="text-white text-2xl font-semibold">Another Blog Post Title</h3>
<p class="text-gray-300">Suspense is best enjoyed with plenty of space as you travel up the textual ladders of creativeness.</p>
<div class="flex justify-between items-center">
<span class="bg-pink-600 text-white py-1 px-3 rounded-full">Category</span>
<button class="bg-blue-600 text-white py-2 px-4 rounded hover:bg-blue-700">Read More</button>
</div>
</div>