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
Infographie rétro
Un composant infographique rétro/vintage simple et réactif pour les portfolios avec prise en charge du mode sombre. Utilise une palette de couleurs complémentaires et des éléments minimaux.
Composant Infographie
Un composant d’infographie réactif avec des micro-interactions attrayantes et une prise en charge du thème sombre à l’aide de Tailwind CSS.
Composant Infographie
Un composant d’infographie conçu avec skeuomorphism, avec des effets réactifs et la prise en charge des thèmes sombres, à l’aide de Tailwind CSS.