Componente de la sección de comentarios
Un sencillo componente de la sección de comentarios diseñado con estética retro/vintage y tonos tierra. Cuenta con un diseño nostálgico que recuerda a los años 80 y 90, adaptado a las interfaces de las redes sociales, con soporte para el modo oscuro.
Código HTML
<div class="bg-gray-50 dark:bg-gray-800 p-6 rounded-lg shadow-md">
<h2 class="text-2xl font-bold text-brown-800 dark:text-brown-200 mb-4">Comments</h2>
<div class="flex mb-4">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="rounded-full w-12 h-12 mr-4">
<div class="flex-1">
<input type="text" placeholder="Write a comment..." class="w-full bg-gray-200 dark:bg-gray-700 text-gray-900 dark:text-gray-100 p-2 rounded-lg shadow border border-gray-300 dark:border-gray-600 placeholder-gray-600 dark:placeholder-gray-400 focus:ring focus:ring-brown-300 dark:focus:ring-brown-500"/>
</div>
</div>
<div class="border-t border-gray-300 dark:border-gray-600 pt-4">
<div class="flex items-start mb-4">
<img src="https://randomuser.me/api/portraits/women/2.jpg" alt="User Avatar" class="rounded-full w-10 h-10 mr-3">
<div class="bg-gray-100 dark:bg-gray-700 p-2 rounded-lg shadow">
<p class="text-brown-800 dark:text-brown-200"><strong>Alice</strong> <span class="text-gray-600 dark:text-gray-400">- 2 hours ago</span></p>
<p class="text-gray-800 dark:text-gray-300">Love this post! It really brings back memories.</p>
</div>
</div>
<div class="flex items-start mb-4">
<img src="https://randomuser.me/api/portraits/men/3.jpg" alt="User Avatar" class="rounded-full w-10 h-10 mr-3">
<div class="bg-gray-100 dark:bg-gray-700 p-2 rounded-lg shadow">
<p class="text-brown-800 dark:text-brown-200"><strong>Bob</strong> <span class="text-gray-600 dark:text-gray-400">- 4 hours ago</span></p>
<p class="text-gray-800 dark:text-gray-300">The vintage vibe is amazing!</p>
</div>
</div>
</div>
</div>Componentes relacionados
Componente de la sección de comentarios
Componente para la sección de comentarios con diseño de Skeuomorphism, combinación de colores triádica, interacciones complejas, propósito de redes sociales, soporte de temas oscuros y responsivos.
Componente de la sección de comentarios
Un componente de sección de comentarios limpio e inspirado en el código con fuentes monoespaciadas y colores pastel, diseñado para plataformas de entretenimiento/medios. Cuenta con capacidad de respuesta y compatibilidad con el modo oscuro.
Brutalism_Rainbow_Medical_Comments_Section
Un componente complejo de la sección de comentarios inspirado en el brutalismo para aplicaciones médicas/de atención médica, con un vibrante esquema de color degradado de arco iris y una capacidad de respuesta total con soporte para modo oscuro.