Volet Composantes sociales
Un composant de médias sociaux réactif conçu avec une esthétique rétro/vintage, doté d’une interface riche avec de multiples éléments interactifs et un thème sombre.
HTML Code
<div class="bg-amber-400 dark:bg-gray-800 rounded-lg shadow-lg p-6 max-w-lg mx-auto">
<h1 class="text-4xl font-bold text-center text-brown-600 dark:text-yellow-400">Retro Social Media</h1>
<div class="mt-6 bg-white dark:bg-gray-900 rounded-lg p-4 shadow-md">
<div class="flex items-center space-x-4">
<img class="w-12 h-12 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
<div>
<h2 class="text-lg font-semibold text-black dark:text-white">John Doe</h2>
<p class="text-gray-700 dark:text-gray-300">@johndoe</p>
</div>
</div>
<p class="mt-4 text-sm text-gray-600 dark:text-gray-400">Just enjoyed a retro gaming night! Who's up for some Mario Kart? 🎮</p>
<img class="mt-4 rounded-lg" src="https://picsum.photos/400/200?random=1" alt="Retro Gaming">
<div class="mt-4 flex justify-between">
<button class="bg-purple-600 text-white px-4 py-2 rounded-lg hover:bg-purple-700 dark:bg-purple-700 dark:hover:bg-purple-600">Like ❤️</button>
<button class="bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 dark:bg-blue-700 dark:hover:bg-blue-600">Comment 💬</button>
<button class="bg-green-600 text-white px-4 py-2 rounded-lg hover:bg-green-700 dark:bg-green-700 dark:hover:bg-green-600">Share 🔗</button>
</div>
</div>
<div class="mt-6 bg-white dark:bg-gray-900 rounded-lg p-4 shadow-md">
<h3 class="text-lg font-semibold text-black dark:text-white">Recent Posts</h3>
<div class="mt-4 space-y-4">
<div class="flex items-center space-x-4">
<img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/women/2.jpg" alt="User Avatar">
<div>
<h4 class="text-md font-semibold text-black dark:text-white">Jane Smith</h4>
<p class="text-gray-600 dark:text-gray-300">Loved the concert last night! 🎤</p>
</div>
</div>
<div class="flex items-center space-x-4">
<img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/5.jpg" alt="User Avatar">
<div>
<h4 class="text-md font-semibold text-black dark:text-white">Mike Lee</h4>
<p class="text-gray-600 dark:text-gray-300">Throwback to my first Car Rally! 🚗</p>
</div>
</div>
</div>
</div>
</div>Composants associés
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.
Volet Composantes sociales
Une composante sociale pour un tableau de bord au design brutaliste et pastel. Il affiche un profil utilisateur avec un nom, un titre et un avatar, et comprend des boutons pour les actions sociales telles que le suivi, la messagerie et le partage. Le composant est réactif et prend en charge le mode sombre.
Volet Composantes sociales
Composants sociaux Composant avec un design brutal, des effets réactifs et une prise en charge du thème sombre.