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
Glassmorphism Aménagement d’entreprise
Un composant de mise en page glassmorphism simple et réactif avec prise en charge du mode sombre à l’aide de Tailwind CSS, avec des tons de terre.
Composant de mise en page des médias sociaux
Un composant de mise en page de médias sociaux réactif et complexe inspiré de la 3D avec des couleurs vives et une prise en charge du thème sombre à l’aide de Tailwind CSS. Il comprend un en-tête avec un logo et une navigation, une zone de contenu principale avec des cartes dynamiques pour les messages et une barre latérale pour les profils d’utilisateurs et les sujets tendance. Chaque élément est conçu pour donner un sentiment de profondeur et d’interaction.
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.