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.
HTML Code
<div class="max-w-3xl mx-auto my-10 p-6 bg-gray-200 dark:bg-gray-800 rounded-lg shadow-inner">
<h2 class="text-2xl font-bold text-gray-800 dark:text-gray-200 mb-4">Comments</h2>
<div class="mb-6">
<textarea class="w-full h-24 bg-gray-300 dark:bg-gray-700 border border-gray-400 rounded-lg shadow-md focus:outline-none focus:ring-2 focus:ring-gray-500 dark:focus:ring-gray-400" placeholder="Add a comment..."></textarea>
</div>
<button class="py-2 px-4 bg-green-500 dark:bg-green-600 text-white font-semibold rounded-lg shadow-md hover:bg-green-600 dark:hover:bg-green-700 transition duration-300">Post Comment</button>
<div class="mt-10">
<div class="flex items-start mb-4">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-12 h-12 rounded-full shadow-lg">
<div class="ml-4 bg-gray-300 dark:bg-gray-700 p-4 rounded-lg shadow-md">
<h3 class="font-semibold text-gray-800 dark:text-gray-200">John Doe</h3>
<p class="text-gray-600 dark:text-gray-400">This is a sample comment content. I really enjoyed reading this article!</p>
<span class="text-sm text-gray-500 dark:text-gray-300">2 hours ago</span>
</div>
</div>
<div class="flex items-start mb-4">
<img src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar" class="w-12 h-12 rounded-full shadow-lg">
<div class="ml-4 bg-gray-300 dark:bg-gray-700 p-4 rounded-lg shadow-md">
<h3 class="font-semibold text-gray-800 dark:text-gray-200">Jane Doe</h3>
<p class="text-gray-600 dark:text-gray-400">Thanks for sharing this amazing content!</p>
<span class="text-sm text-gray-500 dark:text-gray-300">3 hours ago</span>
</div>
</div>
<div class="flex items-start mb-4">
<img src="https://randomuser.me/api/portraits/men/2.jpg" alt="User Avatar" class="w-12 h-12 rounded-full shadow-lg">
<div class="ml-4 bg-gray-300 dark:bg-gray-700 p-4 rounded-lg shadow-md">
<h3 class="font-semibold text-gray-800 dark:text-gray-200">Alex Smith</h3>
<p class="text-gray-600 dark:text-gray-400">Very insightful! I learned a lot.</p>
<span class="text-sm text-gray-500 dark:text-gray-300">5 hours ago</span>
</div>
</div>
</div>
</div>Composants associés
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.
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.
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.