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 du conteneur 30
Un composant de conteneur de conception 3D réactif qui intègre des éléments tridimensionnels pour plus de profondeur et d’engagement avec la prise en charge du thème sombre.
Luxury_Container_Component
Un composant de conteneur de luxe et haut de gamme pour les entreprises manufacturières/industrielles, doté d’un design sophistiqué, d’une mise en page réactive, d’une prise en charge du mode sombre et d’un schéma arc-en-ciel dégradé multicolore.
Fiche produit e-commerce Neumorphic
Une fiche produit e-commerce simple et réactive avec un style de conception neumorphique en niveaux de gris, avec prise en charge du mode sombre.