Composant de conteneur
Un conteneur de tableau de bord simple et réactif avec des micro-interactions attrayantes et un thème sombre, axé sur des couleurs analogues.
HTML Code
<div class="bg-gray-100 dark:bg-gray-900 p-6 rounded-lg shadow-lg hover:shadow-xl transition-shadow duration-300">
<h1 class="text-2xl font-semibold text-gray-800 dark:text-gray-200 mb-4">Dashboard</h1>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div class="bg-blue-200 dark:bg-blue-800 p-4 rounded-lg hover:scale-105 transition-transform duration-300">
<div class="flex items-center mb-2">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-2">
<span class="text-lg font-medium text-blue-700 dark:text-blue-300">User Profile</span>
</div>
<img src="https://picsum.photos/300/200?random=1" alt="Sample Image" class="w-full h-auto rounded-lg">
</div>
<div class="bg-green-200 dark:bg-green-800 p-4 rounded-lg hover:scale-105 transition-transform duration-300">
<div class="flex items-center mb-2">
<img src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-2">
<span class="text-lg font-medium text-green-700 dark:text-green-300">Analytics</span>
</div>
<img src="https://picsum.photos/300/200?random=2" alt="Sample Image" class="w-full h-auto rounded-lg">
</div>
<div class="bg-red-200 dark:bg-red-800 p-4 rounded-lg hover:scale-105 transition-transform duration-300">
<div class="flex items-center mb-2">
<img src="https://randomuser.me/api/portraits/men/2.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-2">
<span class="text-lg font-medium text-red-700 dark:text-red-300">Notifications</span>
</div>
<img src="https://picsum.photos/300/200?random=3" alt="Sample Image" class="w-full h-auto rounded-lg">
</div>
<div class="bg-yellow-200 dark:bg-yellow-800 p-4 rounded-lg hover:scale-105 transition-transform duration-300">
<div class="flex items-center mb-2">
<img src="https://randomuser.me/api/portraits/women/2.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-2">
<span class="text-lg font-medium text-yellow-700 dark:text-yellow-300">Settings</span>
</div>
<img src="https://picsum.photos/300/200?random=4" alt="Sample Image" class="w-full h-auto rounded-lg">
</div>
</div>
</div>Composants associés
Composant de conteneur
Un composant de conteneur de style rétro/vintage pour les portfolios, avec une palette de couleurs monochromatiques et la prise en charge du mode sombre.
Composant de conteneur
Un composant de conteneur de portefeuille skeuomorphe avec un thème sombre et un design réactif, présentant le travail et les produits avec des éléments interactifs.
Glassmorphism Portfolio Conteneur
Un composant de conteneur Glassmorphism réactif avec prise en charge du mode sombre adapté à un site Web de portfolio utilisant Tailwind CSS. Il présente un effet de verre givré, une palette de couleurs triadique, plusieurs éléments interactifs et utilise picsum.photos pour les images et randomuser.me pour les avatars.