Composant de la section des commentaires
Une section de commentaires réactive conçue pour les plateformes de commerce électronique avec une interface utilisateur en mode sombre et une palette de couleurs triadique.
HTML Code
<div class="bg-gray-900 text-white p-6 rounded-lg shadow-lg">
<h2 class="text-xl font-bold mb-4">Customer Reviews</h2>
<div class="space-y-4">
<div class="flex items-start">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-12 h-12 rounded-full mr-3">
<div class="flex-1">
<div class="bg-gray-800 p-4 rounded-lg shadow-md">
<h3 class="font-semibold">John Doe</h3>
<p class="text-gray-300">This product is fantastic! It has exceeded my expectations.</p>
<div class="mt-2 flex items-center">
<span class="text-yellow-400">★★★★☆</span>
<span class="ml-2 text-sm text-gray-500">2 days ago</span>
</div>
</div>
</div>
</div>
<div class="flex items-start">
<img src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar" class="w-12 h-12 rounded-full mr-3">
<div class="flex-1">
<div class="bg-gray-800 p-4 rounded-lg shadow-md">
<h3 class="font-semibold">Jane Smith</h3>
<p class="text-gray-300">Great quality! I loved the design and it fits perfectly.</p>
<div class="mt-2 flex items-center">
<span class="text-yellow-400">★★★★★</span>
<span class="ml-2 text-sm text-gray-500">1 week ago</span>
</div>
</div>
</div>
</div>
<div class="flex items-start">
<img src="https://randomuser.me/api/portraits/men/2.jpg" alt="Avatar" class="w-12 h-12 rounded-full mr-3">
<div class="flex-1">
<div class="bg-gray-800 p-4 rounded-lg shadow-md">
<h3 class="font-semibold">Michael Johnson</h3>
<p class="text-gray-300">Not what I expected, but still a decent product.</p>
<div class="mt-2 flex items-center">
<span class="text-yellow-400">★★★☆☆</span>
<span class="ml-2 text-sm text-gray-500">2 weeks ago</span>
</div>
</div>
</div>
</div>
</div>
<div class="mt-6 p-4 bg-gray-800 rounded-lg">
<h3 class="text-lg font-semibold">Leave a Comment</h3>
<form>
<textarea class="w-full p-2 mb-2 bg-gray-700 text-white rounded-lg" rows="3" placeholder="Write your review..."></textarea>
<div class="flex justify-between items-center">
<div class="flex items-center">
<img src="https://randomuser.me/api/portraits/men/3.jpg" alt="Avatar" class="w-8 h-8 rounded-full mr-2">
<span class="text-white">User123</span>
</div>
<button class="bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-500 focus:outline-none">Submit</button>
</div>
</form>
</div>
</div>Composants associés
Composant de la section des commentaires
Composant avec conception Neumorphism, schéma de couleurs triadique et complexité modérée pour les médias sociaux, mis en œuvre à l’aide de Tailwind CSS avec un design réactif et une prise en charge du thème sombre.
Composant de la section des commentaires
Un composant simple de la section des commentaires conçu avec une esthétique rétro/vintage et des tons de terre. Il présente un design nostalgique rappelant les années 80 et 90, conçu pour les interfaces de médias sociaux, avec prise en charge du mode sombre.
Composant de la section des commentaires
Un composant de section de commentaires réactif conçu pour les sites Web d’entreprise, avec des animations attrayantes, des couleurs vives et une prise en charge du mode sombre.