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.
HTML Code
<div class="min-h-screen bg-gray-100 dark:bg-gray-900 p-8">
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
<!-- Content Card 1 -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden transform transition duration-300 hover:scale-105">
<img class="w-full h-48 object-cover" src="https://picsum.photos/seed/picsum/600/400" alt="Article thumbnail">
<div class="p-6">
<h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-2">Article Title 1</h2>
<p class="text-gray-600 dark:text-gray-400 mb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla convallis libero et diam euismod, vitae elementum.</p>
<div class="flex items-center justify-between">
<div class="flex items-center">
<img class="w-8 h-8 rounded-full mr-2" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Author Avatar">
<span class="text-gray-700 dark:text-gray-300 text-sm">John Doe</span>
</div>
<a href="#" class="text-gray-900 dark:text-white hover:underline">Read More →</a>
</div>
</div>
</div>
<!-- Content Card 2 -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden transform transition duration-300 hover:scale-105">
<img class="w-full h-48 object-cover" src="https://picsum.photos/seed/picsum/600/400" alt="Article thumbnail">
<div class="p-6">
<h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-2">Article Title 2</h2>
<p class="text-gray-600 dark:text-gray-400 mb-4">Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
<div class="flex items-center justify-between">
<div class="flex items-center">
<img class="w-8 h-8 rounded-full mr-2" src="https://randomuser.me/api/portraits/women/44.jpg" alt="Author Avatar">
<span class="text-gray-700 dark:text-gray-300 text-sm">Jane Smith</span>
</div>
<a href="#" class="text-gray-900 dark:text-white hover:underline">Read More →</a>
</div>
</div>
</div>
<!-- Content Card 3 -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden transform transition duration-300 hover:scale-105">
<img class="w-full h-48 object-cover" src="https://picsum.photos/seed/picsum/600/400" alt="Article thumbnail">
<div class="p-6">
<h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-2">Article Title 3</h2>
<p class="text-gray-600 dark:text-gray-400 mb-4">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
<div class="flex items-center justify-between">
<div class="flex items-center">
<img class="w-8 h-8 rounded-full mr-2" src="https://randomuser.me/api/portraits/men/3.jpg" alt="Author Avatar">
<span class="text-gray-700 dark:text-gray-300 text-sm">Peter Jones</span>
</div>
<a href="#" class="text-gray-900 dark:text-white hover:underline">Read More →</a>
</div>
</div>
</div>
</div>
</div>Composants associés
Composant Tableaux de bord
Un composant de tableau de bord d’inspiration rétro conçu pour les sites Web d’entreprise ou d’entreprise qui combine l’esthétique des années 80/90 avec une mise en page et une palette de couleurs modernes. Il est réactif et prend en charge le thème sombre, avec des éléments interactifs tels que des cartes pour les statistiques, les profils d’utilisateurs, etc.
Neumorphic_Forum_Dashboard
Un composant de tableau de bord neumorphique simple et réactif avec une palette de couleurs forêt/vert, conçu pour les plateformes de forum et de communauté, et inclut la prise en charge du mode sombre.
Tableau de bord sépia de Memphis
Un composant de tableau de bord à l’esthétique Memphis Design, avec des formes géométriques audacieuses et une palette de couleurs chaudes sépia/marron, adapté aux sites Web d’entreprise et d’entreprise. Comprend une réactivité complète et la prise en charge du mode sombre.