Composants
Composants d’affichage du contenu
Carte de tableau de bord triadique de conception matérielle
Carte de tableau de bord triadique de conception matérielle
Un composant d’affichage de contenu de tableau de bord simple et réactif avec l’esthétique du Material Design, utilisant une palette de couleurs triadique et la prise en charge du mode sombre. Convient pour afficher des mesures ou des informations clés.
HTML Code
<div class="p-4 md:p-8 bg-gray-100 dark:bg-gray-900 min-h-screen flex items-center justify-center font-sans">
<div class="container mx-auto grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 auto-rows-fr">
<!-- Metric Card 1 (Red/Pinkish) -->
<div class="col-span-1 bg-white dark:bg-gray-800 rounded-lg shadow-md hover:shadow-lg transition-all duration-300 overflow-hidden relative group">
<div class="relative p-6 pt-16">
<div class="absolute top-0 left-0 right-0 h-16 bg-red-500 dark:bg-red-700 rounded-t-lg"></div>
<div class="relative z-10 -mt-10 mb-4 mx-auto w-20 h-20 rounded-full bg-white dark:bg-gray-700 flex items-center justify-center shadow-md border-4 border-red-200 dark:border-red-800">
<svg xmlns="http://www.w3.org/2000/svg" class="h-10 w-10 text-red-600 dark:text-red-300" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M9.75 17L19.5 7.5M9.75 17V10" />
<path stroke-linecap="round" stroke-linejoin="round" d="M13.5 16.5A.5.5 0 1013.5 15.5A.5.5 0 0013.5 16.5M17.5 12.5A.5.5 0 1017.5 11.5A.5.5 0 0017.5 12.5" />
</svg>
</div>
<h3 class="text-2xl font-bold mb-2 text-gray-900 dark:text-white text-center">Total Sales</h3>
<p class="text-4xl font-extrabold text-red-600 dark:text-red-400 text-center mb-4">$12,345</p>
<p class="text-sm text-gray-600 dark:text-gray-400 text-center">+5% from last month</p>
</div>
<div class="p-4 border-t border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-700 text-center">
<a href="#" class="text-red-600 dark:text-red-400 font-medium hover:underline text-sm">View Details</a>
</div>
<div class="absolute inset-0 bg-red-100 dark:bg-red-900 opacity-0 group-hover:opacity-20 transition-opacity duration-300"></div>
</div>
<!-- Metric Card 2 (Blue/Cyan) -->
<div class="col-span-1 bg-white dark:bg-gray-800 rounded-lg shadow-md hover:shadow-lg transition-all duration-300 overflow-hidden relative group">
<div class="relative p-6 pt-16">
<div class="absolute top-0 left-0 right-0 h-16 bg-blue-500 dark:bg-blue-700 rounded-t-lg"></div>
<div class="relative z-10 -mt-10 mb-4 mx-auto w-20 h-20 rounded-full bg-white dark:bg-gray-700 flex items-center justify-center shadow-md border-4 border-blue-200 dark:border-blue-800">
<svg xmlns="http://www.w3.org/2000/svg" class="h-10 w-10 text-blue-600 dark:text-blue-300" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M5.121 17.892A13.914 13.914 0 0112 16c2.582 0 5.121.75 7.029 2.019M12 15a4 4 0 100-8 4 4 0 000 8z" />
</svg>
</div>
<h3 class="text-2xl font-bold mb-2 text-gray-900 dark:text-white text-center">New Users</h3>
<p class="text-4xl font-extrabold text-blue-600 dark:text-blue-400 text-center mb-4">789</p>
<p class="text-sm text-gray-600 dark:text-gray-400 text-center">+15% week over week</p>
</div>
<div class="p-4 border-t border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-700 text-center">
<a href="#" class="text-blue-600 dark:text-blue-400 font-medium hover:underline text-sm">User Analytics</a>
</div>
<div class="absolute inset-0 bg-blue-100 dark:bg-blue-900 opacity-0 group-hover:opacity-20 transition-opacity duration-300"></div>
</div>
<!-- Metric Card 3 (Green/Lime) -->
<div class="col-span-1 bg-white dark:bg-gray-800 rounded-lg shadow-md hover:shadow-lg transition-all duration-300 overflow-hidden relative group">
<div class="relative p-6 pt-16">
<div class="absolute top-0 left-0 right-0 h-16 bg-green-500 dark:bg-green-700 rounded-t-lg"></div>
<div class="relative z-10 -mt-10 mb-4 mx-auto w-20 h-20 rounded-full bg-white dark:bg-gray-700 flex items-center justify-center shadow-md border-4 border-green-200 dark:border-green-800">
<svg xmlns="http://www.w3.org/2000/svg" class="h-10 w-10 text-green-600 dark:text-green-300" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M7 12l3-3m0 0l3 3m-3-3v8m0-13a9 9 0 110 18A9 9 0 0112 3z" />
</svg>
</div>
<h3 class="text-2xl font-bold mb-2 text-gray-900 dark:text-white text-center">Bounce Rate</h3>
<p class="text-4xl font-extrabold text-green-600 dark:text-green-400 text-center mb-4">3.7<span class="text-xl">%</span></p>
<p class="text-sm text-gray-600 dark:text-gray-400 text-center">-0.5% from previous period</p>
</div>
<div class="p-4 border-t border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-700 text-center">
<a href="#" class="text-green-600 dark:text-green-400 font-medium hover:underline text-sm">View Report</a>
</div>
<div class="absolute inset-0 bg-green-100 dark:bg-green-900 opacity-0 group-hover:opacity-20 transition-opacity duration-300"></div>
</div>
</div>
</div>Composants associés
Carte postale rétro pour les médias sociaux
Un composant de carte postale réactif pour les réseaux sociaux avec une esthétique rétro/vintage des années 80/90, utilisant une palette de couleurs analogue (ciel, sarcelle, violet) avec des accents fuchsia. Dispose d’une prise en charge du mode sombre et d’effets de survol interactifs. Le contenu comprend l’avatar de l’utilisateur, le nom d’utilisateur, l’horodatage, la publication de texte, l’image et les boutons d’action (like, comment, share). Construit avec Tailwind CSS.
Playful_Farming_Content_Card
Une carte d’affichage de contenu simple, ludique et contrastée adaptée aux sites Web agricoles et agricoles, avec des éléments arrondis et la prise en charge du mode sombre.
Composant d’affichage du contenu
Un composant d’affichage nostalgique au design rétro, avec des effets réactifs et une prise en charge du thème sombre.