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 minimaliste présentant un design plat avec des effets réactifs et une prise en charge du thème sombre, construit à l’aide de Tailwind CSS.
Composant Tableaux de bord
Un composant de tableau de bord réactif conçu avec des éléments 3D et des tons Terre, présentant la visualisation des données et les panneaux de contrôle avec prise en charge du thème sombre.
Composant Tableaux de bord
Un composant de tableaux de bord simple et réactif conçu pour la présentation de portefeuilles, avec des micro-interactions et axé sur les tons de terre. Il prend en charge le thème sombre en utilisant Tailwind CSS.