Componente de componentes de visualización de datos de comercio electrónico
Un componente de visualización de datos para el comercio electrónico, diseñado con principios de Material Design, tonos terrosos y compatibilidad con el modo oscuro receptivo mediante Tailwind CSS.
Código HTML
<div class="p-4 bg-white dark:bg-gray-800 shadow-md rounded-lg">
<h2 class="text-xl font-semibold text-gray-800 dark:text-gray-100 mb-4">Sales Performance</h2>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<div class="flex items-center justify-between p-4 bg-gray-100 dark:bg-gray-700 rounded-lg shadow-sm">
<div>
<p class="text-sm text-gray-500 dark:text-gray-400">Total Revenue</p>
<p class="text-2xl font-bold text-green-700 dark:text-green-400">$1,234,567</p>
</div>
<svg class="w-8 h-8 text-green-500 dark:text-green-300" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8L11 20m-7-2a2 2 0 01-2-2V8a2 2 0 012-2h4l2 2m0 0l-3 3-2-2-4 4"></path></svg>
</div>
<div class="flex items-center justify-between p-4 bg-gray-100 dark:bg-gray-700 rounded-lg shadow-sm">
<div>
<p class="text-sm text-gray-500 dark:text-gray-400">Items Sold</p>
<p class="text-2xl font-bold text-yellow-700 dark:text-yellow-400">9,876</p>
</div>
<svg class="w-8 h-8 text-yellow-500 dark:text-yellow-300" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 11V7l-4 4m0 0l-4-4m4 4v8m-4-2a2 2 0 01-2-2V6a2 2 0 012-2h4l2 2m0 0l-3 3-2-2-4 4"></path></svg>
</div>
<div class="md:col-span-2 p-4 bg-gray-100 dark:bg-gray-700 rounded-lg shadow-sm">
<h3 class="text-lg font-semibold text-gray-700 dark:text-gray-200 mb-2">Sales Trends</h3>
<!-- Placeholder for a simple chart -->
<div class="h-32 bg-gray-200 dark:bg-gray-600 rounded-md flex items-center justify-center">
<p class="text-gray-500 dark:text-gray-400">Chart Placeholder</p>
</div>
</div>
</div>
<div class="mt-4 text-center">
<a href="#" class="text-blue-600 dark:text-blue-400 hover:underline">View Full Report</a>
</div>
</div>Componentes relacionados
Social_Connection_Chart_Component
Un componente de gráfico de conexión social de complejidad moderada con un diseño orgánico inspirado en la naturaleza, con negro, blanco y un solo color de acento brillante. Diseñado para plataformas sociales y de citas, muestra visualmente las conexiones con líneas fluidas y avatares de usuario. Totalmente receptivo con soporte para modo oscuro.
RetroDashboardComponent
Componente de tablero retro / vintage con esquema de escala de grises y soporte para modo oscuro. Este componente complejo presenta múltiples elementos interactivos, un diseño responsivo y utiliza Tailwind CSS para el estilo. Es adecuado para un tablero o panel de control.
Componente de visualización de datos
Un componente de visualización de datos responsivo diseñado con una estética retro/vintage inspirada en los años 80 y 90, con soporte para temas oscuros y uso de imágenes de marcador de posición.