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 de médias sociaux réactif avec prise en charge du mode sombre pour les sites Web d’entreprise, avec une palette de couleurs triadique.
Volet Composantes sociales
Composants sociaux Composant avec un design brutal, des effets réactifs et une prise en charge du thème sombre.
Composantes sociales
Un composant social skeuomorphe conçu à des fins de blogs/contenu avec des couleurs vives et la prise en charge du mode sombre.