Comments Section Component
A clean, minimalist comments section component with a candy/sweet color scheme, designed for educational platforms. Features responsive layout, dark mode support, and emphasizes typography.
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>Related Components
Comments Section Component
A comments section component designed in a brutalist style with pastel colors, suitable for e-commerce websites, featuring user avatars, comments, and a moderate level of interactivity. The design supports dark mode.
Brutalism_Rainbow_Medical_Comments_Section
A complex, brutalist-inspired comments section component for healthcare/medical applications, featuring a vibrant rainbow gradient color scheme and full responsiveness with dark mode support.
Comments Section Component
A glassmorphism-inspired comments section component for blogs or content pages, featuring frosted glass-like translucent elements, vibrant colors, responsiveness, and dark mode support.