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.
HTML Code
<div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md">
<h2 class="text-2xl font-semibold text-gray-800 dark:text-gray-200 mb-4">Comments</h2>
<!-- Comment 1 -->
<div class="mb-4 flex items-start space-x-3">
<img class="w-10 h-10 rounded-full object-cover" src="https://randomuser.me/api/portraits/women/68.jpg" alt="User Avatar">
<div class="flex-1">
<div class="flex items-center justify-between">
<p class="font-semibold text-gray-900 dark:text-gray-100">Babe Wani</p>
<p class="text-xs text-gray-500 dark:text-gray-400">2 days ago</p>
</div>
<p class="text-gray-700 dark:text-gray-300 mt-1">This dashboard is incredibly insightful! The data visualization makes complex information easy to digest.</p>
<div class="flex items-center mt-2 text-gray-500 dark:text-gray-400 text-sm">
<button class="flex items-center mr-4 hover:text-blue-500 dark:hover:text-blue-400 transition-colors duration-200">
<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.857 2.153l-2.54 9.147a1 1 0 01-1.702.585L11 16m6 0H4a2 2 0 01-2-2V6a2 2 0 012-2h10a2 2 0 012 2v8z"></path></svg>
<span>Like (12)</span>
</button>
<button class="flex items-center hover:text-blue-500 dark:hover:text-blue-400 transition-colors duration-200">
<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.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"></path></svg>
<span>Reply</span>
</button>
</div>
</div>
</div>
<!-- Comment 2 -->
<div class="mb-4 flex items-start space-x-3">
<img class="w-10 h-10 rounded-full object-cover" src="https://randomuser.me/api/portraits/men/44.jpg" alt="User Avatar">
<div class="flex-1">
<div class="flex items-center justify-between">
<p class="font-semibold text-gray-900 dark:text-gray-100">George Costanza</p>
<p class="text-xs text-gray-500 dark:text-gray-400">1 day ago</p>
</div>
<p class="text-gray-700 dark:text-gray-300 mt-1">I appreciate the clear layout and the interactive elements. Makes monitoring key metrics a breeze.</p>
<div class="flex items-center mt-2 text-gray-500 dark:text-gray-400 text-sm">
<button class="flex items-center mr-4 hover:text-blue-500 dark:hover:text-blue-400 transition-colors duration-200">
<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.857 2.153l-2.54 9.147a1 1 0 01-1.702.585L11 16m6 0H4a2 2 0 01-2-2V6a2 2 0 012-2h10a2 2 0 012 2v8z"></path></svg>
<span>Like (8)</span>
</button>
<button class="flex items-center hover:text-blue-500 dark:hover:text-blue-400 transition-colors duration-200">
<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.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"></path></svg>
<span>Reply</span>
</button>
</div>
</div>
</div>
<!-- Reply to Comment 2 -->
<div class="mb-4 flex items-start space-x-3 ml-14">
<img class="w-8 h-8 rounded-full object-cover" src="https://randomuser.me/api/portraits/women/72.jpg" alt="User Avatar">
<div class="flex-1">
<div class="flex items-center justify-between">
<p class="font-semibold text-gray-900 dark:text-gray-100">Elaine Benes</p>
<p class="text-xs text-gray-500 dark:text-gray-400">20 hours ago</p>
</div>
<p class="text-gray-700 dark:text-gray-300 mt-1">@George Costanza I totally agree! The responsiveness is also a huge plus.</p>
<div class="flex items-center mt-2 text-gray-500 dark:text-gray-400 text-sm">
<button class="flex items-center mr-4 hover:text-blue-500 dark:hover:text-blue-400 transition-colors duration-200">
<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.857 2.153l-2.54 9.147a1 1 0 01-1.702.585L11 16m6 0H4a2 2 0 01-2-2V6a2 2 0 012-2h10a2 2 0 012 2v8z"></path></svg>
<span>Like (5)</span>
</button>
<button class="flex items-center hover:text-blue-500 dark:hover:text-blue-400 transition-colors duration-200">
<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.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"></path></svg>
<span>Reply</span>
</button>
</div>
</div>
</div>
<!-- Comment 3 (New Comment) -->
<div class="flex items-start space-x-3">
<img class="w-10 h-10 rounded-full object-cover" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
<div class="flex-1">
<textarea class="w-full p-3 rounded-lg bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 transition-all duration-200 resize-y" rows="3" placeholder="Add a comment..."></textarea>
<div class="flex justify-end mt-2">
<button class="px-5 py-2 bg-blue-600 hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-600 text-white font-semibold rounded-lg shadow-md transition-colors duration-200 transform hover:scale-105 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:focus:ring-offset-gray-800">
Post Comment
</button>
</div>
</div>
</div>
</div>
Composants associés
Composant de la section des commentaires
Une section de commentaires réactive conçue pour les plateformes de commerce électronique avec une interface utilisateur en mode sombre et une palette de couleurs triadique.
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.
Composant de la section des commentaires
Composant avec conception Neumorphism, schéma de couleurs triadique et complexité modérée pour les médias sociaux, mis en œuvre à l’aide de Tailwind CSS avec un design réactif et une prise en charge du thème sombre.