Composant de conteneur
Un composant de conteneur minimaliste pour un tableau de bord utilisant Tailwind CSS avec prise en charge du mode sombre.
HTML Code
<div class="bg-gray-100 dark:bg-gray-800 p-6 rounded-lg shadow-md">
<h2 class="text-xl font-semibold text-gray-800 dark:text-white mb-4">Dashboard</h2>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<div class="bg-white dark:bg-gray-700 p-4 rounded-lg shadow">
<h3 class="text-lg font-medium text-gray-800 dark:text-white mb-2">Data Card 1</h3>
<img src="https://picsum.photos/200/100" alt="Data visualization image" class="w-full h-auto rounded-lg mb-2">
<p class="text-gray-600 dark:text-gray-300">Some description of the data card.</p>
</div>
<div class="bg-white dark:bg-gray-700 p-4 rounded-lg shadow">
<h3 class="text-lg font-medium text-gray-800 dark:text-white mb-2">Data Card 2</h3>
<img src="https://picsum.photos/200/100" alt="Data visualization image" class="w-full h-auto rounded-lg mb-2">
<p class="text-gray-600 dark:text-gray-300">Some description of the data card.</p>
</div>
<div class="bg-white dark:bg-gray-700 p-4 rounded-lg shadow">
<h3 class="text-lg font-medium text-gray-800 dark:text-white mb-2">Data Card 3</h3>
<img src="https://picsum.photos/200/100" alt="Data visualization image" class="w-full h-auto rounded-lg mb-2">
<p class="text-gray-600 dark:text-gray-300">Some description of the data card.</p>
</div>
</div>
<div class="mt-6 flex items-center justify-between">
<div class="flex items-center">
<img src="https://randomuser.me/api/portraits/thumb/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-2">
<span class="text-gray-800 dark:text-white font-medium">User Name</span>
</div>
<button class="bg-gray-800 dark:bg-gray-200 text-white dark:text-gray-800 font-semibold py-2 px-4 rounded hover:bg-gray-700 dark:hover:bg-gray-300">Action</button>
</div>
</div>Composants associés
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.
Composant de conteneur
Un conteneur de conception matérielle réactif pour le commerce électronique, avec des couleurs pastel, une prise en charge du mode sombre et des éléments interactifs complexes à l’aide de Tailwind CSS.
Playful_Blog_Container
Un conteneur de contenu de blog ludique et joyeux avec des éléments arrondis et des couleurs semblables à des bonbons, conçu pour la lecture et la consommation de contenu. Il est entièrement réactif et prend en charge le mode sombre.