Panel de control de comercio electrónico
Un componente de panel de control de comercio electrónico en modo oscuro con un diseño simple para la visualización de datos y paneles de control.
Código HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css" rel="stylesheet">
<title>E-commerce Dashboard</title>
</head>
<body class="bg-gray-900 text-white">
<div class="container mx-auto p-6">
<h1 class="text-xl font-bold mb-6">E-commerce Dashboard</h1>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<div class="bg-gray-800 p-4 rounded-lg shadow-md">
<h2 class="font-semibold text-lg">Sales Overview</h2>
<img src="https://picsum.photos/400/200?random=1" alt="Sales Overview" class="w-full h-32 object-cover rounded-md">
<p class="mt-2">Total Sales: $10,000</p>
<p class="mt-1">Orders: 150</p>
</div>
<div class="bg-gray-800 p-4 rounded-lg shadow-md">
<h2 class="font-semibold text-lg">User Insights</h2>
<img src="https://picsum.photos/400/200?random=2" alt="User Insights" class="w-full h-32 object-cover rounded-md">
<p class="mt-2">Total Users: 500</p>
<p class="mt-1">Active Users: 300</p>
</div>
<div class="bg-gray-800 p-4 rounded-lg shadow-md">
<h2 class="font-semibold text-lg">Recent Orders</h2>
<ul class="list-disc list-inside mt-2">
<li>Order #1 - $50</li>
<li>Order #2 - $30</li>
<li>Order #3 - $20</li>
</ul>
</div>
<div class="bg-gray-800 p-4 rounded-lg shadow-md">
<h2 class="font-semibold text-lg">Profile Overview</h2>
<div class="flex items-center mt-2">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-12 h-12 rounded-full">
<div class="ml-3">
<p class="font-semibold">John Doe</p>
<p>[email protected]</p>
</div>
</div>
</div>
</div>
</div>
</body>
</html>Componentes relacionados
Componente de componentes de comercio electrónico
Un componente de comercio electrónico receptivo con microinteracciones, combinación de colores análoga y compatibilidad con temas oscuros.
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.
Industrial_Monochrome_Blog_Card
Una tarjeta de consumo de blog/contenido compleja y responsiva con una estética industrial, que utiliza un esquema de color blanco y negro con un solo acento brillante. Cuenta con elementos expuestos y diseño utilitario, con soporte para modo oscuro.