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.
HTML Code
<div class="container mx-auto p-4">
<!-- Comments Section -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6">
<h2 class="text-xl font-semibold mb-4 text-gray-800 dark:text-white">Comments</h2>
<!-- New Comment Input -->
<div class="flex items-start mb-6">
<img class="w-10 h-10 rounded-full mr-4" src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar">
<div class="flex-grow">
<textarea class="w-full p-3 border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-300 dark:bg-gray-700 dark:border-gray-600 dark:text-white dark:placeholder-gray-400" rows="3" placeholder="Add a comment..."></textarea>
<button class="mt-2 px-4 py-2 bg-blue-200 text-blue-800 rounded-md hover:bg-blue-300 focus:outline-none focus:ring-2 focus:ring-blue-300 dark:bg-blue-700 dark:text-white dark:hover:bg-blue-800">Post Comment</button>
</div>
</div>
<!-- Existing Comments -->
<div class="space-y-6">
<!-- Comment 1 -->
<div class="flex items-start">
<img class="w-10 h-10 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
<div class="flex-grow bg-gray-100 dark:bg-gray-700 rounded-md p-4">
<div class="flex justify-between items-center mb-2">
<span class="font-semibold text-gray-800 dark:text-white">John Doe</span>
<span class="text-sm text-gray-500 dark:text-gray-400">2 hours ago</span>
</div>
<p class="text-gray-700 dark:text-gray-300">This is a very insightful comment. I really appreciate the details provided.</p>
<div class="flex items-center mt-3">
<button class="flex items-center text-gray-600 dark:text-gray-400 hover:text-blue-500 dark:hover:text-blue-400 transition duration-200 ease-in-out">
<svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 10h4.764a2 2 0 011.789 2.894l-3.5 7A2 2 0 0115.263 21H5v-7h3m4 0hക്കായി-3m0 0l-1.59-1.59a2 2 0 010-2.82l1.59-1.59v6z"></path></svg>
<span class="text-sm">Like (5)</span>
</button>
<button class="flex items-center text-gray-600 dark:text-gray-400 hover:text-green-500 dark:hover:text-green-400 ml-4 transition duration-200 ease-in-out">
<svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.96 9.96 0 01-5.012-1.39l-3 3v-3.032A8.96 8.96 0 013 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"></path></svg>
<span class="text-sm">Reply</span>
</button>
</div>
</div>
</div>
<!-- Comment 2 -->
<div class="flex items-start">
<img class="w-10 h-10 rounded-full mr-4" src="https://randomuser.me/api/portraits/women/2.jpg" alt="User Avatar">
<div class="flex-grow bg-gray-100 dark:bg-gray-700 rounded-md p-4">
<div class="flex justify-between items-center mb-2">
<span class="font-semibold text-gray-800 dark:text-white">Jane Smith</span>
<span class="text-sm text-gray-500 dark:text-gray-400">Yesterday</span>
</div>
<p class="text-gray-700 dark:text-gray-300">Thanks for the great post! Very helpful.</p>
<div class="flex items-center mt-3">
<button class="flex items-center text-gray-600 dark:text-gray-400 hover:text-blue-500 dark:hover:text-blue-400 transition duration-200 ease-in-out">
<svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 10h4.764a2 2 0 011.789 2.894l-3.5 7A2 2 0 0115.263 21H5v-7h3m4 0hത്തിനായി-3m0 0l-1.59-1.59a2 2 0 010-2.82l1.59-1.59v6z"></path></svg>
<span class="text-sm">Like (12)</span>
</button>
<button class="flex items-center text-gray-600 dark:text-gray-400 hover:text-green-500 dark:hover:text-green-400 ml-4 transition duration-200 ease-in-out">
<svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.96 9.96 0 01-5.012-1.39l-3 3v-3.032A8.96 8.96 0 013 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"></path></svg>
<span class="text-sm">Reply</span>
</button>
</div>
</div>
</div>
</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.
CommentairesSection
Un composant de section de commentaires réactif et compatible avec les thèmes sombres pour le commerce électronique avec un design minimaliste / plat, une palette de couleurs triadique et des éléments d’interaction complexes, construit avec Tailwind CSS. Utilise picsum.photos et randomuser.me pour les images de démonstration.
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.