Grille de tableau de bord Neumorphism
Composant de tableau de bord de mise en page de grille de neumorphisme avec schéma de couleurs complémentaires
HTML Code
<div class="dark:bg-gray-900 dark:text-white min-h-screen p-10">
<div class="grid grid-cols-1 md:grid-cols-2 gap-10">
<!-- Card 1 -->
<div class="dark:bg-gray-800 bg-gray-200 dark:shadow-xl shadow-md rounded-lg p-6">
<h2 class="text-xl font-semibold mb-4">Orders</h2>
<div class="flex items-center justify-between">
<p class="text-3xl font-bold">1,234</p>
<svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 dark:text-green-400 text-green-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 12l3-3m0 0l3 3m-3-3v10m0-10a5 5 0 110 10v-10z" />
</svg>
</div>
</div>
<!-- Card 2 -->
<div class="dark:bg-gray-800 bg-gray-200 dark:shadow-xl shadow-md rounded-lg p-6">
<h2 class="text-xl font-semibold mb-4">Revenue</h2>
<div class="flex items-center justify-between">
<p class="text-3xl font-bold">$12,345</p>
<svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 dark:text-blue-400 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3-.895 3-2-1.343-2-3-2zM21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
</div>
</div>
<!-- Card 3 -->
<div class="dark:bg-gray-800 bg-gray-200 dark:shadow-xl shadow-md rounded-lg p-6">
<h2 class="text-xl font-semibold mb-4">Customers</h2>
<div class="flex items-center justify-between">
<p class="text-3xl font-bold">456</p>
<svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 dark:text-red-400 text-red-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-3-3H8a3 3 0 00-3 3v2h5v-2a3 3 0 013-3h1a3 3 0 013 3v2zm-7-2a3 3 0 003 3h1a3 3 0 003-3M12 8a4 4 0 11-8 0 4 4 0 018 0z" />
</svg>
</div>
</div>
<!-- Card 4 -->
<div class="dark:bg-gray-800 bg-gray-200 dark:shadow-xl shadow-md rounded-lg p-6">
<h2 class="text-xl font-semibold mb-4">Products</h2>
<div class="flex items-center justify-between">
<p class="text-3xl font-bold">789</p>
<svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 dark:text-yellow-400 text-yellow-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 8h14M5 8a2 2 0 110-4h14a2 2 0 110 4M5 8v10a2 2 0 002 2h10a2 2 0 002-2V8m-9 4h4" />
</svg>
</div>
</div>
</div>
</div>Composants associés
Composant de disposition de grille de skeuomorphisme
Composant de mise en page de grille Skeuomorphism avec effets réactifs et prise en charge du thème sombre.
Mise en page de la grille de commerce électronique rétro/vintage
Un composant de mise en page de grille réactif, soutenu par un thème sombre, avec un design rétro/vintage et pastel, destiné à l’affichage de produits de commerce électronique. Utilise Tailwind CSS et inclut des images fictives et des avatars.
Composant de mise en page de grille
Un composant de mise en page de grille réactif pour les interfaces de médias sociaux conçu avec un style skeuomorphe, avec des couleurs triadiques, plusieurs éléments interactifs et la prise en charge des thèmes sombres.