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 tableaux de bord simple et réactif conçu pour la présentation de portefeuilles, avec des micro-interactions et axé sur les tons de terre. Il prend en charge le thème sombre en utilisant Tailwind CSS.
Industrial_Sports_Dashboard
Un composant de tableau de bord de complexité modérée pour les applications de sport/fitness avec un style de design industriel, avec des tons de terre et une mise en page réactive avec prise en charge du mode sombre. Affiche les indicateurs clés, les activités récentes et les performances de l’équipe/individuelle.
Composant Tableaux de bord
Composant de tableaux de bord réactifs avec micro-interactions, schéma de couleurs en niveaux de gris et niveau de complexité complexe adapté à l’objectif du blog/contenu. Prend en charge le thème sombre.