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.
Código HTML
<section class="font-mono bg-gray-100 dark:bg-gray-900 text-gray-800 dark:text-gray-200 py-8 md:py-12 lg:py-16">
<div class="container mx-auto px-4 sm:px-6 lg:px-8 max-w-4xl">
<h2 class="text-3xl md:text-4xl font-bold mb-8 text-center text-gray-900 dark:text-gray-100 uppercase tracking-widest">
<span class="block">// Comments</span>
</h2>
<!-- New Comment Input -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 mb-8 border border-gray-200 dark:border-gray-700">
<h3 class="text-xl font-semibold mb-4 text-gray-700 dark:text-gray-300">Leave a Comment <span class="text-purple-400">></span></h3>
<textarea class="w-full p-3 mb-4 rounded-md bg-gray-50 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 focus:outline-none focus:ring-2 focus:ring-purple-400 text-gray-800 dark:text-gray-200 placeholder-gray-400 dark:placeholder-gray-500 text-sm md:text-base resize-y min-h-[80px]"
placeholder="Type your comment here..."></textarea>
<div class="flex justify-end">
<button class="px-6 py-2 bg-purple-400 text-white rounded-md hover:bg-purple-500 focus:outline-none focus:ring-2 focus:ring-purple-400 focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-gray-800 transition-colors duration-200 text-sm md:text-base font-semibold uppercase tracking-wider">
Submit <span class="hidden sm:inline">//</span>
</button>
</div>
</div>
<!-- Comments List -->
<div class="space-y-6">
<!-- Comment 1 -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 border border-gray-200 dark:border-gray-700">
<div class="flex items-start mb-4">
<img class="w-10 h-10 rounded-full mr-4 border-2 border-green-300 dark:border-green-400" src="https://randomuser.me/api/portraits/men/45.jpg" alt="User Avatar">
<div>
<p class="text-sm md:text-base font-semibold text-gray-700 dark:text-gray-300">@<span class="text-blue-400">john_doe</span></p>
<p class="text-xs text-gray-500 dark:text-gray-400">2 days ago</p>
</div>
</div>
<p class="text-gray-800 dark:text-gray-200 text-sm md:text-base leading-relaxed mb-4">
This episode was absolutely mind-blowing! The plot twists kept me on the edge of my seat. Can't wait for the next one.
<span class="text-green-400">// Kudos to the production team!</span>
</p>
<div class="flex items-center text-sm">
<button class="flex items-center text-pink-400 hover:text-pink-500 mr-4 transition-colors duration-200">
<svg class="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20">
<path d="M9.049 2.927c.3-.614.937-.991 1.637-.991s1.336.377 1.637.991l1.792 3.633 4.021.583c.677.098 1.096.86.64 1.411l-2.91 2.839.687 4.004c.117.68-.592 1.205-1.226.877L10 16.273l-3.593 1.89c-.634.328-1.343-.197-1.226-.877l.687-4.004-2.91-2.839c-.456-.551-.037-1.313.64-1.411l4.02-.583L9.049 2.927z"></path>
</svg>
<span class="text-gray-600 dark:text-gray-400">123 <span class="hidden sm:inline">Likes</span></span>
</button>
<button class="flex items-center text-yellow-400 hover:text-yellow-500 transition-colors duration-200">
<svg class="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M7.707 3.293a1 1 0 010 1.414L5.414 7H11a7 7 0 017 7v2a1 1 0 102 0v-2a9 9 0 00-9-9H5.414l2.293-2.293a1 1 0 00-1.414-1.414l-4 4a1 1 0 000 1.414l4 4a1 1 0 001.414-1.414L5.414 11H11a5 5 0 005-5V4a1 1 0 10-2 0v2a3 3 0 01-3 3H7.707a1 1 0 000 1.414z" clip-rule="evenodd"></path>
</svg>
<span class="text-gray-600 dark:text-gray-400">45 <span class="hidden sm:inline">Replies</span></span>
</button>
</div>
</div>
<!-- Comment 2 (with a reply) -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 border border-gray-200 dark:border-gray-700">
<div class="flex items-start mb-4">
<img class="w-10 h-10 rounded-full mr-4 border-2 border-orange-300 dark:border-orange-400" src="https://randomuser.me/api/portraits/women/67.jpg" alt="User Avatar">
<div>
<p class="text-sm md:text-base font-semibold text-gray-700 dark:text-gray-300">@<span class="text-purple-400">coder_girl</span></p>
<p class="text-xs text-gray-500 dark:text-gray-400">1 day ago</p>
</div>
</div>
<p class="text-gray-800 dark:text-gray-200 text-sm md:text-base leading-relaxed mb-4">
I loved the attention to detail in the set design! It really adds to the immersion.
<span class="text-red-400">// Amazing work backend-devs!</span>
</p>
<div class="flex items-center text-sm mb-4">
<button class="flex items-center text-pink-400 hover:text-pink-500 mr-4 transition-colors duration-200">
<svg class="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20">
<path d="M9.049 2.927c.3-.614.937-.991 1.637-.991s1.336.377 1.637.991l1.792 3.633 4.021.583c.677.098 1.096.86.64 1.411l-2.91 2.839.687 4.004c.117.68-.592 1.205-1.226.877L10 16.273l-3.593 1.89c-.634.328-1.343-.197-1.226-.877l.687-4.004-2.91-2.839c-.456-.551-.037-1.313.64-1.411l4.02-.583L9.049 2.927z"></path>
</svg>
<span class="text-gray-600 dark:text-gray-400">88 <span class="hidden sm:inline">Likes</span></span>
</button>
<button class="flex items-center text-yellow-400 hover:text-yellow-500 transition-colors duration-200">
<svg class="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M7.707 3.293a1 1 0 010 1.414L5.414 7H11a7 7 0 017 7v2a1 1 0 102 0v-2a9 9 0 00-9-9H5.414l2.293-2.293a1 1 0 00-1.414-1.414l-4 4a1 1 0 000 1.414l4 4a1 1 0 001.414-1.414L5.414 11H11a5 5 0 005-5V4a1 1 0 10-2 0v2a3 3 0 01-3 3H7.707a1 1 0 000 1.414z" clip-rule="evenodd"></path>
</svg>
<span class="text-gray-600 dark:text-gray-400">12 <span class="hidden sm:inline">Replies</span></span>
</button>
</div>
<!-- Reply -->
<div class="ml-8 pt-4 border-t border-gray-200 dark:border-gray-700">
<div class="flex items-start mb-4">
<img class="w-8 h-8 rounded-full mr-3 border border-blue-300 dark:border-blue-400" src="https://randomuser.me/api/portraits/men/22.jpg" alt="Reply User Avatar">
<div>
<p class="text-xs md:text-sm font-semibold text-gray-700 dark:text-gray-300">@<span class="text-blue-400">_dev_ops_</span></p>
<p class="text-xs text-gray-500 dark:text-gray-400">1 hour ago</p>
</div>
</div>
<p class="text-gray-800 dark:text-gray-200 text-sm md:text-base leading-relaxed">
Agreed! The world-building was top-notch.
<span class="text-blue-400">// immersive experience</span>
</p>
</div>
</div>
<!-- Comment 3 -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 border border-gray-200 dark:border-gray-700">
<div class="flex items-start mb-4">
<img class="w-10 h-10 rounded-full mr-4 border-2 border-purple-300 dark:border-purple-400" src="https://randomuser.me/api/portraits/women/3.jpg" alt="User Avatar">
<div>
<p class="text-sm md:text-base font-semibold text-gray-700 dark:text-gray-300">@<span class="text-green-400">film_buff_89</span></p>
<p class="text-xs text-gray-500 dark:text-gray-400">5 hours ago</p>
</div>
</div>
<p class="text-gray-800 dark:text-gray-200 text-sm md:text-base leading-relaxed mb-4">
The soundtrack was incredible. Definitely adding it to my playlist. Anyone else feel the same?
<span class="text-yellow-400">// bangers only</span>
</p>
<div class="flex items-center text-sm">
<button class="flex items-center text-pink-400 hover:text-pink-500 mr-4 transition-colors duration-200">
<svg class="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20">
<path d="M9.049 2.927c.3-.614.937-.991 1.637-.991s1.336.377 1.637.991l1.792 3.633 4.021.583c.677.098 1.096.86.64 1.411l-2.91 2.839.687 4.004c.117.68-.592 1.205-1.226.877L10 16.273l-3.593 1.89c-.634.328-1.343-.197-1.226-.877l.687-4.004-2.91-2.839c-.456-.551-.037-1.313.64-1.411l4.02-.583L9.049 2.927z"></path>
</svg>
<span class="text-gray-600 dark:text-gray-400">56 <span class="hidden sm:inline">Likes</span></span>
</button>
<button class="flex items-center text-yellow-400 hover:text-yellow-500 transition-colors duration-200">
<svg class="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M7.707 3.293a1 1 0 010 1.414L5.414 7H11a7 7 0 017 7v2a1 1 0 102 0v-2a9 9 0 00-9-9H5.414l2.293-2.293a1 1 0 00-1.414-1.414l-4 4a1 1 0 000 1.414l4 4a1 1 0 001.414-1.414L5.414 11H11a5 5 0 005-5V4a1 1 0 10-2 0v2a3 3 0 01-3 3H7.707a1 1 0 000 1.414z" clip-rule="evenodd"></path>
</svg>
<span class="text-gray-600 dark:text-gray-400">7 <span class="hidden sm:inline">Replies</span></span>
</button>
</div>
</div>
</div>
</div>
</section>Componentes relacionados
Componente de la sección de comentarios
Un componente de sección de comentarios simple y receptivo con un esquema de color cálido / atardecer, microinteracciones y soporte de modo oscuro, adecuado para sitios web de agricultura / agricultura.
Componente de la sección de comentarios
Un componente de la sección de comentarios diseñado en un estilo brutalista con colores pastel, adecuado para sitios web de comercio electrónico, con avatares de usuario, comentarios y un nivel moderado de interactividad. El diseño es compatible con el modo oscuro.
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.