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
Un composant de section de commentaires simple et réactif avec des couleurs neutres froides et la prise en charge du mode sombre, adapté aux forums ou aux plateformes communautaires.
Section des commentaires de Cyberpunk Autumn
Une simple section de commentaires sur le thème du cyberpunk pour un tableau de bord, avec des arrière-plans sombres, des accents de néon et de riches couleurs d’automne. Entièrement réactif avec prise en charge du mode sombre.
Composant de la section des commentaires avec style neumorphisme
Composant avec conception Neumorphism, effets réactifs et prise en charge du thème sombre. Aucun code JavaScript n’est inclus.