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
Un composant de section de commentaires propre et minimaliste avec une palette de couleurs bonbon/doux, conçu pour les plateformes éducatives. Dispose d’une mise en page réactive, d’une prise en charge du mode sombre et met l’accent sur la typographie.
Composant de la section des commentaires
Composant pour la section des commentaires avec la conception Skeuomorphism, la palette de couleurs triadique, les interactions complexes, l’objectif des médias sociaux, la prise en charge des thèmes réactifs et sombres.
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.