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

Komponente "Feedback-Komponenten"

Minimalistische/flache Design-Feedback-Komponente für das Dashboard mit komplementärem Farbschema und moderater Komplexität, reaktionsschneller und dunkler Theme-Unterstützung. Verwendet HTML und Tailwind CSS. Kein JavaScript. Mit interaktiven Elementen. Bilder von picsum.photos und Avatare von randomuser.me.

Vorschau

HTML-Code 

<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6">
  <div class="flex items-center justify-between mb-4">
    <h2 class="text-lg font-semibold text-gray-800 dark:text-white">User Feedback</h2>
    <span class="text-sm text-gray-500 dark:text-gray-400">Last 30 days</span>
  </div>
  <div class="space-y-4">
    <div class="flex items-start space-x-4">
      <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
      <div class="flex-1">
        <div class="flex items-center justify-between">
          <h4 class="text-sm font-medium text-gray-900 dark:text-white">John Doe</h4>
          <span class="text-xs text-gray-500 dark:text-gray-400">2 days ago</span>
        </div>
        <p class="text-sm text-gray-600 dark:text-gray-300">This dashboard is very helpful. The data is presented clearly.</p>
      </div>
    </div>
    <div class="flex items-start space-x-4">
      <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar">
      <div class="flex-1">
        <div class="flex items-center justify-between">
          <h4 class="text-sm font-medium text-gray-900 dark:text-white">Jane Smith</h4>
          <span class="text-xs text-gray-500 dark:text-gray-400">5 days ago</span>
        </div>
        <p class="text-sm text-gray-600 dark:text-gray-300">I love the new features! Especially the real-time updates.</p>
      </div>
    </div>
    <div class="flex items-start space-x-4">
      <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/19.jpg" alt="User Avatar">
      <div class="flex-1">
        <div class="flex items-center justify-between">
          <h4 class="text-sm font-medium text-gray-900 dark:text-white">Peter Jones</h4>
          <span class="text-xs text-gray-500 dark:text-gray-400">1 week ago</span>
        </div>
        <p class="text-sm text-gray-600 dark:text-gray-300">Could you add an option to export data as a CSV file?</p>
      </div>
    </div>
  </div>
  <div class="mt-6 flex justify-center">
    <button class="px-4 py-2 bg-indigo-600 text-white text-sm font-medium rounded-md hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 dark:bg-indigo-700 dark:hover:bg-indigo-600 dark:focus:ring-offset-gray-800">View All Feedback</button>
  </div>
</div>

Verwandte Komponenten

Cyberpunk_CRM_Feedback_Component

Eine komplexe, reaktionsschnelle Feedback-Komponente für CRM/Business Tools mit Cyberpunk-Ästhetik unter Verwendung von Corporate Blues. Enthält mehrere Registerkarten, ein Formular und eine Liste der letzten Rückmeldungen, die den Dunkelmodus unterstützen.

Offen

Komponente "Feedback-Komponenten"

Eine komplexe, triadische Benutzeroberfläche im Dunkelmodus für den Feedback-Bereich einer Bildungsplattform mit verschiedenen Feedback-Typen und interaktiven Elementen.

Offen

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.

Offen