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
Neon_Glow_Comments_Section
Un composant de section de commentaires réactif avec une esthétique néon / lueur vibrante, avec des avatars d’utilisateurs, des horodatages et un bouton de réponse. Prend en charge le mode sombre et est conçu pour les interfaces de médias sociaux.
Composant de la section des commentaires
Composant de la section des commentaires avec micro-interactions, palette de couleurs pastel, complexité modérée pour le tableau de bord, réactif avec prise en charge du thème sombre, utilisation de Tailwind CSS. Images de picsum.photos pour les images et randomuser.me pour les avatars. Pas de JavaScript.
Composant de la section des commentaires
Un composant de section de commentaires simple et réactif avec une palette de couleurs coucher de soleil/chaudes, des micro-interactions et une prise en charge du mode sombre, adapté aux sites Web agricoles.