Volet Composantes sociales
Une section de composants sociaux simple et réactive pour un tableau de bord, avec une palette de couleurs monochromatique et un design inspiré du Skeuomorphisme.
HTML Code
<div class="p-4 bg-gray-200 dark:bg-gray-800 shadow-xl rounded-lg">
<h2 class="text-xl font-bold mb-4 text-gray-800 dark:text-gray-200">Social Feed</h2>
<div class="space-y-4">
<!-- Post 1 -->
<div class="bg-gray-100 dark:bg-gray-700 p-4 rounded-lg shadow-md">
<div class="flex items-center mb-2">
<img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-gray-300 dark:border-gray-500 mr-3">
<div>
<p class="font-semibold text-gray-900 dark:text-gray-100">John Doe</p>
<p class="text-sm text-gray-600 dark:text-gray-400">2 hours ago</p>
</div>
</div>
<p class="text-gray-800 dark:text-gray-200 mb-3">Exploring the new dashboard features! Really intuitive and clean design. #dashboard #UIUX</p>
<img src="https://picsum.photos/400/200?random=1" alt="Post Image" class="w-full rounded-md shadow-inner mb-2">
<div class="flex justify-between text-gray-600 dark:text-gray-400 text-sm">
<span>❤️ 23 Likes</span>
<span>💬 5 Comments</span>
</div>
</div>
<!-- Post 2 -->
<div class="bg-gray-100 dark:bg-gray-700 p-4 rounded-lg shadow-md">
<div class="flex items-center mb-2">
<img src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-gray-300 dark:border-gray-500 mr-3">
<div>
<p class="font-semibold text-gray-900 dark:text-gray-100">Jane Smith</p>
<p class="text-sm text-gray-600 dark:text-gray-400">Yesterday</p>
</div>
</div>
<p class="text-gray-800 dark:text-gray-200 mb-3">Just launched my new project! Check it out in the updated dashboard. Let me know your thoughts! #projectlaunch #dashboard</p>
<div class="flex justify-between text-gray-600 dark:text-gray-400 text-sm">
<span>❤️ 45 Likes</span>
<span>💬 12 Comments</span>
</div>
</div>
<!-- Post 3 -->
<div class="bg-gray-100 dark:bg-gray-700 p-4 rounded-lg shadow-md">
<div class="flex items-center mb-2">
<img src="https://randomuser.me/api/portraits/men/20.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-gray-300 dark:border-gray-500 mr-3">
<div>
<p class="font-semibold text-gray-900 dark:text-gray-100">Peter Jones</p>
<p class="text-sm text-gray-600 dark:text-gray-400">3 days ago</p>
</div>
</div>
<p class="text-gray-800 dark:text-gray-200 mb-3">The new analytics module in the dashboard is a game-changer! So much data presented clearly. Highly recommend! #analytics #datadriven</p>
<img src="https://picsum.photos/400/200?random=2" alt="Post Image" class="w-full rounded-md shadow-inner mb-2">
<div class="flex justify-between text-gray-600 dark:text-gray-400 text-sm">
<span>❤️ 60 Likes</span>
<span>💬 8 Comments</span>
</div>
</div>
</div>
</div>Composants associés
Volet Composantes sociales
Un composant social simple et élégant conçu pour les plateformes musicales et audio avec une palette de couleurs à contraste élevé et un style luxueux, avec le profil de l’utilisateur, les abonnés et les mesures d’engagement. Entièrement réactif avec prise en charge du mode sombre.
Volet Composantes sociales
Un composant social simple conçu avec un style skeuomorphe utilisant des couleurs vives pour un site d’entreprise professionnel, un design réactif avec prise en charge du mode sombre.
Composantes sociales
Un composant Web présentant un design glassmorphism avec des éléments translucides et des effets de flou semblables à du verre dépoli, des effets réactifs et la prise en charge du thème sombre.