Composant de mise en page du tableau de bord
Une mise en page de tableau de bord réactive avec l’esthétique de Material Design, y compris une barre latérale, un en-tête et une zone de contenu principal. Il prend en charge le mode sombre et utilise des couleurs complémentaires pour un look équilibré. La complexité est modérée avec des fonctionnalités de type interactif réalisées uniquement avec des classes CSS et Tailwind.
HTML Code
<div class="min-h-screen bg-gray-100 dark:bg-gray-900 flex flex-col md:flex-row">
<!-- Sidebar -->
<div class="w-full md:w-64 bg-white dark:bg-gray-800 shadow-lg md:shadow-none p-4 space-y-4 flex flex-col items-center md:items-start">
<div class="text-2xl font-bold text-indigo-600 dark:text-orange-400">Dashboard</div>
<nav class="space-y-2 w-full">
<a href="#" class="block p-2 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-700 text-gray-700 dark:text-gray-200 flex items-center space-x-2"><i class="fas fa-home"></i><span>Home</span></a>
<a href="#" class="block p-2 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-700 text-gray-700 dark:text-gray-200 flex items-center space-x-2"><i class="fas fa-chart-line"></i><span>Analytics</span></a>
<a href="#" class="block p-2 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-700 text-gray-700 dark:text-gray-200 flex items-center space-x-2"><i class="fas fa-cog"></i><span>Settings</span></a>
</nav>
</div>
<!-- Main Content Area -->
<div class="flex-1 flex flex-col">
<!-- Header -->
<header class="w-full bg-white dark:bg-gray-800 shadow-md p-4 flex justify-between items-center">
<h1 class="text-xl font-semibold text-gray-800 dark:text-gray-100">Overview</h1>
<div class="flex items-center space-x-4">
<button class="text-gray-600 dark:text-gray-300 focus:outline-none"><i class="fas fa-bell"></i></button>
<img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-indigo-500 dark:border-orange-400">
</div>
</header>
<!-- Content Grid -->
<main class="flex-1 p-4 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
<!-- Card 1 -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6 flex flex-col justify-between transform transition duration-300 hover:scale-105">
<div>
<h2 class="text-lg font-semibold text-gray-800 dark:text-gray-100">Total Sales</h2>
<p class="text-3xl font-bold text-indigo-600 dark:text-orange-400 mt-2">$12,345</p>
</div>
<p class="text-sm text-gray-500 dark:text-gray-400">+5% from last month</p>
</div>
<!-- Card 2 -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6 flex flex-col justify-between transform transition duration-300 hover:scale-105">
<div>
<h2 class="text-lg font-semibold text-gray-800 dark:text-gray-100">New Users</h2>
<p class="text-3xl font-bold text-indigo-600 dark:text-orange-400 mt-2">2,145</p>
</div>
<p class="text-sm text-gray-500 dark:text-gray-400">+12% from last week</p>
</div>
<!-- Card 3 (Image Card) -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-4 flex flex-col transform transition duration-300 hover:scale-105">
<img src="https://picsum.photos/400/200?random=1" alt="Random Image" class="w-full h-32 object-cover rounded-md mb-4">
<h2 class="text-lg font-semibold text-gray-800 dark:text-gray-100">Data Visualization</h2>
<p class="text-sm text-gray-600 dark:text-gray-300 mt-2 flex-grow">A quick look at the latest data trends and insights.</p>
<button class="mt-4 self-end px-4 py-2 bg-indigo-500 text-white rounded-md hover:bg-indigo-600 dark:bg-orange-500 dark:hover:bg-orange-600 transition-colors duration-300">View Details</button>
</div>
<!-- Card 4 (Chart Placeholder) -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6 col-span-1 md:col-span-2 transform transition duration-300 hover:scale-105">
<h2 class="text-lg font-semibold text-gray-800 dark:text-gray-100">Sales Performance</h2>
<div class="mt-4 h-48 bg-gray-200 dark:bg-gray-700 rounded-md flex items-center justify-center">
<p class="text-gray-500 dark:text-gray-400">Chart Placeholder</p>
</div>
</div>
</main>
</div>
</div>
<!-- Font Awesome for Icons -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">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.
Composant Composants de mise en page
Une mise en page de composant Web réactive suivant les principes de conception matérielle pour une application de médias sociaux avec prise en charge du thème 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.