Componentes Sección de Comentarios Sección de Comentarios

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.

Vista previa

Código HTML

<div class="container mx-auto p-4">
  <div class="dark:bg-gray-800 bg-white rounded-lg shadow-md p-6 mb-4">
    <h2 class="text-2xl font-bold dark:text-white text-gray-800 mb-4">Comments</h2>

    <!-- Comment 1 -->
    <div class="flex items-start space-x-4 mb-6">
      <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
      <div class="flex-1">
        <div class="dark:bg-gray-700 bg-gray-100 rounded-lg p-3">
          <p class="font-semibold dark:text-white text-gray-800">John Doe</p>
          <p class="dark:text-gray-300 text-gray-700">This is a great article! Very insightful.</p>
        </div>
        <div class="mt-2 text-sm text-gray-500 dark:text-gray-400">
          <span>2 hours ago</span>
          <span class="ml-4 cursor-pointer hover:underline">Reply</span>
        </div>
      </div>
    </div>

    <!-- Comment 2 -->
    <div class="flex items-start space-x-4 mb-6">
      <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/women/2.jpg" alt="User Avatar">
      <div class="flex-1">
        <div class="dark:bg-gray-700 bg-gray-100 rounded-lg p-3">
          <p class="font-semibold dark:text-white text-gray-800">Jane Smith</p>
          <p class="dark:text-gray-300 text-gray-700">I agree, the points are well-explained.</p>
        </div>
        <div class="mt-2 text-sm text-gray-500 dark:text-gray-400">
          <span>1 hour ago</span>
          <span class="ml-4 cursor-pointer hover:underline">Reply</span>
        </div>
      </div>
    </div>

    <!-- Add New Comment Area -->
    <div class="mt-6">
      <textarea class="w-full p-3 rounded-lg border dark:bg-gray-700 dark:border-gray-600 dark:text-white text-gray-800 dark:placeholder-gray-400 placeholder-gray-500 focus:outline-none focus:ring focus:border-blue-300" rows="4" placeholder="Add a comment..."></textarea>
      <button class="mt-3 px-6 py-2 dark:bg-blue-600 bg-blue-500 text-white font-semibold rounded-lg shadow-md hover:bg-blue-600 focus:outline-none focus:ring dark:focus:ring-blue-800 focus:ring-blue-300">Post Comment</button>
    </div>
  </div>
</div>

Componentes relacionados

Neumorphic_Neon_Comments_Section

Un componente de la sección de comentarios neumórfico con un esquema de color neón/eléctrico, diseñado para plataformas de entretenimiento/medios. Cuenta con diseño responsivo, compatibilidad con modo oscuro y elementos interactivos. Cada comentario muestra un avatar, un nombre de usuario, una marca de tiempo y un texto de comentario, con botones Me gusta y Responder.

Abrir

Neon_Glow_Comments_Section

Un componente de sección de comentarios responsivo con una vibrante estética de neón/resplandor, con avatares de usuario, marcas de tiempo y un botón de respuesta. Admite el modo oscuro y está diseñado para interfaces de redes sociales.

Abrir

Componente de la sección de comentarios

Un componente de sección de comentarios limpio y minimalista con una combinación de colores dulces/dulces, diseñado para plataformas educativas. Cuenta con diseño responsivo, compatibilidad con modo oscuro y enfatiza la tipografía.

Abrir