仪表盘组件

<div class="min-h-screen bg-gray-50 dark:bg-gray-900 p-6">
    <div class="max-w-7xl mx-auto p-6 bg-white dark:bg-gray-800 rounded-lg shadow-lg">
        <h1 class="text-3xl font-bold text-gray-800 dark:text-gray-200 mb-6">Dashboard</h1>
        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
            <!-- Card 1 -->
            <div class="bg-yellow-100 dark:bg-yellow-800 rounded-lg shadow-md transform transition duration-300 hover:scale-105">
                <img src="https://picsum.photos/200/150?random=1" alt="Data Visualization" class="rounded-t-lg">
                <div class="p-4">
                    <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Sales Overview</h2>
                    <p class="text-gray-600 dark:text-gray-400">Current sales data and trends.</p>
                </div>
            </div>
            <!-- Card 2 -->
            <div class="bg-green-100 dark:bg-green-800 rounded-lg shadow-md transform transition duration-300 hover:scale-105">
                <img src="https://picsum.photos/200/150?random=2" alt="User Engagement" class="rounded-t-lg">
                <div class="p-4">
                    <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200">User Engagement</h2>
                    <p class="text-gray-600 dark:text-gray-400">Track user interactions and engagement metrics.</p>
                </div>
            </div>
            <!-- Card 3 -->
            <div class="bg-blue-100 dark:bg-blue-800 rounded-lg shadow-md transform transition duration-300 hover:scale-105">
                <img src="https://picsum.photos/200/150?random=3" alt="Performance Metrics" class="rounded-t-lg">
                <div class="p-4">
                    <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Performance Metrics</h2>
                    <p class="text-gray-600 dark:text-gray-400">Analyze performance against key metrics.</p>
                </div>
            </div>
            <!-- Card 4 -->
            <div class="bg-red-100 dark:bg-red-800 rounded-lg shadow-md transform transition duration-300 hover:scale-105">
                <img src="https://picsum.photos/200/150?random=4" alt="Visitor Statistics" class="rounded-t-lg">
                <div class="p-4">
                    <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Visitor Statistics</h2>
                    <p class="text-gray-600 dark:text-gray-400">Monitor visitor statistics and behavior.</p>
                </div>
            </div>
        </div>
        <div class="mt-6">
            <h2 class="text-2xl font-bold text-gray-800 dark:text-gray-200 mb-4">Recent Users</h2>
            <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-4">
                <ul class="space-y-4">
                    <li class="flex items-center space-x-4">
                        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User 1" class="w-10 h-10 rounded-full">
                        <div>
                            <h3 class="font-semibold text-gray-800 dark:text-gray-200">John Doe</h3>
                            <p class="text-gray-600 dark:text-gray-400">Joined 2 days ago</p>
                        </div>
                    </li>
                    <li class="flex items-center space-x-4">
                        <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="User 2" class="w-10 h-10 rounded-full">
                        <div>
                            <h3 class="font-semibold text-gray-800 dark:text-gray-200">Jane Smith</h3>
                            <p class="text-gray-600 dark:text-gray-400">Joined 1 week ago</p>
                        </div>
                    </li>
                    <li class="flex items-center space-x-4">
                        <img src="https://randomuser.me/api/portraits/men/2.jpg" alt="User 3" class="w-10 h-10 rounded-full">
                        <div>
                            <h3 class="font-semibold text-gray-800 dark:text-gray-200">Mike Johnson</h3>
                            <p class="text-gray-600 dark:text-gray-400">Joined 3 weeks ago</p>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>