メディアコンポーネントコンポーネント

<div class="max-w-xl mx-auto p-6 bg-white dark:bg-gray-800 rounded-lg shadow-md">
    <div class="flex items-center space-x-4">
        <img src="https://randomuser.me/api/portraits/thumb/men/32.jpg" alt="Avatar" class="w-12 h-12 rounded-full border border-gray-300 dark:border-gray-700" />
        <div>
            <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Product Title</h2>
            <p class="text-gray-600 dark:text-gray-400">Product description goes here. This is a brief introduction to the product.</p>
        </div>
    </div>
    <div class="mt-4">
        <img src="https://picsum.photos/400/300?random=1" alt="Product Image" class="w-full h-72 object-cover rounded-md shadow-sm dark:shadow-lg" />
    </div>
    <div class="mt-4 flex justify-between items-center">
        <span class="text-lg font-bold text-gray-800 dark:text-gray-200">$49.99</span>
        <button class="px-4 py-2 bg-blue-600 text-white rounded focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-blue-500 dark:focus:ring-blue-400 transition duration-300 ease-in-out">Add to Cart</button>
    </div>
</div>