Componente de panel de comercio electrónico
Componente de panel de comercio electrónico con skeuomorfismo, colores vibrantes y diseño simple para Tailwind CSS, con soporte de tema oscuro y receptivo.
Código HTML
<div class="p-6 bg-gray-100 dark:bg-gray-800 rounded-lg shadow-xl max-w-sm mx-auto">
<h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-4">Dashboard Overview</h2>
<div class="flex items-center justify-between mb-4">
<div class="flex items-center">
<div class="w-10 h-10 bg-blue-500 rounded-full flex items-center justify-center mr-3">
<svg class="w-6 h-6 text-white" 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="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
</div>
<div>
<p class="text-gray-600 dark:text-gray-300 text-sm">Total Sales</p>
<p class="text-lg font-semibold text-green-600 dark:text-green-400">$5,200</p>
</div>
</div>
<svg class="w-6 h-6 text-gray-400 dark:text-gray-600" 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="M9 5l7 7-7 7"></path></svg>
</div>
<div class="flex items-center justify-between mb-4">
<div class="flex items-center">
<div class="w-10 h-10 bg-red-500 rounded-full flex items-center justify-center mr-3">
<svg class="w-6 h-6 text-white" 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="M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-8m8 0l-5 2v-2m5 0z"></path></svg>
</div>
<div>
<p class="text-gray-600 dark:text-gray-300 text-sm">New orders</p>
<p class="text-lg font-semibold text-orange-600 dark:text-orange-400">150</p>
</div>
</div>
<svg class="w-6 h-6 text-gray-400 dark:text-gray-600" 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="M9 5l7 7-7 7"></path></svg>
</div>
<div class="flex items-center justify-between">
<div class="flex items-center">
<div class="w-10 h-10 bg-yellow-500 rounded-full flex items-center justify-center mr-3">
<svg class="w-6 h-6 text-white" 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="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h.01M17 9l2 2m0 0l2-2m-2 2v-2v2z"></path></svg>
</div>
<div>
<p class="text-gray-600 dark:text-gray-300 text-sm">Pending Issues</p>
<p class="text-lg font-semibold text-red-600 dark:text-red-400">12</p>
</div>
</div>
<svg class="w-6 h-6 text-gray-400 dark:text-gray-600" 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="M9 5l7 7-7 7"></path></svg>
</div>
</div>Componentes relacionados
Ficha de producto de comercio electrónico retro
Una tarjeta de producto de comercio electrónico retro / vintage con diseño receptivo y soporte para modo oscuro.
Componente retro de comercio electrónico
Un componente complejo de comercio electrónico diseñado con un estilo retro / vintage, con un esquema de color triádico y un diseño receptivo, adecuado para sitios web comerciales / corporativos con soporte de modo oscuro.
Componentes de comercio electrónico
Un componente de comercio electrónico de complejidad moderada con un diseño de modo oscuro que utiliza colores en tonos tierra para una exhibición de portafolio.