Komponente des Bewertungssystems
Eine reaktionsschnelle Bewertungssystemkomponente mit Unterstützung für dunkle Themen, die in einem minimalistischen/flachen Stil mit einem pastellfarbenen Farbschema für Social-Media-Schnittstellen gestaltet ist. Es handelt sich um eine komplexe Komponente mit mehreren interaktiven Elementen.
HTML-Code
<div class="flex items-center justify-center bg-gray-100 dark:bg-gray-800 p-4 min-h-screen">
<div class="w-full max-w-sm bg-white dark:bg-gray-700 rounded-lg shadow-md p-6">
<h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-4">Rate this item</h2>
<div class="flex items-center space-x-2 mb-6">
<svg class="w-8 h-8 text-yellow-400 dark:text-yellow-500" fill="currentColor" viewBox="0 0 20 20">
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.546 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.791.565-1.842-.197-1.546-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path>
</svg>
<svg class="w-8 h-8 text-yellow-400 dark:text-yellow-500" fill="currentColor" viewBox="0 0 20 20">
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.546 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.791.565-1.842-.197-1.546-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path>
</svg>
<svg class="w-8 h-8 text-yellow-400 dark:text-yellow-500" fill="currentColor" viewBox="0 0 20 20">
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.546 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.791.565-1.842-.197-1.546-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path>
</svg>
<svg class="w-8 h-8 text-gray-300 dark:text-gray-500" fill="currentColor" viewBox="0 0 20 20">
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.546 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.791.565-1.842-.197-1.546-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path>
</svg>
<svg class="w-8 h-8 text-gray-300 dark:text-gray-500" fill="currentColor" viewBox="0 0 20 20">
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.546 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.791.565-1.842-.197-1.546-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path>
</svg>
</div>
<textarea
class="w-full px-3 py-2 text-gray-700 dark:text-gray-200 border rounded-lg focus:outline-none focus:shadow-outline bg-gray-50 dark:bg-gray-600 dark:border-gray-500"
rows="4"
placeholder="Write your review..."
></textarea>
<div class="mt-4 flex justify-end">
<button
class="px-4 py-2 bg-blue-500 text-white text-sm font-medium rounded hover:bg-blue-600 focus:outline-none focus:shadow-outline dark:bg-blue-600 dark:hover:bg-blue-700"
>
Submit
</button>
</div>
</div>
</div>Verwandte Komponenten
Bewertungssystem für Glasmorphismus
Ein Bewertungssystem im Stil von Glassmorphism mit Komplementärfarben, das für Social-Media-Plattformen entwickelt wurde. Es enthält ein responsives Layout und Unterstützung für den Dunkelmodus mit Tailwind CSS.
Komponente des brutalistischen Bewertungssystems
Eine reaktionsschnelle Bewertungssystem-Komponente, die im Brutalismus-Stil unter Verwendung von Tailwind CSS mit Unterstützung für dunkle Themen entwickelt wurde.