Composant Tableaux de bord
Un composant de tableaux de bord réactifs pour les applications de médias sociaux avec des micro-interactions et un schéma de couleurs triadique, construit à l’aide de Tailwind CSS.
HTML Code
<div class="bg-gray-800 dark:bg-gray-900 p-6 rounded-lg shadow-md max-w-md mx-auto">
<h2 class="text-2xl font-bold text-white mb-4">Dashboard</h2>
<div class="grid grid-cols-1 gap-4">
<div class="bg-teal-400 dark:bg-teal-600 hover:scale-105 transition-transform duration-200 p-4 rounded-lg flex items-center">
<img src="https://picsum.photos/50/50" alt="Profile" class="rounded-full mr-3">
<div class="flex-1">
<h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">User Engagement</h3>
<p class="text-sm text-gray-600 dark:text-gray-400">Check how users interact with your posts.</p>
</div>
</div>
<div class="bg-orange-400 dark:bg-orange-600 hover:scale-105 transition-transform duration-200 p-4 rounded-lg flex items-center">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User 1" class="rounded-full mr-3">
<div class="flex-1">
<h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">New Followers</h3>
<p class="text-sm text-gray-600 dark:text-gray-400">See your growth in followers over time.</p>
</div>
</div>
<div class="bg-purple-400 dark:bg-purple-600 hover:scale-105 transition-transform duration-200 p-4 rounded-lg flex items-center">
<img src="https://randomuser.me/api/portraits/women/1.jpg" alt="User 2" class="rounded-full mr-3">
<div class="flex-1">
<h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Post Performance</h3>
<p class="text-sm text-gray-600 dark:text-gray-400">Evaluate the performance of your latest posts.</p>
</div>
</div>
</div>
</div>Composants associés
Composant de tableau de bord Luxury/Premium Marketplace
Un composant de tableau de bord complexe et réactif pour une place de marché multifournisseur avec un style de design luxueux/haut de gamme. Dispose d’une palette de couleurs bleue d’entreprise professionnelle, d’une typographie sophistiquée et d’une prise en charge du mode sombre. Comprend des sections pour une vue d’ensemble, les ventes récentes, les meilleurs produits et des statistiques rapides.
Brutalist_Dating_Dashboard
Un composant de tableau de bord de style brutaliste pour les plateformes de rencontres et les réseaux sociaux, avec un design audacieux, un contraste élevé et une palette de couleurs violet/violet. Réactif avec prise en charge du mode sombre.
Tableau de bord des médias sociaux
Un composant de tableau de bord réactif pour les réseaux sociaux avec des micro-interactions, une palette de couleurs complémentaires, une complexité modérée et une prise en charge du thème sombre à l’aide de Tailwind CSS. Comprend des profils d’utilisateurs avec des avatars de randomuser.me et des flux avec des images de picsum.photos.