CCHub Logo CCHub Tailwind Collection
Komponenten Feedback-Komponenten Komponente "Feedback-Komponenten"

Komponente "Feedback-Komponenten"

Eine komplexe, reaktionsschnelle, von dunklen Themen unterstützte Feedback-Komponentenkomponente für ein Dashboard, die mit einer minimalistischen/flachen Ästhetik und einem pastellfarbenen Farbschema gestaltet ist. Es zeigt verschiedene Feedback-Elemente wie einen Fortschrittsbalken, Statusindikatoren und die letzten Aktivitäten an, wobei nur HTML mit Tailwind-CSS-Klassen verwendet wird.

Vorschau

HTML-Code 

<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>

Verwandte Komponenten

Komponente "Feedback-Komponenten"

Eine einfache, reaktionsschnelle Feedback-Komponente, die sich für Beratungs-/Dienstleistungswebsites eignet, mit einem triadischen Farbschema und Mikrointeraktionsdesignprinzipien. Beinhaltet Unterstützung für den Dunkelmodus.

Offen

Feedback-Komponente für gemeinnützige Organisationen (3D-Stil)

Eine einfache, reaktionsschnelle Feedback-Komponente für gemeinnützige Organisationen mit einer 3D-Designästhetik und warmen Sonnenuntergangstönen. Enthält Unterstützung für den Dunkelmodus.

Offen

Komponente "Feedback-Komponenten"

Eine minimalistische Feedback-Komponente, die für den E-Commerce entwickelt wurde, mit sanften Pastellfarben, responsivem Design und Unterstützung für dunkle Themen. Die Komponente enthält ein Feedback-Formular mit Eingabefeldern, ein Bewertungssystem und einen Senden-Button, die alle mit Tailwind CSS gestaltet sind.

Offen