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
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.
Volet Composantes sociales
Un composant social brutaliste présentant un design audacieux avec un contraste élevé, des effets réactifs et une prise en charge du thème sombre à l’aide de Tailwind CSS. Comprend des avatars d’utilisateurs, des liens vers les réseaux sociaux et des images de remplacement.
Volet Composantes sociales
Un composant de médias sociaux simple et réactif avec des animations attrayantes et un thème sombre, utilisant Tailwind CSS.