Composant de la section des commentaires
Un composant de section de commentaires propre et minimaliste avec une palette de couleurs bonbon/doux, conçu pour les plateformes éducatives. Dispose d’une mise en page réactive, d’une prise en charge du mode sombre et met l’accent sur la typographie.
HTML Code
<section class="p-4 sm:p-6 md:p-8 lg:p-10 bg-gradient-to-br from-pink-50 to-purple-50 dark:from-gray-900 dark:to-gray-800 font-sans">
<div class="max-w-4xl mx-auto rounded-lg shadow-xl overflow-hidden bg-white dark:bg-gray-850">
<header class="px-5 py-4 border-b border-pink-100 dark:border-gray-700 bg-pink-50 dark:bg-gray-800">
<h2 class="text-2xl font-bold text-gray-800 dark:text-white flex items-center">
Comments
<span class="ml-2 text-sm bg-pink-200 dark:bg-gray-700 text-pink-700 dark:text-gray-300 px-3 py-1 rounded-full">4</span>
</h2>
</header>
<div class="p-5 sm:p-6">
<!-- Comment Input Area -->
<div class="mb-6">
<h3 class="text-lg font-semibold text-gray-700 dark:text-gray-200 mb-3">Leave a comment</h3>
<div class="flex items-start space-x-4 mb-4">
<img class="w-10 h-10 rounded-full object-cover border-2 border-pink-300 dark:border-gray-600" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Your avatar">
<textarea class="flex-1 p-3 border border-pink-200 dark:border-gray-700 rounded-lg focus:outline-none focus:ring-2 focus:ring-pink-300 dark:focus:ring-pink-500 bg-pink-50 dark:bg-gray-750 text-gray-800 dark:text-gray-100 placeholder-pink-400 dark:placeholder-gray-400 resize-y min-h-[60px] max-h-[150px]" placeholder="Type your comment here..."></textarea>
</div>
<div class="flex justify-end">
<button class="px-5 py-2 bg-pink-500 hover:bg-pink-600 text-white font-semibold rounded-lg shadow-md transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-pink-400 focus:ring-offset-2 focus:ring-offset-pink-50 dark:focus:ring-offset-gray-850">
Post Comment
</button>
</div>
</div>
<!-- Comment List -->
<div class="space-y-6 sm:space-y-8">
<!-- Comment 1 -->
<article class="flex items-start space-x-4 p-4 rounded-lg bg-pink-50 dark:bg-gray-800 border border-pink-100 dark:border-gray-700">
<img class="w-10 h-10 rounded-full object-cover border-2 border-mint-300 dark:border-cyan-600" src="https://randomuser.me/api/portraits/women/1.jpg" alt="Alice Wonderland">
<div class="flex-1">
<div class="flex justify-between items-center mb-1">
<h4 class="font-bold text-gray-800 dark:text-white">Alice Wonderland</h4>
<span class="text-xs text-gray-500 dark:text-gray-400">2 hours ago</span>
</div>
<p class="text-gray-700 dark:text-gray-300 leading-relaxed text-sm lg:text-base">This explanation really clarified the concept for me! The examples were perfectly chosen. Thank you so much!</p>
<div class="mt-3 flex items-center space-x-4 text-sm">
<button class="flex items-center text-gray-600 dark:text-gray-400 hover:text-pink-600 dark:hover:text-pink-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="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"></path></svg>
<span>Like (5)</span>
</button>
<button class="flex items-center text-gray-600 dark:text-gray-400 hover:text-pink-600 dark:hover:text-pink-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 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z"></path></svg>
<span>Reply</span>
</button>
</div>
<!-- Reply Slot -->
<div class="mt-4 pl-8 border-l-2 border-mint-200 dark:border-cyan-700 space-y-4">
<article class="flex items-start space-x-4 p-3 rounded-lg bg-pink-100 dark:bg-gray-750 border border-pink-200 dark:border-gray-700">
<img class="w-8 h-8 rounded-full object-cover border-2 border-pink-300 dark:border-fuchsia-600" src="https://randomuser.me/api/portraits/men/55.jpg" alt="Bob The Builder">
<div class="flex-1">
<div class="flex justify-between items-center mb-1">
<h4 class="font-bold text-gray-800 dark:text-white">Bob The Builder</h4>
<span class="text-xs text-gray-500 dark:text-gray-400">1 hour ago</span>
</div>
<p class="text-gray-700 dark:text-gray-300 leading-relaxed text-sm">@Alice Wonderland, I agree! This was super helpful. Learning a lot.</p>
<div class="mt-2 flex items-center space-x-4 text-xs">
<button class="flex items-center text-gray-600 dark:text-gray-400 hover:text-pink-600 dark:hover:text-pink-400 transition-colors duration-200">
<svg class="w-3 h-3 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="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"></path></svg>
<span>Like (2)</span>
</button>
<button class="flex items-center text-gray-600 dark:text-gray-400 hover:text-pink-600 dark:hover:text-pink-400 transition-colors duration-200">
<svg class="w-3 h-3 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 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z"></path></svg>
<span>Reply</span>
</button>
</div>
</div>
</article>
</div>
</div>
</article>
<!-- Comment 2 -->
<article class="flex items-start space-x-4 p-4 rounded-lg bg-pink-50 dark:bg-gray-800 border border-pink-100 dark:border-gray-700">
<img class="w-10 h-10 rounded-full object-cover border-2 border-pink-300 dark:border-fuchsia-600" src="https://randomuser.me/api/portraits/men/44.jpg" alt="Charlie Chaplin">
<div class="flex-1">
<div class="flex justify-between items-center mb-1">
<h4 class="font-bold text-gray-800 dark:text-white">Charlie Chaplin</h4>
<span class="text-xs text-gray-500 dark:text-gray-400">1 day ago</span>
</div>
<p class="text-gray-700 dark:text-gray-300 leading-relaxed text-sm lg:text-base">Could you perhaps elaborate a bit more on the third point? I'm finding it slightly challenging to grasp the nuances. Thanks in advance!</p>
<div class="mt-3 flex items-center space-x-4 text-sm">
<button class="flex items-center text-gray-600 dark:text-gray-400 hover:text-pink-600 dark:hover:text-pink-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="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"></path></svg>
<span>Like (3)</span>
</button>
<button class="flex items-center text-gray-600 dark:text-gray-400 hover:text-pink-600 dark:hover:text-pink-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 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z"></path></svg>
<span>Reply</span>
</button>
</div>
</div>
</article>
</div>
</div>
</div>
</section>Composants associés
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.
Brutalism_Rainbow_Medical_Comments_Section
Un composant complexe de section de commentaires d’inspiration brutaliste pour les applications médicales/de santé, doté d’un schéma de couleurs dégradé arc-en-ciel vibrant et d’une réactivité totale avec prise en charge du mode sombre.
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.