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
Composants de mise en page
Il s’agit d’un composant de mise en page complexe conçu pour les blogs et la consommation de contenu, avec des micro-interactions et une palette de couleurs complémentaires. Il comprend divers éléments interactifs et prend en charge le mode sombre.
Swiss_International_Typography_SAAS_Layout
Une mise en page d’application SaaS complexe et réactive utilisant les principes de conception de la typographie suisse/internationale avec une palette de couleurs d’automne. Dispose d’une barre latérale de navigation, d’un en-tête, d’une zone de contenu principale et de widgets, le tout avec prise en charge du mode sombre.
Mise en page du tableau de bord Cyberpunk Crypto
Une disposition de tableau de bord réactive sur le thème du cyberpunk pour les applications de crypto-monnaie et de blockchain, avec des accents néon, des arrière-plans sombres et des couleurs sourdes. Comprend la navigation dans la barre latérale, une zone de contenu principale et une barre supérieure.