Tableau de bord des médias sociaux
Un composant de tableau de bord réactif pour les réseaux sociaux avec des micro-interactions, une palette de couleurs complémentaires, une complexité modérée et une prise en charge du thème sombre à l’aide de Tailwind CSS. Comprend des profils d’utilisateurs avec des avatars de randomuser.me et des flux avec des images de picsum.photos.
HTML Code
<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>Composants associés
Composant Tableaux de bord
Composant de tableaux de bord avec conception Neumorphism, effets réactifs et prise en charge du thème sombre.
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.
Tableau de bord d’entreprise rétro
Un composant de tableau de bord rétro/vintage en niveaux de gris pour les sites Web d’entreprise/d’entreprise, avec une complexité modérée et un design réactif. Prend en charge le thème sombre à l’aide du préfixe Tailwind CSS dark : pour le style. Images provenant de picsum.photos et avatars de randomuser.me.