Componente del sistema di classificazione
Un componente del sistema di valutazione semplice e coinvolgente progettato con toni ricchi di gioielli, che fornisce un feedback di microinterazione per la documentazione e i siti della knowledge base. Completamente reattivo e supporta la modalità oscura.
Codice HTML
<div class="flex flex-col items-center justify-center p-6 bg-gray-50 dark:bg-gray-900 min-h-screen">
<div class="bg-white dark:bg-gray-800 shadow-xl rounded-lg p-6 sm:p-8 md:p-10 max-w-sm w-full transition-all duration-300 ease-in-out transform hover:scale-105">
<h3 class="text-xl sm:text-2xl font-bold text-gray-800 dark:text-gray-100 text-center mb-6">
How useful was this article?
</h3>
<div class="flex justify-center space-x-2 sm:space-x-3 mb-6">
<button aria-label="1 star rating" class="group p-2 rounded-full transition-all duration-200 ease-in-out hover:bg-red-500/20 active:scale-90">
<svg class="w-8 h-8 sm:w-9 sm:h-9 text-red-500 group-hover:text-red-600 dark:text-red-400 dark:group-hover:text-red-500 transition-colors duration-200" 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.538 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.565-1.838-.197-1.538-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-.69L9.049 2.927z"></path>
</svg>
</button>
<button aria-label="2 star rating" class="group p-2 rounded-full transition-all duration-200 ease-in-out hover:bg-orange-500/20 active:scale-90">
<svg class="w-8 h-8 sm:w-9 sm:h-9 text-orange-500 group-hover:text-orange-600 dark:text-orange-400 dark:group-hover:text-orange-500 transition-colors duration-200" 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.538 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.565-1.838-.197-1.538-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-.69L9.049 2.927z"></path>
</svg>
</button>
<button aria-label="3 star rating" class="group p-2 rounded-full transition-all duration-200 ease-in-out hover:bg-amber-500/20 active:scale-90">
<svg class="w-8 h-8 sm:w-9 sm:h-9 text-amber-500 group-hover:text-amber-600 dark:text-amber-400 dark:group-hover:text-amber-500 transition-colors duration-200" 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.538 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.565-1.838-.197-1.538-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-.69L9.049 2.927z"></path>
</svg>
</button>
<button aria-label="4 star rating" class="group p-2 rounded-full transition-all duration-200 ease-in-out hover:bg-emerald-500/20 active:scale-90">
<svg class="w-8 h-8 sm:w-9 sm:h-9 text-emerald-500 group-hover:text-emerald-600 dark:text-emerald-400 dark:group-hover:text-emerald-500 transition-colors duration-200" 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.538 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.565-1.838-.197-1.538-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-.69L9.049 2.927z"></path>
</svg>
</button>
<button aria-label="5 star rating" class="group p-2 rounded-full transition-all duration-200 ease-in-out hover:bg-indigo-500/20 active:scale-90">
<svg class="w-8 h-8 sm:w-9 sm:h-9 text-indigo-500 group-hover:text-indigo-600 dark:text-indigo-400 dark:group-hover:text-indigo-500 transition-colors duration-200" 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.538 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.565-1.838-.197-1.538-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-.69L9.049 2.927z"></path>
</svg>
</button>
</div>
<p class="text-sm text-gray-500 dark:text-gray-400 text-center">
Click 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 classificazione
Componente del sistema di classificazione retrò / vintage per l'e-commerce con combinazione di colori complementari. Non è necessario JavaScript, solo HTML con Tailwind CSS.
Componente del sistema di classificazione brutalista
Un componente del sistema di valutazione reattivo progettato in stile brutalismo utilizzando Tailwind CSS, con supporto per il tema scuro.