Componente de la sección de comentarios
Un componente simple de la sección de comentarios diseñado con el estilo Material Design, utilizando un esquema de color monocromático, optimizado para interfaces de redes sociales y diseño receptivo con soporte para temas oscuros.
Código HTML
<div class="max-w-2xl mx-auto p-4 dark:bg-gray-800 bg-white rounded-lg shadow-md">
<h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Comments</h2>
<div class="mt-4 space-y-4">
<!-- Comment 1 -->
<div class="flex items-start space-x-4">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full">
<div class="flex-1">
<p class="text-gray-800 dark:text-gray-200 font-medium">John Doe</p>
<p class="text-gray-600 dark:text-gray-400">This is a comment. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<span class="text-gray-500 dark:text-gray-500 text-sm">2 hours ago</span>
</div>
</div>
<!-- Comment 2 -->
<div class="flex items-start space-x-4">
<img src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full">
<div class="flex-1">
<p class="text-gray-800 dark:text-gray-200 font-medium">Jane Smith</p>
<p class="text-gray-600 dark:text-gray-400">Another comment! Vivamus sit amet nulla nec urna maximus suscipit.</p>
<span class="text-gray-500 dark:text-gray-500 text-sm">3 hours ago</span>
</div>
</div>
<!-- Comment 3 -->
<div class="flex items-start space-x-4">
<img src="https://randomuser.me/api/portraits/men/2.jpg" alt="User Avatar" class="w-10 h-10 rounded-full">
<div class="flex-1">
<p class="text-gray-800 dark:text-gray-200 font-medium">Alice Brown</p>
<p class="text-gray-600 dark:text-gray-400">This is another comment. Donec eget tristique eros, ac auctor orci.</p>
<span class="text-gray-500 dark:text-gray-500 text-sm">5 hours ago</span>
</div>
</div>
</div>
<div class="mt-6">
<textarea placeholder="Add a comment..." class="w-full dark:bg-gray-700 bg-gray-100 border border-gray-300 dark:border-gray-600 rounded-md p-2" rows="3"></textarea>
<button class="mt-2 w-full bg-blue-500 hover:bg-blue-600 dark:bg-blue-700 dark:hover:bg-blue-600 text-white font-semibold py-2 rounded-md">Post Comment</button>
</div>
</div>Componentes relacionados
Componente de la sección de comentarios
Una sección de comentarios diseñada con skeuomorfismo, con tonos tierra y soporte para temas oscuros, adaptada a sitios web de comercio electrónico.
Sección de Comentarios
Sección de comentarios Componente con diseño de materiales utilizando el esquema de color Triádico para fines comerciales / corporativos. Diseño responsivo con soporte para temas oscuros.
Componente de la sección de comentarios
Un componente minimalista de la sección de comentarios diseñado con Tailwind CSS, con líneas limpias, efectos responsivos y soporte para el modo oscuro. Incluye avatares de usuario, texto de comentarios, marcas de tiempo y un área de entrada simple para nuevos comentarios.