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 Tableaux de bord
Un composant de tableaux de bord complexe conçu pour le mode sombre avec une palette de couleurs monochromatiques pour une utilisation professionnelle/d’entreprise. Il comporte des éléments interactifs riches et est réactif.
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.
Composant Tableaux de bord
Composant de tableaux de bord réactifs avec micro-interactions, schéma de couleurs en niveaux de gris et niveau de complexité complexe adapté à l’objectif du blog/contenu. Prend en charge le thème sombre.