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
Composant de conteneur
Un composant de conteneur conçu dans un style brutaliste pour le commerce électronique, avec une mise en page réactive avec prise en charge du thème sombre, utilisant Tailwind CSS.
Composant de conteneur
Un composant de conteneur réactif simple pour la consommation de blog/contenu avec des micro-interactions et la prise en charge du thème sombre à l’aide de Tailwind CSS.
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.