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
Componente Dashboard
Un componente minimalista della dashboard che mostra un design piatto con effetti reattivi e supporto per temi scuri, costruito utilizzando Tailwind CSS.
Cruscotto aziendale retrò
Un componente dashboard in scala di grigi retrò/vintage per siti Web aziendali/aziendali, con complessità moderata e design reattivo. Supporta il tema scuro utilizzando il prefisso Tailwind CSS dark: per lo stile. Immagini provenienti da picsum.photos e avatar da randomuser.me.
Componente Dashboard
Un componente di dashboard semplice e reattivo progettato per la presentazione del portafoglio, con microinterazioni e focalizzato sui toni della terra. Supporta il tema scuro utilizzando Tailwind CSS.