Composants
Composants fonctionnels
Composant Composants fonctionnels - Interface utilisateur en mode sombre
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
Composants fonctionnels
Un composant de portefeuille minimaliste conçu avec Tailwind CSS, avec une palette de couleurs vives et prenant en charge le mode sombre. Ce composant est destiné à présenter des travaux ou des produits et comprend des images et des espaces réservés d’avatar.
Composants fonctionnels
Composant fonctionnel pour le commerce électronique avec un design réactif et la prise en charge du thème sombre.