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.
HTML Code
<div class="container mx-auto p-4">
<div class="dark:bg-gray-800 bg-white rounded-lg shadow-md p-6 mb-4">
<h2 class="text-2xl font-bold dark:text-white text-gray-800 mb-4">Comments</h2>
<!-- Comment 1 -->
<div class="flex items-start space-x-4 mb-6">
<img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
<div class="flex-1">
<div class="dark:bg-gray-700 bg-gray-100 rounded-lg p-3">
<p class="font-semibold dark:text-white text-gray-800">John Doe</p>
<p class="dark:text-gray-300 text-gray-700">This is a great article! Very insightful.</p>
</div>
<div class="mt-2 text-sm text-gray-500 dark:text-gray-400">
<span>2 hours ago</span>
<span class="ml-4 cursor-pointer hover:underline">Reply</span>
</div>
</div>
</div>
<!-- Comment 2 -->
<div class="flex items-start space-x-4 mb-6">
<img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/women/2.jpg" alt="User Avatar">
<div class="flex-1">
<div class="dark:bg-gray-700 bg-gray-100 rounded-lg p-3">
<p class="font-semibold dark:text-white text-gray-800">Jane Smith</p>
<p class="dark:text-gray-300 text-gray-700">I agree, the points are well-explained.</p>
</div>
<div class="mt-2 text-sm text-gray-500 dark:text-gray-400">
<span>1 hour ago</span>
<span class="ml-4 cursor-pointer hover:underline">Reply</span>
</div>
</div>
</div>
<!-- Add New Comment Area -->
<div class="mt-6">
<textarea class="w-full p-3 rounded-lg border dark:bg-gray-700 dark:border-gray-600 dark:text-white text-gray-800 dark:placeholder-gray-400 placeholder-gray-500 focus:outline-none focus:ring focus:border-blue-300" rows="4" placeholder="Add a comment..."></textarea>
<button class="mt-3 px-6 py-2 dark:bg-blue-600 bg-blue-500 text-white font-semibold rounded-lg shadow-md hover:bg-blue-600 focus:outline-none focus:ring dark:focus:ring-blue-800 focus:ring-blue-300">Post Comment</button>
</div>
</div>
</div>Composants associés
Composant de la section des commentaires
Composant avec conception Neumorphism, schéma de couleurs triadique et complexité modérée pour les médias sociaux, mis en œuvre à l’aide de Tailwind CSS avec un design réactif et une 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.
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.