Composant de la section des commentaires
Un composant de la section des commentaires conçu dans un style brutaliste avec des couleurs pastel, adapté aux sites Web de commerce électronique, avec des avatars d’utilisateurs, des commentaires et un niveau d’interactivité modéré. La conception prend en charge le mode sombre.
HTML Code
<div class="max-w-4xl mx-auto p-4 bg-white dark:bg-gray-800 rounded-lg shadow-lg">
<h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-4">Comments Section</h2>
<div class="border-t border-gray-300 dark:border-gray-600"></div>
<div class="mt-6">
<div class="flex items-start mb-4">
<img class="w-12 h-12 rounded-full" src="https://randomuser.me/api/portraits/thumb/men/1.jpg" alt="User Avatar">
<div class="ml-3">
<p class="text-lg font-semibold text-gray-800 dark:text-gray-200">John Doe</p>
<p class="text-sm text-gray-600 dark:text-gray-400">This product is amazing! Highly recommend it.</p>
<p class="text-xs text-gray-500 dark:text-gray-500 mt-1">3 hours ago</p>
</div>
</div>
<div class="flex items-start mb-4">
<img class="w-12 h-12 rounded-full" src="https://randomuser.me/api/portraits/thumb/women/2.jpg" alt="User Avatar">
<div class="ml-3">
<p class="text-lg font-semibold text-gray-800 dark:text-gray-200">Jane Smith</p>
<p class="text-sm text-gray-600 dark:text-gray-400">I had a good experience with this purchase.</p>
<p class="text-xs text-gray-500 dark:text-gray-500 mt-1">5 hours ago</p>
</div>
</div>
<div class="flex items-start mb-4">
<img class="w-12 h-12 rounded-full" src="https://randomuser.me/api/portraits/thumb/men/3.jpg" alt="User Avatar">
<div class="ml-3">
<p class="text-lg font-semibold text-gray-800 dark:text-gray-200">Tom Brown</p>
<p class="text-sm text-gray-600 dark:text-gray-400">Could be better; I faced some issues.</p>
<p class="text-xs text-gray-500 dark:text-gray-500 mt-1">1 day ago</p>
</div>
</div>
</div>
<div class="border-t border-gray-300 dark:border-gray-600 mt-4 pt-4">
<h3 class="text-lg font-bold text-gray-800 dark:text-white mb-3">Leave a Comment:</h3>
<textarea class="w-full h-24 p-2 border border-gray-400 dark:border-gray-600 rounded-md focus:outline-none focus:ring focus:ring-green-200 dark:focus:ring-green-700" placeholder="Write your comment here..."></textarea>
<button class="mt-2 px-4 py-2 bg-green-500 hover:bg-green-600 text-white font-semibold rounded-md dark:bg-green-600 dark:hover:bg-green-700">Submit</button>
</div>
</div>Composants associés
Composant de la section des commentaires
Composant de section de commentaires réactifs avec skeuomorphisme, palette de couleurs pastel, complexité simple adaptée au commerce électronique. Thème sombre pris en charge.
Composant de la section des commentaires
Un composant de section de commentaires de conception minimaliste/plate pour le commerce électronique avec des couleurs vives, une complexité modérée, un design réactif et une prise en charge du thème 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.