Componentes Sección de Comentarios Componente de la sección de comentarios

Componente de la sección de comentarios

Componente de sección de comentarios responsivos con skeuomorfismo, combinación de colores pastel, complejidad simple adaptada para el comercio electrónico. Tema oscuro compatible.

Vista previa

Código HTML

<div class="bg-gray-200 dark:bg-gray-800 p-6 rounded-lg shadow-md">
  <h2 class="text-xl font-semibold text-gray-700 dark:text-gray-300 mb-4">Comments</h2>

  <!-- Comment 1 -->
  <div class="mb-4 bg-white dark:bg-gray-700 p-4 rounded-lg shadow-inner">
    <div class="flex items-center mb-2">
      <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-3 border-2 border-gray-300 dark:border-gray-600">
      <div>
        <p class="font-semibold text-gray-800 dark:text-gray-200">John Doe</p>
        <p class="text-sm text-gray-500">2 days ago</p>
      </div>
    </div>
    <p class="text-gray-700 dark:text-gray-300">This is a great product! Highly recommend.</p>
  </div>

  <!-- Comment 2 -->
  <div class="mb-4 bg-white dark:bg-gray-700 p-4 rounded-lg shadow-inner">
    <div class="flex items-center mb-2">
      <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-3 border-2 border-gray-300 dark:border-gray-600">
      <div>
        <p class="font-semibold text-gray-800 dark:text-gray-200">Jane Smith</p>
        <p class="text-sm text-gray-500">1 day ago</p>
      </div>
    </div>
    <p class="text-gray-700 dark:text-gray-300">Fast shipping and excellent quality.</p>
  </div>

  <!-- Add new comment form -->
  <div class="mt-6">
    <textarea class="w-full p-3 rounded-lg border-gray-300 dark:border-gray-600 border-2 focus:outline-none focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-gray-200" rows="3" placeholder="Add a comment..."></textarea>
    <button class="mt-3 px-6 py-2 bg-blue-500 text-white rounded-lg shadow-md hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50">Submit Comment</button>
  </div>

</div>

Componentes relacionados

Componente de la sección de comentarios

Un componente complejo y receptivo de la sección de comentarios diseñado para sistemas de reservas/reservas con un esquema de color en blanco y negro inspirado en la Bauhaus y un color de acento brillante. Incluye avatares de usuario, calificaciones de estrellas, marcas de tiempo y compatibilidad con el modo oscuro.

Abrir

Sección de Comentarios sobre Brutalismo

Un componente de sección de comentarios de estilo brutalista para portafolios, con colores análogos, complejidad moderada, capacidad de respuesta y compatibilidad con modo oscuro.

Abrir

Componente de la sección de comentarios

Un componente de sección de comentarios responsivo con diseño de morfismo de vidrio, con elementos translúcidos similares al vidrio esmerilado con efectos de desenfoque y soporte de temas oscuros mediante Tailwind CSS.

Abrir