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

Feedback-Komponente

Eine reaktionsschnelle Feedback-Komponente, die nach den Prinzipien des Material Designs entwickelt wurde, Erdtöne enthält und für die Unterstützung des Dunkelmodus ausgestattet ist. Diese Komponente wurde speziell für Dashboards entwickelt und verfügt über verschiedene interaktive Elemente.

Offen

Brutalistische Feedback-Komponente

Eine brutalistische Feedback-Komponente mit hohem Kontrast und plakativer Typografie.

Offen

Feedback-Komponente

Skeuomorphismus-inspirierte Feedback-Komponente mit einem analogen Farbschema für ein Dashboard. Entwickelt, um einfach und reaktionsschnell zu sein und den Dunkelmodus mit Tailwind CSS zu unterstützen. Verwendet shadcn/ui für verbesserte Formatierung und Komponenten.

Offen