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
Comments Section Component with Neumorphism design, Triadic color scheme, and Moderate complexity for Social Media, implemented using Tailwind CSS with responsive design and dark theme support.
Neumorphic_Neon_Comments_Section
A neumorphic comments section component with a neon/electric color scheme, designed for entertainment/media platforms. Features responsive layout, dark mode support, and interactive elements. Each comment displays an avatar, username, timestamp, and comment text, with like and reply buttons.
Industrial_Purple_Comments_Section
A complex, responsive comments section component with an industrial design aesthetic and a purple/violet color scheme, suitable for blogs or content consumption. Features exposed elements, raw material feel, and dark mode support.