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.
HTML Code
<div class="max-w-4xl mx-auto p-4 bg-white dark:bg-gray-800 rounded-lg shadow-lg">
<h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-4">Comments Section</h2>
<div class="border-t border-gray-300 dark:border-gray-600"></div>
<div class="mt-6">
<div class="flex items-start mb-4">
<img class="w-12 h-12 rounded-full" src="https://randomuser.me/api/portraits/thumb/men/1.jpg" alt="User Avatar">
<div class="ml-3">
<p class="text-lg font-semibold text-gray-800 dark:text-gray-200">John Doe</p>
<p class="text-sm text-gray-600 dark:text-gray-400">This product is amazing! Highly recommend it.</p>
<p class="text-xs text-gray-500 dark:text-gray-500 mt-1">3 hours ago</p>
</div>
</div>
<div class="flex items-start mb-4">
<img class="w-12 h-12 rounded-full" src="https://randomuser.me/api/portraits/thumb/women/2.jpg" alt="User Avatar">
<div class="ml-3">
<p class="text-lg font-semibold text-gray-800 dark:text-gray-200">Jane Smith</p>
<p class="text-sm text-gray-600 dark:text-gray-400">I had a good experience with this purchase.</p>
<p class="text-xs text-gray-500 dark:text-gray-500 mt-1">5 hours ago</p>
</div>
</div>
<div class="flex items-start mb-4">
<img class="w-12 h-12 rounded-full" src="https://randomuser.me/api/portraits/thumb/men/3.jpg" alt="User Avatar">
<div class="ml-3">
<p class="text-lg font-semibold text-gray-800 dark:text-gray-200">Tom Brown</p>
<p class="text-sm text-gray-600 dark:text-gray-400">Could be better; I faced some issues.</p>
<p class="text-xs text-gray-500 dark:text-gray-500 mt-1">1 day ago</p>
</div>
</div>
</div>
<div class="border-t border-gray-300 dark:border-gray-600 mt-4 pt-4">
<h3 class="text-lg font-bold text-gray-800 dark:text-white mb-3">Leave a Comment:</h3>
<textarea class="w-full h-24 p-2 border border-gray-400 dark:border-gray-600 rounded-md focus:outline-none focus:ring focus:ring-green-200 dark:focus:ring-green-700" placeholder="Write your comment here..."></textarea>
<button class="mt-2 px-4 py-2 bg-green-500 hover:bg-green-600 text-white font-semibold rounded-md dark:bg-green-600 dark:hover:bg-green-700">Submit</button>
</div>
</div>Related Components
Comments Section Component
A complex, responsive comments section component designed for booking/reservation systems with a Bauhaus-inspired black and white color scheme and a bright accent color. Includes user avatars, star ratings, timestamps, and dark mode support.
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
Component for comments section with Skeuomorphism design, triadic color scheme, complex interactions, social media purpose, responsive and dark theme support.