CCHub Logo CCHub Tailwind Collection
Componenti Sistema di valutazione Componente del sistema di classificazione

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.

Anteprima

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 reattivo con supporto per il tema scuro, progettato in uno stile minimalista/piatto con una combinazione di colori pastello per le interfacce dei social media. Si tratta di un componente complesso con più elementi interattivi.

Aperto

Componente del sistema di classificazione

Componente del sistema di valutazione con stile neumorfismo, effetti reattivi e supporto per temi scuri.

Aperto

Componente del sistema di classificazione

Un componente del sistema di valutazione in stile retrò/vintage progettato con Tailwind CSS, con design reattivo e supporto per temi scuri.

Aperto