Composants de mise en page
Un composant de mise en page de tableau de bord réactif qui utilise des micro-interactions et une palette de couleurs pastel, conçu pour afficher la visualisation des données et les panneaux de contrôle avec prise en charge du mode sombre.
HTML Code
<div class="min-h-screen bg-white dark:bg-gray-900 flex flex-col p-5">
<header class="flex justify-between items-center mb-5">
<h1 class="text-2xl font-semibold text-gray-800 dark:text-gray-200">Dashboard</h1>
<button class="py-2 px-4 bg-blue-500 dark:bg-blue-700 text-white rounded-lg transition-transform transform hover:scale-105 hover:bg-blue-600 dark:hover:bg-blue-800 focus:outline-none">Logout</button>
</header>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
<div class="bg-pink-100 dark:bg-pink-800 p-4 rounded-lg shadow-lg transition-transform transform hover:scale-105">
<h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200">User Statistics</h2>
<p class="text-gray-600 dark:text-gray-400">Here are some stats about users.</p>
<img src="https://picsum.photos/200/100" alt="User Stats" class="mt-2 rounded-md">
</div>
<div class="bg-green-100 dark:bg-green-800 p-4 rounded-lg shadow-lg transition-transform transform hover:scale-105">
<h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Sales Overview</h2>
<p class="text-gray-600 dark:text-gray-400">View the sales data.</p>
<img src="https://picsum.photos/200/100" alt="Sales Overview" class="mt-2 rounded-md">
</div>
<div class="bg-blue-100 dark:bg-blue-800 p-4 rounded-lg shadow-lg transition-transform transform hover:scale-105">
<h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Recent Activity</h2>
<p class="text-gray-600 dark:text-gray-400">Check out the latest activity.</p>
<img src="https://picsum.photos/200/100" alt="Recent Activity" class="mt-2 rounded-md">
</div>
<div class="bg-yellow-100 dark:bg-yellow-800 p-4 rounded-lg shadow-lg transition-transform transform hover:scale-105">
<h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Server Status</h2>
<p class="text-gray-600 dark:text-gray-400">Monitor server health.</p>
<img src="https://picsum.photos/200/100" alt="Server Status" class="mt-2 rounded-md">
</div>
<div class="bg-purple-100 dark:bg-purple-800 p-4 rounded-lg shadow-lg transition-transform transform hover:scale-105">
<h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Notifications</h2>
<p class="text-gray-600 dark:text-gray-400">Your latest notifications.</p>
<img src="https://picsum.photos/200/100" alt="Notifications" class="mt-2 rounded-md">
</div>
<div class="bg-red-100 dark:bg-red-800 p-4 rounded-lg shadow-lg transition-transform transform hover:scale-105">
<h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Profile</h2>
<div class="flex items-center mt-2">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Profile" class="w-12 h-12 rounded-full mr-3">
<p class="text-gray-600 dark:text-gray-400">John Doe</p>
</div>
</div>
</div>
<footer class="mt-5 text-center text-gray-500 dark:text-gray-400">
<p>© 2023 Dashboard. All rights reserved.</p>
</footer>
</div>Composants associés
RetroBusinessLayout
Un composant de mise en page à thème rétro/vintage pour les sites Web d’entreprise, avec une palette de couleurs en niveaux de gris et un design simple. Il est réactif et inclut la prise en charge du mode sombre.
Composant de mise en page du commerce électronique
Un composant de mise en page e-commerce réactif avec prise en charge du thème sombre, construit avec Tailwind CSS selon les principes de Material Design. Il comprend une barre de navigation, une zone de contenu principale avec des listes de produits et un pied de page. La palette de couleurs est pastel.
Mise en page e-commerce avec conception 3D
Une mise en page de composant Web réactive pour le commerce électronique avec des éléments de conception 3D, incorporant une palette de couleurs complémentaires et la prise en charge du thème sombre. Il comporte des fiches de produits, une barre de navigation et un pied de page, le tout stylisé avec Tailwind CSS.