Composant Composants de mise en page
Composant de mise en page de tableau de bord réactif avec un thème sombre, doté d’une barre latérale et d’une zone de contenu principale. Il utilise une palette de couleurs triadique pour un attrait visuel.
HTML Code
<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>Composants associés
Mise en page rétro des médias sociaux
Une mise en page simple et monochrome à thème rétro pour les réseaux sociaux, avec prise en charge du mode sombre.
Composant de mise en page du commerce électronique
Un composant de mise en page e-commerce simple et réactif avec une esthétique Material Design en niveaux de gris, avec une grille de produits, un en-tête et un pied de page, le tout avec prise en charge du mode sombre. Utilise picsum.photos pour les images de produits.
Composant de mise en page en mode sombre
Un composant de mise en page réactif avec prise en charge du mode sombre à l’aide de Tailwind CSS. Comprend un en-tête, une zone de contenu et un pied de page simples. Le mode sombre est géré par le préfixe 'dark :' dans les classes Tailwind.