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
Componentes de visualización de datos
Un componente de visualización de datos de estilo retro/vintage con soporte para temas oscuros y efectos responsivos utilizando Tailwind CSS.
Componente de visualización de datos en modo oscuro
Un componente de visualización de datos complejo y receptivo diseñado con un tema monocromático oscuro. Cuenta con múltiples elementos de visualización interactivos, incluido un gráfico de líneas, un gráfico de barras y tarjetas de datos. Incluye efectos de desplazamiento y utiliza la compatibilidad con el modo oscuro de Tailwind. Apto para blogs y plataformas de consumo de contenidos.
Componente de visualización de datos
Componente de visualización de datos de neumorfismo con efectos responsivos y compatibilidad con temas oscuros.