Componentes Componentes de retroalimentación Componentes de retroalimentación Componente

Componentes de retroalimentación Componente

Un componente de componentes de retroalimentación complejo, receptivo y compatible con temas oscuros para un tablero, diseñado con una estética minimalista / plana y una combinación de colores pastel. Muestra varios elementos de retroalimentación, como una barra de progreso, indicadores de estado y actividad reciente, utilizando solo HTML con clases CSS de Tailwind.

Vista previa

Código HTML

<div class="p-6 bg-white dark:bg-gray-800 shadow-lg rounded-lg">
  <h2 class="text-2xl font-semibold text-gray-800 dark:text-white mb-6">Feedback Overview</h2>

  <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
    <!-- Positive Feedback -->
    <div class="bg-gradient-to-r from-green-200 to-green-100 dark:from-green-700 dark:to-green-600 p-4 rounded-md flex items-center justify-between">
      <div class="flex items-center">
        <div class="p-3 bg-green-400 dark:bg-green-500 rounded-full mr-3">
          <svg class="h-6 w-6 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
          </svg>
        </div>
        <p class="text-green-800 dark:text-green-100 font-medium">Positive Feedback</p>
      </div>
      <span class="text-green-800 dark:text-green-100 text-xl font-bold">85%</span>
    </div>

    <!-- Negative Feedback -->
    <div class="bg-gradient-to-r from-red-200 to-red-100 dark:from-red-700 dark:to-red-600 p-4 rounded-md flex items-center justify-between">
      <div class="flex items-center">
        <div class="p-3 bg-red-400 dark:bg-red-500 rounded-full mr-3">
          <svg class="h-6 w-6 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
          </svg>
        </div>
        <p class="text-red-800 dark:text-red-100 font-medium">Negative Feedback</p>
      </div>
      <span class="text-red-800 dark:text-red-100 text-xl font-bold">15%</span>
    </div>
  </div>

  <!-- Feedback Progress Bar -->
  <div class="mb-8">
    <h3 class="text-lg font-semibold text-gray-700 dark:text-gray-200 mb-3">Overall Satisfaction</h3>
    <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-4">
      <div class="bg-teal-400 h-4 rounded-full" style="width: 75%;"></div>
    </div>
    <p class="text-sm text-gray-500 dark:text-gray-400 mt-2 text-right">75% Satisfied</p>
  </div>

  <!-- Recent Feedback Activity -->
  <div>
    <h3 class="text-lg font-semibold text-gray-700 dark:text-gray-200 mb-4">Recent Activity</h3>
    <ul class="space-y-4">
      <li class="flex items-center">
        <img class="h-10 w-10 rounded-full object-cover mr-4" src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar">
        <div class="flex-grow">
          <p class="text-gray-800 dark:text-gray-100 font-medium">"Great service, very helpful!"</p>
          <p class="text-sm text-gray-500 dark:text-gray-400">- Jane Doe <span class="ml-2 px-2 py-0.5 bg-green-100 dark:bg-green-700 text-green-700 dark:text-green-100 text-xs font-semibold rounded-full">Positive</span></p>
        </div>
        <span class="text-sm text-gray-400 dark:text-gray-500">2 hours ago</span>
      </li>
      <li class="flex items-center">
        <img class="h-10 w-10 rounded-full object-cover mr-4" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
        <div class="flex-grow">
          <p class="text-gray-800 dark:text-gray-100 font-medium">"Room for improvement on delivery."</p>
          <p class="text-sm text-gray-500 dark:text-gray-400">- John Smith <span class="ml-2 px-2 py-0.5 bg-yellow-100 dark:bg-yellow-700 text-yellow-700 dark:text-yellow-100 text-xs font-semibold rounded-full">Neutral</span></p>
        </div>
        <span class="text-sm text-gray-400 dark:text-gray-500">1 day ago</span>
      </li>
      <li class="flex items-center">
        <img class="h-10 w-10 rounded-full object-cover mr-4" src="https://randomuser.me/api/portraits/women/60.jpg" alt="User Avatar">
        <div class="flex-grow">
          <p class="text-gray-800 dark:text-gray-100 font-medium">"Not satisfied with the product quality."</p>
          <p class="text-sm text-gray-500 dark:text-gray-400">- Emily White <span class="ml-2 px-2 py-0.5 bg-red-100 dark:bg-red-700 text-red-700 dark:text-red-100 text-xs font-semibold rounded-full">Negative</span></p>
        </div>
        <span class="text-sm text-gray-400 dark:text-gray-500">3 days ago</span>
      </li>
    </ul>
  </div>
</div>

Componentes relacionados

Componente de retroalimentación

Un componente de retroalimentación receptivo diseñado para interfaces de redes sociales, que incorpora elementos de diseño 3D en un esquema de color en escala de grises con soporte para modo oscuro, adaptado para una complejidad e interactividad medias.

Abrir