Comments Section Component
Comments section component with a monochromatic color scheme, microinteractions, and responsive design with dark theme support.
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>
Related Components
Comments Section Component
A minimalist/flat design comments section component for e-commerce with vibrant colors, moderate complexity, responsive design, and dark theme support.
CommentsSection
A responsive, dark theme compatible Comments Section Component for e-commerce with minimalist/flat design, triadic color scheme, and complex interaction elements, built with Tailwind CSS. Uses picsum.photos and randomuser.me for demo images.
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.