Composant de la section des commentaires
Une section de commentaires conçue avec skeuomorphism, avec des tons de terre et un support de thème sombre, adaptée aux sites de commerce électronique.
HTML Code
<div class="max-w-4xl mx-auto p-6 bg-white dark:bg-gray-800 rounded-lg shadow-lg">
<h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200 mb-4">Customer Comments</h2>
<div class="space-y-4">
<div class="flex items-start">
<img src="https://randomuser.me/api/portraits/men/10.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-brown-500" />
<div class="ml-3">
<p class="text-brown-800 dark:text-brown-200 font-medium">John Doe</p>
<p class="text-gray-600 dark:text-gray-400">This product exceeded my expectations! Highly recommend.</p>
<div class="mt-2">
<span class="text-sm text-gray-500 dark:text-gray-400">2 hours ago</span>
</div>
</div>
</div>
<div class="flex items-start">
<img src="https://randomuser.me/api/portraits/women/10.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-brown-500" />
<div class="ml-3">
<p class="text-brown-800 dark:text-brown-200 font-medium">Jane Smith</p>
<p class="text-gray-600 dark:text-gray-400">The quality is fantastic! Will buy again.</p>
<div class="mt-2">
<span class="text-sm text-gray-500 dark:text-gray-400">1 day ago</span>
</div>
</div>
</div>
<div class="flex items-start">
<img src="https://randomuser.me/api/portraits/men/20.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-brown-500" />
<div class="ml-3">
<p class="text-brown-800 dark:text-brown-200 font-medium">Mike Johnson</p>
<p class="text-gray-600 dark:text-gray-400">Fast shipping and great customer service!</p>
<div class="mt-2">
<span class="text-sm text-gray-500 dark:text-gray-400">3 days ago</span>
</div>
</div>
</div>
</div>
<div class="mt-6">
<h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-2">Leave a Comment:</h3>
<textarea class="w-full p-2 border rounded-lg bg-gray-100 dark:bg-gray-700 border-brown-300 dark:border-brown-600 focus:outline-none focus:ring focus:ring-brown-500 dark:focus:ring-brown-400" rows="4" placeholder="Write your thoughts..."></textarea>
<button class="mt-2 px-4 py-2 bg-brown-600 text-white rounded-lg hover:bg-brown-500 focus:outline-none focus:ring focus:ring-brown-500 dark:bg-brown-500 dark:hover:bg-brown-400 dark:focus:ring-brown-400">Submit</button>
</div>
</div>Composants associés
Composant de la section des commentaires
Une section de commentaires réactive avec le style de conception Neumorphism, les couleurs Earth tone et la prise en charge du thème sombre pour le contenu du blog.
CommentairesSection
Un composant de section de commentaires réactif et compatible avec les thèmes sombres pour le commerce électronique avec un design minimaliste / plat, une palette de couleurs triadique et des éléments d’interaction complexes, construit avec Tailwind CSS. Utilise picsum.photos et randomuser.me pour les images de démonstration.
Composant de la section des commentaires
Un composant complexe et réactif de la section des commentaires conçu pour les systèmes de réservation, avec une palette de couleurs noir et blanc inspirée du Bauhaus et une couleur d’accent vive. Comprend les avatars des utilisateurs, le nombre d’étoiles, les horodatages et la prise en charge du mode sombre.