Componente de la sección de comentarios
Un componente de sección de comentarios receptivo diseñado para sitios web comerciales/corporativos, con animaciones atractivas, colores vibrantes y compatibilidad con el modo oscuro.
Código HTML
<div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md transition-shadow duration-300 hover:shadow-xl">
<h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-4">Comments</h2>
<div class="space-y-4">
<div class="flex items-start gap-4">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-12 h-12 rounded-full">
<div class="flex-1">
<div class="bg-blue-100 dark:bg-blue-500 p-4 rounded-lg shadow-md transition-transform duration-300 transform hover:scale-105">
<p class="text-gray-700 dark:text-gray-200">This is a fantastic article! I learned so much.</p>
</div>
<span class="text-sm text-gray-500 dark:text-gray-400">- John Doe</span>
</div>
</div>
<div class="flex items-start gap-4">
<img src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar" class="w-12 h-12 rounded-full">
<div class="flex-1">
<div class="bg-green-100 dark:bg-green-500 p-4 rounded-lg shadow-md transition-transform duration-300 transform hover:scale-105">
<p class="text-gray-700 dark:text-gray-200">Great insights! Looking forward to more posts.</p>
</div>
<span class="text-sm text-gray-500 dark:text-gray-400">- Jane Smith</span>
</div>
</div>
<div class="flex items-start gap-4">
<img src="https://randomuser.me/api/portraits/men/2.jpg" alt="Avatar" class="w-12 h-12 rounded-full">
<div class="flex-1">
<div class="bg-red-100 dark:bg-red-500 p-4 rounded-lg shadow-md transition-transform duration-300 transform hover:scale-105">
<p class="text-gray-700 dark:text-gray-200">I completely agree with this perspective. Well said!</p>
</div>
<span class="text-sm text-gray-500 dark:text-gray-400">- Tom Brown</span>
</div>
</div>
</div>
<div class="mt-6">
<h3 class="text-lg font-semibold text-gray-800 dark:text-white mb-2">Leave a Comment:</h3>
<textarea class="w-full p-4 border border-gray-300 dark:border-gray-600 rounded-lg shadow-sm transition-all duration-300 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-300 resize-none" rows="4" placeholder="Type your message here..."></textarea>
<button class="mt-4 w-full bg-blue-500 text-white font-semibold py-2 rounded-lg transition-colors duration-300 hover:bg-blue-600 dark:bg-blue-600 dark:hover:bg-blue-500">Submit</button>
</div>
</div>
Componentes relacionados
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.
Componente de la sección de comentarios
Un componente de sección de comentarios inspirado en el glassmorphism para blogs o páginas de contenido, con elementos translúcidos similares al vidrio esmerilado, colores vibrantes, capacidad de respuesta y compatibilidad con el modo oscuro.
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.