Componente Dashboard
Componente Dashboard reattivo con microinterazioni, combinazione di colori in scala di grigi e livello di complessità complesso su misura per scopi di blog/contenuti. Supporta il tema scuro.
Codice HTML
<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>Componenti correlati
Componente cruscotto brutalista in scala di grigi
Un layout di dashboard semplice, in stile brutalista, in scala di grigi per siti Web aziendali/aziendali, reattivo con supporto per la modalità oscura, costruito con Tailwind CSS.
Componente Dashboard
Un componente dashboard di ispirazione retrò progettato per siti Web aziendali o aziendali che combina l'estetica degli anni '80/'90 con un layout e una combinazione di colori moderni. È reattivo e supporta il tema scuro, con elementi interattivi come schede per statistiche, profili utente e altro ancora.
Social Media Dashboard
Un componente reattivo della dashboard dei social media con microinterazioni, combinazione di colori complementari, complessità moderata e supporto per temi scuri utilizzando Tailwind CSS. Include profili utente con avatar da randomuser.me e feed con immagini da picsum.photos.