媒体组件

<div class="max-w-sm mx-auto">
    <div class="bg-white dark:bg-gray-800 shadow-lg rounded-lg overflow-hidden">
        <img class="w-full h-48 object-cover" src="https://picsum.photos/400/200" alt="Placeholder Image">
        <div class="p-6">
            <h2 class="text-2xl font-semibold text-gray-800 dark:text-white">Media Title</h2>
            <p class="text-gray-700 dark:text-gray-300">This is a description of the media component. It mimics a real-world object with its skeuomorphic design.</p>
            <div class="flex items-center mt-4">
                <img class="w-10 h-10 rounded-full border-2 border-white dark:border-gray-800" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
                <div class="ml-3">
                    <p class="text-sm text-gray-600 dark:text-gray-400">Posted by John Doe</p>
                    <p class="text-xs text-gray-500 dark:text-gray-500">2 hours ago</p>
                </div>
            </div>
        </div>
    </div>
</div>
<style>
    /* Dark theme support */
    @media (prefers-color-scheme: dark) {
        body {
            background-color: #1A202C;
        }
    }
</style>