カードコンポーネント

<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>