Componentes de visualización de datos
Un componente de visualización de datos de comercio electrónico simple y receptivo con un estilo de diseño de morfismo de vidrio y un esquema de color monocromático, con soporte de modo oscuro.
Código HTML
<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>Componentes relacionados
Componente de visualización de datos
Un componente de visualización de datos receptivo diseñado en estilo Material Design con un esquema de color pastel, adecuado para mostrar el trabajo de portafolio con soporte para modo oscuro.
Componentes de visualización de datos
Un componente de visualización de datos diseñado en estilo brutalista con Tailwind CSS, con diseños responsivos y compatibilidad con temas oscuros.
Componente de componentes de visualización de datos
Un componente de visualización de datos responsivo y compatible con el modo oscuro para blogs, con un diseño retro/vintage con una combinación de colores complementaria y elementos interactivos complejos.