Composant de la section des commentaires
Un composant minimaliste de la section des commentaires conçu avec Tailwind CSS, avec des lignes épurées, des effets réactifs et la prise en charge du mode sombre. Il comprend des avatars d’utilisateurs, du texte de commentaire, des horodatages et une zone de saisie simple pour les nouveaux commentaires.
HTML Code
<div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md">
<h2 class="text-xl font-semibold mb-4 text-gray-800 dark:text-gray-200">Comments</h2>
<div class="max-h-96 overflow-y-auto">
<div class="flex items-start mb-4">
<img class="w-10 h-10 rounded-full mr-3" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" />
<div class="flex-1">
<div class="bg-gray-100 dark:bg-gray-700 p-3 rounded-lg">
<p class="text-gray-800 dark:text-gray-200">This is a comment from a user. It has a minimalist style.</p>
</div>
<p class="text-gray-500 dark:text-gray-400 text-sm mt-1">2 hours ago</p>
</div>
</div>
<div class="flex items-start mb-4">
<img class="w-10 h-10 rounded-full mr-3" src="https://randomuser.me/api/portraits/women/2.jpg" alt="User Avatar" />
<div class="flex-1">
<div class="bg-gray-100 dark:bg-gray-700 p-3 rounded-lg">
<p class="text-gray-800 dark:text-gray-200">Another comment from a different user. This design is very clean.</p>
</div>
<p class="text-gray-500 dark:text-gray-400 text-sm mt-1">3 hours ago</p>
</div>
</div>
<div class="flex items-start mb-4">
<img class="w-10 h-10 rounded-full mr-3" src="https://randomuser.me/api/portraits/men/3.jpg" alt="User Avatar" />
<div class="flex-1">
<div class="bg-gray-100 dark:bg-gray-700 p-3 rounded-lg">
<p class="text-gray-800 dark:text-gray-200">I really like this minimalist approach!</p>
</div>
<p class="text-gray-500 dark:text-gray-400 text-sm mt-1">5 hours ago</p>
</div>
</div>
</div>
<div class="mt-6">
<textarea class="w-full p-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring focus:ring-blue-300 dark:focus:ring-blue-600 resize-none" rows="3" placeholder="Add a comment..."></textarea>
<button class="mt-2 bg-blue-500 hover:bg-blue-600 text-white font-semibold py-2 px-4 rounded-lg focus:outline-none focus:ring focus:ring-blue-300 dark:focus:ring-blue-600">Post Comment</button>
</div>
</div>Composants associés
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 simple et réactif avec des couleurs neutres froides et la prise en charge du mode sombre, adapté aux forums ou aux plateformes communautaires.
Composant de la section des commentaires
Composant de section de commentaires avec une palette de couleurs monochromatiques, des micro-interactions et un design réactif avec prise en charge du thème sombre.