数据可视化组件

<div class="bg-gray-800 text-white p-6 rounded-lg shadow-lg max-w-md mx-auto">
    <h2 class="text-2xl font-bold mb-4 text-center">Data Visualization</h2>
    <div class="mb-4">
        <h3 class="text-lg font-semibold mb-2">User Statistics</h3>
        <div class="overflow-hidden rounded-lg">
            <img class="w-full h-32 object-cover" src="https://picsum.photos/id/237/400/200" alt="Data Visualization Image">
        </div>
        <p class="mt-2 text-sm">This chart represents the users joining over the past year.</p>
    </div>
    <div class="font-mono mb-6">
        <p class="text-sm">Last updated: <span class="font-bold">2 days ago</span></p>
    </div>
    <div class="bg-gray-700 p-4 text-center rounded-lg">
        <h3 class="text-lg font-semibold">Profile Overview</h3>
        <div class="flex justify-around mt-4">
            <div class="flex flex-col items-center">
                <img class="w-12 h-12 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
                <span class="mt-2 text-sm">User 1</span>
            </div>
            <div class="flex flex-col items-center">
                <img class="w-12 h-12 rounded-full" src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar">
                <span class="mt-2 text-sm">User 2</span>
            </div>
        </div>
    </div>
    <style>
        @media (prefers-color-scheme: dark) {
            .bg-gray-800 {
                background-color: #1f2937;
            }
            .bg-gray-700 {
                background-color: #374151;
            }
        }
    </style>
</div>