Componente del sistema di classificazione
Un componente del sistema di valutazione dal design minimalista/piatto con una combinazione di colori complementari, complessità moderata, adatto per il consumo di blog/contenuti. Presenta un design reattivo con supporto per temi scuri utilizzando le classi CSS Tailwind e senza JavaScript.
Codice HTML
<div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
<div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md max-w-sm w-full">
<h2 class="text-xl font-semibold text-gray-800 dark:text-white mb-4">Rate this content</h2>
<div class="flex justify-center space-x-2 mb-4">
<svg class="w-8 h-8 text-gray-300 dark:text-gray-600 hover:text-yellow-400 dark:hover:text-yellow-300 transition-colors duration-200 cursor-pointer" 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.539 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.565-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118l-2.8-2.034c-.783-.57-.381-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-600 hover:text-yellow-400 dark:hover:text-yellow-300 transition-colors duration-200 cursor-pointer" 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.539 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.565-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118l-2.8-2.034c-.783-.57-.381-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-300 hover:text-yellow-400 dark:hover:text-yellow-300 transition-colors duration-200 cursor-pointer" 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.539 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.565-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118l-2.8-2.034c-.783-.57-.381-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-300 hover:text-yellow-400 dark:hover:text-yellow-300 transition-colors duration-200 cursor-pointer" 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.539 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.565-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118l-2.8-2.034c-.783-.57-.381-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-300 hover:text-yellow-400 dark:hover:text-yellow-300 transition-colors duration-200 cursor-pointer" 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.539 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.565-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118l-2.8-2.034c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path>
</svg>
</div>
<p class="text-sm text-gray-600 dark:text-gray-400 text-center">Click on a star to rate!</p>
</div>
</div>Componenti correlati
Componente del sistema di classificazione
Un componente del sistema di valutazione pulito e minimalista con una combinazione di colori caramelle/dolci, progettato per i dati meteorologici/climatici. Utilizza un sistema a griglia ed enfatizza la tipografia, con piena reattività e supporto per la modalità scura.
Componente del sistema di valutazione 24
Un componente del sistema di classificazione progettato in 3D che supporta il tema scuro e gli effetti reattivi. Questo componente presenta stelle per le valutazioni, gli avatar degli utenti e una sezione commenti.
Componente del sistema di classificazione della foresta a spaziatura singola
Un componente del sistema di rating pulito e ispirato al codice con una tavolozza verde bosco, adatto per i portfolio. Dispone di stelle interattive per la valutazione e visualizza le valutazioni medie, completamente reattivo con supporto per la modalità oscura.