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 mise en page de grille
Un composant de mise en page de grille réactif suivant les principes de conception matérielle, avec des effets d’ombre et la prise en charge du mode sombre, à l’aide de Tailwind CSS.
Monospace_Developer_Food_Grid_Layout
Un composant de mise en page de grille simple, sur le thème du monospace, pour les sites Web de restauration, avec un design épuré et une palette de couleurs monochromes avec prise en charge du mode sombre.
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.