Composant de tableau de bord
Un composant de tableau de bord simple avec un design 3D et une palette de couleurs pastel, réactif et avec prise en charge du mode sombre.
HTML Code
<div class="flex flex-wrap bg-gray-100 dark:bg-gray-900">
<div class="w-full md:w-1/2 xl:w-1/3 p-6">
<div class="bg-white dark:bg-gray-800 border-b-4 border-pastel-blue rounded-lg shadow-xl px-5 py-4">
<div class="flex flex-row items-center">
<div class="flex-shrink pr-4">
<div class="rounded-full p-5 bg-gray-200 dark:bg-gray-700">
<i class="fas fa-users fa-2x fa-inverse text-gray-700 dark:text-gray-200"></i>
</div>
</div>
<div class="flex-1 text-right md:text-center">
<h2 class="font-bold uppercase text-gray-600 dark:text-gray-400">Total Users</h2>
<p class="font-bold text-3xl text-gray-800 dark:text-gray-200">2,156 <span class="text-pastel-green text-base"><i class="fas fa-arrow-up"></i> 10%</span></p>
</div>
</div>
</div>
</div>
<div class="w-full md:w-1/2 xl:w-1/3 p-6">
<div class="bg-white dark:bg-gray-800 border-b-4 border-pastel-pink rounded-lg shadow-xl px-5 py-4">
<div class="flex flex-row items-center">
<div class="flex-shrink pr-4">
<div class="rounded-full p-5 bg-gray-200 dark:bg-gray-700">
<i class="fas fa-chart-line fa-2x fa-inverse text-gray-700 dark:text-gray-200"></i>
</div>
</div>
<div class="flex-1 text-right md:text-center">
<h2 class="font-bold uppercase text-gray-600 dark:text-gray-400">Total Sales</h2>
<p class="font-bold text-3xl text-gray-800 dark:text-gray-200">$5,340 <span class="text-pastel-red text-base"><i class="fas fa-arrow-down"></i> 5%</span></p>
</div>
</div>
</div>
</div>
<div class="w-full md:w-1/2 xl:w-1/3 p-6">
<div class="bg-white dark:bg-gray-800 border-b-4 border-pastel-yellow rounded-lg shadow-xl px-5 py-4">
<div class="flex flex-row items-center">
<div class="flex-shrink pr-4">
<div class="rounded-full p-5 bg-gray-200 dark:bg-gray-700">
<i class="fas fa-wallet fa-2x fa-inverse text-gray-700 dark:text-gray-200"></i>
</div>
</div>
<div class="flex-1 text-right md:text-center">
<h2 class="font-bold uppercase text-gray-600 dark:text-gray-400">Total Revenue</h2>
<p class="font-bold text-3xl text-gray-800 dark:text-gray-200">$1,234 <span class="text-pastel-green text-base"><i class="fas fa-arrow-up"></i> 12%</span></p>
</div>
</div>
</div>
</div>
</div>Composants associés
Composant Tableaux de bord
Un composant de tableau de bord avec un design réactif et une prise en charge du mode sombre à l’aide de Tailwind CSS.
Composant Tableaux de bord
Un composant de tableau de bord réactif conçu avec des éléments 3D et des tons Terre, présentant la visualisation des données et les panneaux de contrôle avec prise en charge du thème sombre.
Composant Tableaux de bord
Un composant de tableaux de bord complexe conçu pour le mode sombre avec une palette de couleurs monochromatiques pour une utilisation professionnelle/d’entreprise. Il comporte des éléments interactifs riches et est réactif.