Componente Componentes de diseño
Un componente de diseño de tablero receptivo con un tema oscuro, con una barra lateral y un área de contenido principal. Utiliza un esquema de color triádico para el atractivo visual.
Código HTML
<div class="min-h-screen flex flex-col bg-gray-900 text-gray-200">
<!-- Header -->
<header class="flex items-center justify-between p-4 bg-gray-800 shadow-md">
<h1 class="text-2xl font-bold text-cyan-400">Dashboard</h1>
<nav>
<ul class="flex space-x-4">
<li><a href="#" class="text-orange-400 hover:text-orange-300">Home</a></li>
<li><a href="#" class="text-orange-400 hover:text-orange-300">Settings</a></li>
<li><a href="#" class="text-orange-400 hover:text-orange-300">Profile</a></li>
</ul>
</nav>
</header>
<!-- Main Content Area -->
<div class="flex flex-1 flex-col md:flex-row">
<!-- Sidebar -->
<aside class="w-full md:w-64 bg-gray-800 p-4 shadow-lg">
<nav>
<ul class="space-y-4">
<li><a href="#" class="block text-lime-400 hover:text-lime-300">Overview</a></li>
<li><a href="#" class="block text-lime-400 hover:text-lime-300">Analytics</a></li>
<li><a href="#" class="block text-lime-400 hover:text-lime-300">Reports</a></li>
<li><a href="#" class="block text-lime-400 hover:text-lime-300">Users</a></li>
</ul>
</nav>
</aside>
<!-- Content -->
<main class="flex-1 p-6">
<h2 class="text-3xl font-semibold mb-6 text-cyan-400">Welcome to your Dashboard</h2>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<!-- Card 1 -->
<div class="bg-gray-800 dark:bg-gray-700 p-6 rounded-lg shadow-md">
<h3 class="text-xl font-bold mb-2 text-orange-400">Total Sales</h3>
<p class="text-3xl font-bold text-gray-100">$12,345</p>
</div>
<!-- Card 2 -->
<div class="bg-gray-800 dark:bg-gray-700 p-6 rounded-lg shadow-md">
<h3 class="text-xl font-bold mb-2 text-lime-400">New Customers</h3>
<p class="text-3xl font-bold text-gray-100">256</p>
</div>
<!-- Card 3 -->
<div class="bg-gray-800 dark:bg-gray-700 p-6 rounded-lg shadow-md">
<h3 class="text-xl font-bold mb-2 text-cyan-400">Page Views</h3>
<p class="text-3xl font-bold text-gray-100">8,765</p>
</div>
</div>
<!-- Example Data Table -->
<div class="mt-8 bg-gray-800 dark:bg-gray-700 p-6 rounded-lg shadow-md">
<h3 class="text-xl font-bold mb-4 text-cyan-400">Recent Orders</h3>
<div class="overflow-x-auto">
<table class="min-w-full leading-normal">
<thead>
<tr>
<th class="px-5 py-3 border-b-2 border-gray-700 bg-gray-700 text-left text-xs font-semibold text-gray-300 uppercase tracking-wider">Order ID</th>
<th class="px-5 py-3 border-b-2 border-gray-700 bg-gray-700 text-left text-xs font-semibold text-gray-300 uppercase tracking-wider">Product</th>
<th class="px-5 py-3 border-b-2 border-gray-700 bg-gray-700 text-left text-xs font-semibold text-gray-300 uppercase tracking-wider">Amount</th>
<th class="px-5 py-3 border-b-2 border-gray-700 bg-gray-700 text-left text-xs font-semibold text-gray-300 uppercase tracking-wider">Status</th>
</tr>
</thead>
<tbody>
<tr>
<td class="px-5 py-5 border-b border-gray-700 bg-gray-800 text-sm text-gray-200">#1001</td>
<td class="px-5 py-5 border-b border-gray-700 bg-gray-800 text-sm text-lime-400">Laptop Pro</td>
<td class="px-5 py-5 border-b border-gray-700 bg-gray-800 text-sm text-gray-200">$999</td>
<td class="px-5 py-5 border-b border-gray-700 bg-gray-800 text-sm text-green-400">Completed</td>
</tr>
<tr>
<td class="px-5 py-5 border-b border-gray-700 bg-gray-800 text-sm text-gray-200">#1002</td>
<td class="px-5 py-5 border-b border-gray-700 bg-gray-800 text-sm text-orange-400">Mechanical Keyboard</td>
<td class="px-5 py-5 border-b border-gray-700 bg-gray-800 text-sm text-gray-200">$120</td>
<td class="px-5 py-5 border-b border-gray-700 bg-gray-800 text-sm text-amber-400">Pending</td>
</tr>
<tr>
<td class="px-5 py-5 border-b border-gray-700 bg-gray-800 text-sm text-gray-200">#1003</td>
<td class="px-5 py-5 border-b border-gray-700 bg-gray-800 text-sm text-cyan-400">Wireless Mouse</td>
<td class="px-5 py-5 border-b border-gray-700 bg-gray-800 text-sm text-gray-200">$50</td>
<td class="px-5 py-5 border-b border-gray-700 bg-gray-800 text-sm text-green-400">Completed</td>
</tr>
</tbody>
</table>
</div>
</div>
</main>
</div>
</div>Componentes relacionados
Diseño de portafolio en modo oscuro
Un componente de diseño responsivo en modo oscuro para carteras, con un esquema de color monocromático utilizando Tailwind CSS. Incluye marcadores de posición para el contenido y está diseñado para una complejidad moderada sin JavaScript.
Componente Componentes de diseño
Un componente de diseño inspirado en el brutalismo para el consumo de contenido con una combinación de colores pastel y complejidad moderada, con diseño receptivo y compatibilidad con el modo oscuro.
Componentes de diseño
Un componente de diseño complejo diseñado para blogs y consumo de contenido, con microinteracciones y una combinación de colores complementaria. Incluye varios elementos interactivos y es compatible con el modo oscuro.