Composant Infographie
Composant d’infographie avec style Neumorphisme, palette de couleurs en niveaux de gris, mise en page simple, à des fins de tableau de bord, réactif avec prise en charge du thème sombre
HTML Code
<div class="p-4 md:p-8 bg-gray-200 dark:bg-gray-800 antialiased font-sans">
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<!-- Card 1 -->
<div class="rounded-lg p-6 shadow-neumorphism-light dark:shadow-neumorphism-dark">
<div class="text-gray-700 dark:text-gray-300 mb-4">
<h3 class="text-lg font-semibold mb-2">Total Users</h3>
<p class="text-3xl font-bold">15,250</p>
</div>
<div class="flex items-center justify-between text-gray-600 dark:text-gray-400 text-sm">
<span>Since last month</span>
<span class="text-green-500 dark:text-green-400">+ 5.2%</span>
</div>
</div>
<!-- Card 2 -->
<div class="rounded-lg p-6 shadow-neumorphism-light dark:shadow-neumorphism-dark">
<div class="text-gray-700 dark:text-gray-300 mb-4">
<h3 class="text-lg font-semibold mb-2">Revenue</h3>
<p class="text-3xl font-bold">$150,000</p>
</div>
<div class="flex items-center justify-between text-gray-600 dark:text-gray-400 text-sm">
<span>Since last month</span>
<span class="text-green-500 dark:text-green-400">+ 8.1%</span>
</div>
</div>
<!-- Card 3 -->
<div class="rounded-lg p-6 shadow-neumorphism-light dark:shadow-neumorphism-dark">
<div class="text-gray-700 dark:text-gray-300 mb-4">
<h3 class="text-lg font-semibold mb-2">New Orders</h3>
<p class="text-3xl font-bold">750</p>
</div>
<div class="flex items-center justify-between text-gray-600 dark:text-gray-400 text-sm">
<span>Since last month</span>
<span class="text-red-500 dark:text-red-400">- 2.5%</span>
</div>
</div>
</div>
<!-- Include custom shadow styles for Neumorphism -->
<style>
.shadow-neumorphism-light {
box-shadow: 7px 7px 15px #bebebe, -7px -7px 15px #ffffff;
}
.dark .shadow-neumorphism-dark {
box-shadow: 7px 7px 15px #444444, -7px -7px 15px #666666;
}
</style>
</div>Composants associés
Composant Infographie
Composant d’infographie réactif avec un design rétro/vintage, une palette de couleurs monochromatiques et une prise en charge du thème sombre pour les sites Web d’entreprise.
Composant Infographie
Infographie Composant pour portfolio - Material Design, Palette de couleurs analogue, Complexité modérée, Réactif, Prise en charge du thème sombre
Memphis_Muted_Infographics_Component_Government
Un composant infographique pour le gouvernement/les services publics, inspiré du design de Memphis avec une palette de couleurs sourdes/désaturées. Présente des géométries audacieuses, des motifs ludiques et une mise en page réactive avec prise en charge du mode sombre. Affiche visuellement les statistiques et les informations clés.