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.
Codice HTML
<div class="container mx-auto p-4 bg-gray-100 dark:bg-gray-900">
<div class="flex flex-col md:flex-row gap-4">
<!-- Sidebar (User Profile) -->
<div class="w-full md:w-1/4 bg-white dark:bg-gray-800 rounded-lg shadow-md p-4 transform transition duration-300 hover:scale-105">
<div class="flex flex-col items-center">
<img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="w-16 h-16 rounded-full mb-4 border-2 border-blue-500">
<h2 class="text-xl font-semibold text-gray-800 dark:text-white">John Doe</h2>
<p class="text-gray-600 dark:text-gray-400">@johndoe</p>
<div class="mt-4 flex gap-4">
<span class="text-blue-500 cursor-pointer hover:underline">Followers: 1.2k</span>
<span class="text-blue-500 cursor-pointer hover:underline">Following: 350</span>
</div>
</div>
</div>
<!-- Main Content (Feed) -->
<div class="w-full md:w-3/4">
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-4 mb-4 transform transition duration-300 hover:scale-105">
<div class="flex items-center mb-4">
<img src="https://randomuser.me/api/portraits/women/45.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-3">
<div>
<p class="font-semibold text-gray-800 dark:text-white">Jane Smith</p>
<p class="text-sm text-gray-500 dark:text-gray-400">2 hours ago</p>
</div>
</div>
<p class="text-gray-700 dark:text-gray-300 mb-4">Enjoying a beautiful day out in the nature! #nature #happy</p>
<img src="https://picsum.photos/600/400" alt="Post Image" class="rounded-lg mb-4">
<div class="flex justify-between text-gray-600 dark:text-gray-400 text-sm">
<span class="cursor-pointer hover:text-blue-500">Likes: 25</span>
<span class="cursor-pointer hover:text-blue-500">Comments: 5</span>
<span class="cursor-pointer hover:text-blue-500">Share</span>
</div>
</div>
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-4 transform transition duration-300 hover:scale-105">
<div class="flex items-center mb-4">
<img src="https://randomuser.me/api/portraits/men/60.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-3">
<div>
<p class="font-semibold text-gray-800 dark:text-white">Peter Jones</p>
<p class="text-sm text-gray-500 dark:text-gray-400">5 hours ago</p>
</div>
</div>
<p class="text-gray-700 dark:text-gray-300 mb-4">New blog post is up! Check it out. #blogging #technology</p>
<div class="flex justify-between text-gray-600 dark:text-gray-400 text-sm">
<span class="cursor-pointer hover:text-blue-500">Likes: 15</span>
<span class="cursor-pointer hover:text-blue-500">Comments: 3</span>
<span class="cursor-pointer hover:text-blue-500">Share</span>
</div>
</div>
</div>
</div>
</div>Componenti correlati
Dashboard_Component
Un componente reattivo del cruscotto finanziario/bancario con uno stile di design artistico/acquerello e una calda combinazione di colori del tramonto. Include il supporto per la modalità oscura e un livello di complessità moderato.
Componente del cruscotto dell'agricoltura di lusso
Un componente dashboard elegante e sofisticato per siti Web di agricoltura e agricoltura, caratterizzato da una combinazione di colori in bianco e nero con un vibrante accento smeraldo. Include metriche chiave, attività recenti ed elementi interattivi, progettati per essere completamente reattivi e supportare la modalità oscura.
Industrial_Sports_Dashboard
Un componente del cruscotto di complessità moderata per applicazioni sportive/fitness con uno stile di design industriale, caratterizzato da toni della terra e layout reattivo con supporto della modalità scura. Visualizza le metriche chiave, le attività recenti e le prestazioni di squadra/individuali.