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
Section des commentaires sur le brutalisme
Un composant de section de commentaires de style brutaliste pour les portfolios, avec des couleurs analogues, une complexité modérée, une réactivité et une prise en charge du mode sombre.
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
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.