Componente Componenti di layout
Un componente di layout della dashboard reattivo con un tema scuro, con una barra laterale e un'area di contenuto principale. Utilizza una combinazione di colori triadica per l'appeal visivo.
Codice 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>Componenti correlati
Portfolio Layout
Un semplice componente di layout reattivo per un portfolio incentrato sulle microinterazioni con colori complementari, supporto della modalità scura ed elementi minimi.
Layout blog con barra laterale sfumata
Un componente di layout del blog reattivo con un'area di contenuto principale e una barra laterale sfumata, con colori tenui e tenui, transizioni fluide e supporto completo per la modalità scura. Progettato per il consumo di contenuti su schermi di varie dimensioni.
Componenti di layout
Un componente di layout dashboard reattivo che utilizza microinterazioni e una combinazione di colori pastello, progettato per la visualizzazione dei dati e i pannelli di controllo con supporto per la modalità oscura.