数据可视化组件

<div class="min-h-screen bg-gray-800 flex items-center justify-center p-5">
    <div class="bg-white dark:bg-gray-900 bg-opacity-60 backdrop-blur-lg rounded-lg shadow-lg p-8 w-full max-w-3xl">
        <h2 class="text-gray-900 dark:text-white text-2xl font-bold mb-5">Product Insights</h2>
        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
            <div class="bg-gray-100 dark:bg-gray-700 rounded-lg p-4 shadow-md">
                <h3 class="text-gray-800 dark:text-gray-200 font-semibold mb-2">Total Sales</h3>
                <img class="w-full h-32 object-cover rounded-lg" src="https://picsum.photos/200/100" alt="Sales Insights" />
                <p class="text-gray-600 dark:text-gray-400 mt-2">$15,237</p>
            </div>
            <div class="bg-gray-100 dark:bg-gray-700 rounded-lg p-4 shadow-md">
                <h3 class="text-gray-800 dark:text-gray-200 font-semibold mb-2">Total Products</h3>
                <img class="w-full h-32 object-cover rounded-lg" src="https://picsum.photos/200/101" alt="Product Count" />
                <p class="text-gray-600 dark:text-gray-400 mt-2">250</p>
            </div>
            <div class="bg-gray-100 dark:bg-gray-700 rounded-lg p-4 shadow-md">
                <h3 class="text-gray-800 dark:text-gray-200 font-semibold mb-2">Average Order Value</h3>
                <img class="w-full h-32 object-cover rounded-lg" src="https://picsum.photos/200/102" alt="Average Order Value" />
                <p class="text-gray-600 dark:text-gray-400 mt-2">$61.50</p>
            </div>
            <div class="bg-gray-100 dark:bg-gray-700 rounded-lg p-4 shadow-md">
                <h3 class="text-gray-800 dark:text-gray-200 font-semibold mb-2">New Customers</h3>
                <img class="w-full h-32 object-cover rounded-lg" src="https://picsum.photos/200/103" alt="New Customers" />
                <p class="text-gray-600 dark:text-gray-400 mt-2">35</p>
            </div>
        </div>
        <div class="mt-5 border-t border-gray-300 dark:border-gray-600 pt-5">
            <h3 class="text-gray-900 dark:text-white font-bold mb-2">Customer Feedback</h3>
            <div class="flex items-center">
                <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Customer Avatar" />
                <div class="ml-4">
                    <p class="text-gray-800 dark:text-gray-200 font-semibold">John Doe</p>
                    <p class="text-gray-600 dark:text-gray-400">"Great shopping experience! Highly recommend."</p>
                </div>
            </div>
        </div>
    </div>
</div>