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

Komponente "Feedback-Komponenten"

Eine Feedback-Komponente mit einer Bewertungsskala und einem Textbereich für Kommentare, mit responsivem Design und Unterstützung für dunkle Themen.

Vorschau

HTML-Code 

<div class="container mx-auto p-4 md:p-8 bg-gray-100 dark:bg-gray-800 shadow-lg rounded-lg">
  <h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-4">Leave Feedback</h2>
  <div class="mb-4">
    <label class="block text-gray-700 dark:text-gray-300 text-sm font-bold mb-2" for="rating">
      Overall Rating
    </label>
    <div class="flex items-center">
      <input type="radio" name="rating" id="rating-5" class="hidden" value="5" />
      <label for="rating-5" class="text-3xl text-gray-400 dark:text-gray-600 cursor-pointer select-none hover:text-yellow-500 dark:hover:text-yellow-500 transition-colors duration-200">★</label>
      <input type="radio" name="rating" id="rating-4" class="hidden" value="4" />
      <label for="rating-4" class="text-3xl text-gray-400 dark:text-gray-600 cursor-pointer select-none hover:text-yellow-500 dark:hover:text-yellow-500 transition-colors duration-200">★</label>
      <input type="radio" name="rating" id="rating-3" class="hidden" value="3" />
      <label for="rating-3" class="text-3xl text-gray-400 dark:text-gray-600 cursor-pointer select-none hover:text-yellow-500 dark:hover:text-yellow-500 transition-colors duration-200">★</label>
      <input type="radio" name="rating" id="rating-2" class="hidden" value="2" />
      <label for="rating-2" class="text-3xl text-gray-400 dark:text-gray-600 cursor-pointer select-none hover:text-yellow-500 dark:hover:text-yellow-500 transition-colors duration-200">★</label>
      <input type="radio" name="rating" id="rating-1" class="hidden" value="1" />
      <label for="rating-1" class="text-3xl text-gray-400 dark:text-gray-600 cursor-pointer select-none hover:text-yellow-500 dark:hover:text-yellow-500 transition-colors duration-200">★</label>
    </div>
  </div>
  <div class="mb-4">
    <label class="block text-gray-700 dark:text-gray-300 text-sm font-bold mb-2" for="comment">
      Your Feedback
    </label>
    <textarea id="comment" name="comment" rows="4" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 dark:text-gray-200 leading-tight focus:outline-none focus:shadow-outline bg-white dark:bg-gray-700 dark:border-gray-600" placeholder="Tell us about your experience..."></textarea>
  </div>
  <div class="flex items-center justify-between">
    <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline dark:bg-blue-700 dark:hover:bg-blue-900" type="button">
      Submit Feedback
    </button>
  </div>
</div>

Verwandte Komponenten

Feedback-Komponente

Eine reaktionsschnelle Feedback-Komponente, die für Social-Networking-Schnittstellen entwickelt wurde und 3D-Designelemente in einem Graustufen-Farbschema mit Unterstützung für den Dunkelmodus enthält, zugeschnitten auf mittlere Komplexität und Interaktivität.

Offen

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

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