Comments Section Component
A clean, code-inspired comments section component with monospace fonts and pastel colors, designed for entertainment/media platforms. Features responsiveness and dark mode support.
HTML Code
<section class="font-mono bg-gray-100 dark:bg-gray-900 text-gray-800 dark:text-gray-200 py-8 md:py-12 lg:py-16">
<div class="container mx-auto px-4 sm:px-6 lg:px-8 max-w-4xl">
<h2 class="text-3xl md:text-4xl font-bold mb-8 text-center text-gray-900 dark:text-gray-100 uppercase tracking-widest">
<span class="block">// Comments</span>
</h2>
<!-- New Comment Input -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 mb-8 border border-gray-200 dark:border-gray-700">
<h3 class="text-xl font-semibold mb-4 text-gray-700 dark:text-gray-300">Leave a Comment <span class="text-purple-400">></span></h3>
<textarea class="w-full p-3 mb-4 rounded-md bg-gray-50 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 focus:outline-none focus:ring-2 focus:ring-purple-400 text-gray-800 dark:text-gray-200 placeholder-gray-400 dark:placeholder-gray-500 text-sm md:text-base resize-y min-h-[80px]"
placeholder="Type your comment here..."></textarea>
<div class="flex justify-end">
<button class="px-6 py-2 bg-purple-400 text-white rounded-md hover:bg-purple-500 focus:outline-none focus:ring-2 focus:ring-purple-400 focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-gray-800 transition-colors duration-200 text-sm md:text-base font-semibold uppercase tracking-wider">
Submit <span class="hidden sm:inline">//</span>
</button>
</div>
</div>
<!-- Comments List -->
<div class="space-y-6">
<!-- Comment 1 -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 border border-gray-200 dark:border-gray-700">
<div class="flex items-start mb-4">
<img class="w-10 h-10 rounded-full mr-4 border-2 border-green-300 dark:border-green-400" src="https://randomuser.me/api/portraits/men/45.jpg" alt="User Avatar">
<div>
<p class="text-sm md:text-base font-semibold text-gray-700 dark:text-gray-300">@<span class="text-blue-400">john_doe</span></p>
<p class="text-xs text-gray-500 dark:text-gray-400">2 days ago</p>
</div>
</div>
<p class="text-gray-800 dark:text-gray-200 text-sm md:text-base leading-relaxed mb-4">
This episode was absolutely mind-blowing! The plot twists kept me on the edge of my seat. Can't wait for the next one.
<span class="text-green-400">// Kudos to the production team!</span>
</p>
<div class="flex items-center text-sm">
<button class="flex items-center text-pink-400 hover:text-pink-500 mr-4 transition-colors duration-200">
<svg class="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20">
<path d="M9.049 2.927c.3-.614.937-.991 1.637-.991s1.336.377 1.637.991l1.792 3.633 4.021.583c.677.098 1.096.86.64 1.411l-2.91 2.839.687 4.004c.117.68-.592 1.205-1.226.877L10 16.273l-3.593 1.89c-.634.328-1.343-.197-1.226-.877l.687-4.004-2.91-2.839c-.456-.551-.037-1.313.64-1.411l4.02-.583L9.049 2.927z"></path>
</svg>
<span class="text-gray-600 dark:text-gray-400">123 <span class="hidden sm:inline">Likes</span></span>
</button>
<button class="flex items-center text-yellow-400 hover:text-yellow-500 transition-colors duration-200">
<svg class="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M7.707 3.293a1 1 0 010 1.414L5.414 7H11a7 7 0 017 7v2a1 1 0 102 0v-2a9 9 0 00-9-9H5.414l2.293-2.293a1 1 0 00-1.414-1.414l-4 4a1 1 0 000 1.414l4 4a1 1 0 001.414-1.414L5.414 11H11a5 5 0 005-5V4a1 1 0 10-2 0v2a3 3 0 01-3 3H7.707a1 1 0 000 1.414z" clip-rule="evenodd"></path>
</svg>
<span class="text-gray-600 dark:text-gray-400">45 <span class="hidden sm:inline">Replies</span></span>
</button>
</div>
</div>
<!-- Comment 2 (with a reply) -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 border border-gray-200 dark:border-gray-700">
<div class="flex items-start mb-4">
<img class="w-10 h-10 rounded-full mr-4 border-2 border-orange-300 dark:border-orange-400" src="https://randomuser.me/api/portraits/women/67.jpg" alt="User Avatar">
<div>
<p class="text-sm md:text-base font-semibold text-gray-700 dark:text-gray-300">@<span class="text-purple-400">coder_girl</span></p>
<p class="text-xs text-gray-500 dark:text-gray-400">1 day ago</p>
</div>
</div>
<p class="text-gray-800 dark:text-gray-200 text-sm md:text-base leading-relaxed mb-4">
I loved the attention to detail in the set design! It really adds to the immersion.
<span class="text-red-400">// Amazing work backend-devs!</span>
</p>
<div class="flex items-center text-sm mb-4">
<button class="flex items-center text-pink-400 hover:text-pink-500 mr-4 transition-colors duration-200">
<svg class="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20">
<path d="M9.049 2.927c.3-.614.937-.991 1.637-.991s1.336.377 1.637.991l1.792 3.633 4.021.583c.677.098 1.096.86.64 1.411l-2.91 2.839.687 4.004c.117.68-.592 1.205-1.226.877L10 16.273l-3.593 1.89c-.634.328-1.343-.197-1.226-.877l.687-4.004-2.91-2.839c-.456-.551-.037-1.313.64-1.411l4.02-.583L9.049 2.927z"></path>
</svg>
<span class="text-gray-600 dark:text-gray-400">88 <span class="hidden sm:inline">Likes</span></span>
</button>
<button class="flex items-center text-yellow-400 hover:text-yellow-500 transition-colors duration-200">
<svg class="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M7.707 3.293a1 1 0 010 1.414L5.414 7H11a7 7 0 017 7v2a1 1 0 102 0v-2a9 9 0 00-9-9H5.414l2.293-2.293a1 1 0 00-1.414-1.414l-4 4a1 1 0 000 1.414l4 4a1 1 0 001.414-1.414L5.414 11H11a5 5 0 005-5V4a1 1 0 10-2 0v2a3 3 0 01-3 3H7.707a1 1 0 000 1.414z" clip-rule="evenodd"></path>
</svg>
<span class="text-gray-600 dark:text-gray-400">12 <span class="hidden sm:inline">Replies</span></span>
</button>
</div>
<!-- Reply -->
<div class="ml-8 pt-4 border-t border-gray-200 dark:border-gray-700">
<div class="flex items-start mb-4">
<img class="w-8 h-8 rounded-full mr-3 border border-blue-300 dark:border-blue-400" src="https://randomuser.me/api/portraits/men/22.jpg" alt="Reply User Avatar">
<div>
<p class="text-xs md:text-sm font-semibold text-gray-700 dark:text-gray-300">@<span class="text-blue-400">_dev_ops_</span></p>
<p class="text-xs text-gray-500 dark:text-gray-400">1 hour ago</p>
</div>
</div>
<p class="text-gray-800 dark:text-gray-200 text-sm md:text-base leading-relaxed">
Agreed! The world-building was top-notch.
<span class="text-blue-400">// immersive experience</span>
</p>
</div>
</div>
<!-- Comment 3 -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 border border-gray-200 dark:border-gray-700">
<div class="flex items-start mb-4">
<img class="w-10 h-10 rounded-full mr-4 border-2 border-purple-300 dark:border-purple-400" src="https://randomuser.me/api/portraits/women/3.jpg" alt="User Avatar">
<div>
<p class="text-sm md:text-base font-semibold text-gray-700 dark:text-gray-300">@<span class="text-green-400">film_buff_89</span></p>
<p class="text-xs text-gray-500 dark:text-gray-400">5 hours ago</p>
</div>
</div>
<p class="text-gray-800 dark:text-gray-200 text-sm md:text-base leading-relaxed mb-4">
The soundtrack was incredible. Definitely adding it to my playlist. Anyone else feel the same?
<span class="text-yellow-400">// bangers only</span>
</p>
<div class="flex items-center text-sm">
<button class="flex items-center text-pink-400 hover:text-pink-500 mr-4 transition-colors duration-200">
<svg class="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20">
<path d="M9.049 2.927c.3-.614.937-.991 1.637-.991s1.336.377 1.637.991l1.792 3.633 4.021.583c.677.098 1.096.86.64 1.411l-2.91 2.839.687 4.004c.117.68-.592 1.205-1.226.877L10 16.273l-3.593 1.89c-.634.328-1.343-.197-1.226-.877l.687-4.004-2.91-2.839c-.456-.551-.037-1.313.64-1.411l4.02-.583L9.049 2.927z"></path>
</svg>
<span class="text-gray-600 dark:text-gray-400">56 <span class="hidden sm:inline">Likes</span></span>
</button>
<button class="flex items-center text-yellow-400 hover:text-yellow-500 transition-colors duration-200">
<svg class="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M7.707 3.293a1 1 0 010 1.414L5.414 7H11a7 7 0 017 7v2a1 1 0 102 0v-2a9 9 0 00-9-9H5.414l2.293-2.293a1 1 0 00-1.414-1.414l-4 4a1 1 0 000 1.414l4 4a1 1 0 001.414-1.414L5.414 11H11a5 5 0 005-5V4a1 1 0 10-2 0v2a3 3 0 01-3 3H7.707a1 1 0 000 1.414z" clip-rule="evenodd"></path>
</svg>
<span class="text-gray-600 dark:text-gray-400">7 <span class="hidden sm:inline">Replies</span></span>
</button>
</div>
</div>
</div>
</div>
</section>Related Components
Cyberpunk Autumn Comments Section
A simple cyberpunk-themed comments section for a dashboard, featuring dark backgrounds, neon-like accents, and rich autumn colors. Fully responsive with dark mode support.
Comments Section Component
A responsive comments section component styled with glassmorphism design, featuring frosted glass-like translucent elements with blur effects and dark theme support using Tailwind CSS.
Comments Section
Comments Section Component with Material Design using Triadic color scheme for Business/Corporate purpose. Responsive design with dark theme support.