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 section de commentaires inspiré du glassmorphisme pour les blogs ou les pages de contenu, avec des éléments translucides givrés ressemblant à du verre, des couleurs vives, une réactivité et une prise en charge du mode sombre.
Composant de la section des commentaires
Une section de commentaires conçue avec skeuomorphism, avec des tons de terre et un support de thème sombre, adaptée aux sites de commerce électronique.
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.