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
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 de section de commentaires propre, inspiré du code, avec des polices monospace et des couleurs pastel, conçu pour les plateformes de divertissement/médias. Dispose d’une réactivité et d’une prise en charge du mode 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.