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
Un composant de section de commentaires réactif stylisé avec un design glassmorphism, avec des éléments translucides givrés ressemblant à du verre avec des effets de flou et la prise en charge du thème sombre à l’aide de Tailwind CSS.
Composant de la section des commentaires
Un composant complexe et réactif de la section des commentaires conçu pour les systèmes de réservation, avec une palette de couleurs noir et blanc inspirée du Bauhaus et une couleur d’accent vive. Comprend les avatars des utilisateurs, le nombre d’étoiles, les horodatages et la prise en charge du mode sombre.
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.