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
Componente de componentes de comercio electrónico
Un componente de comercio electrónico brutalista para un blog, con una combinación de colores vibrantes y una complejidad moderada. Incluye un diseño responsivo con soporte para temas oscuros utilizando Tailwind CSS.
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.
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.