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
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.
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.
Section des commentaires
Composant de la section des commentaires avec conception matérielle utilisant la palette de couleurs triadique pour les affaires/l’entreprise. Conception réactive avec prise en charge du thème sombre.