Composant de tableau de bord simple
Composant de tableau de bord simple et réactif avec les principes de conception matérielle et la palette de couleurs vives.
HTML Code
<div class="min-h-screen bg-gray-100 dark:bg-gray-900 p-4">
<div class="max-w-4xl mx-auto grid grid-cols-1 md:grid-cols-2 gap-4">
<div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
<h2 class="text-xl font-bold text-gray-800 dark:text-white mb-4">Sales Overview</h2>
<div class="flex items-center justify-between">
<p class="text-3xl font-semibold text-blue-600 dark:text-blue-400">$12,345</p>
<span class="text-green-500 dark:text-green-400">+5.2%</span>
</div>
</div>
<div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
<h2 class="text-xl font-bold text-gray-800 dark:text-white mb-4">New Users</h2>
<div class="flex items-center justify-between">
<p class="text-3xl font-semibold text-purple-600 dark:text-purple-400">1,234</p>
<span class="text-red-500 dark:text-red-400">-1.1%</span>
</div>
</div>
<div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6 col-span-full">
<h2 class="text-xl font-bold text-gray-800 dark:text-white mb-4">Recent Activity</h2>
<ul>
<li class="flex items-center mb-4">
<img class="w-10 h-10 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
<div>
<p class="text-gray-800 dark:text-white font-semibold">John Doe</p>
<p class="text-gray-600 dark:text-gray-400 text-sm">Purchased a product</p>
</div>
</li>
<li class="flex items-center">
<img class="w-10 h-10 rounded-full mr-4" src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar">
<div>
<p class="text-gray-800 dark:text-white font-semibold">Jane Smith</p>
<p class="text-gray-600 dark:text-gray-400 text-sm">Left a review</p>
</div>
</li>
</ul>
</div>
</div>
</div>Composants associés
Composante des composantes interactives
Un composant interactif pour les médias sociaux avec une palette de couleurs pastel, une complexité modérée, un design réactif et une prise en charge du mode sombre, construit avec Tailwind CSS et suivant les principes de conception matérielle. Il utilise des images factices de picsum.photos et des avatars de randomuser.me.
Composantes interactives Composante 25
Un composant interactif de style Material Design avec une disposition en grille, un design réactif et la prise en charge du thème sombre.
Fiche produit brutaliste
Un composant simple de carte produit interactive pour le e-commerce, avec un design brutaliste en niveaux de gris. Il comporte une image de produit, un titre, un prix et un bouton « Ajouter au panier ». Le composant est réactif et prend en charge le mode sombre. Des effets de survol sont inclus pour l’interactivité.