Composant Composants fonctionnels - Interface utilisateur en mode sombre
Un composant de médias sociaux réactif conçu avec le mode sombre et les tons de terre, adapté aux interfaces de réseaux sociaux. Comprend des avatars d’utilisateurs, du contenu de publication et des boutons d’interaction.
HTML Code
<div class="bg-gray-800 text-white p-4 rounded-lg shadow-md max-w-lg mx-auto dark:bg-gray-900">
<div class="flex items-center mb-4">
<img class="w-12 h-12 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
<div class="ml-3">
<h2 class="text-lg font-semibold">John Doe</h2>
<p class="text-gray-400">@john_doe</p>
</div>
</div>
<div class="mb-4">
<p class="text-gray-300">Just had a great day exploring the mountains! 🌄</p>
<img class="mt-2 rounded-lg" src="https://picsum.photos/600/300?random=1" alt="Nature Image">
</div>
<div class="flex justify-between text-gray-400">
<button class="flex items-center hover:text-white">
<svg class="w-5 h-5 mr-1" fill="currentColor" viewBox="0 0 20 20"><path d="M..."/></svg>
<span class="text-sm">Like</span>
</button>
<button class="flex items-center hover:text-white">
<svg class="w-5 h-5 mr-1" fill="currentColor" viewBox="0 0 20 20"><path d="M..."/></svg>
<span class="text-sm">Comment</span>
</button>
<button class="flex items-center hover:text-white">
<svg class="w-5 h-5 mr-1" fill="currentColor" viewBox="0 0 20 20"><path d="M..."/></svg>
<span class="text-sm">Share</span>
</button>
</div>
</div>Composants associés
Composant fonctionnel du blog
Composant fonctionnel avec conception 3D, palette de couleurs complémentaire, complexité modérée pour les blogs, réactif avec prise en charge du thème sombre. Pas de JS, juste du HTML et du Tailwind.
Composants fonctionnels
Un composant Web imitant ses homologues du monde réel dans un style d’entreprise avec une palette de couleurs complémentaire, une mise en page simple et un design réactif avec prise en charge du mode sombre.
Composants fonctionnels
Composante de rencontre/sociale minimaliste/flat design avec un schéma de couleurs arc-en-ciel dégradé pour l’affichage d’un profil d’utilisateur.