CCHub Logo CCHub Tailwind Collection
Komponenten Bewertungssystem Komponente des Bewertungssystems

Komponente des Bewertungssystems

Eine minimalistische und flache Design-Bewertungskomponente, die für Dashboard-Anwendungen geeignet ist, mit Juwelentönen und voller Reaktionsfähigkeit mit Unterstützung des Dunkelmodus.

Vorschau

HTML-Code 

<div class="p-4 sm:p-6 md:p-8 bg-white dark:bg-gray-800 rounded-lg shadow-lg max-w-sm mx-auto transition-colors duration-300">
  <h2 class="text-lg sm:text-xl font-semibold text-gray-800 dark:text-white mb-4 text-center sm:text-left">Overall Satisfaction</h2>
  <div class="flex items-center justify-center sm:justify-start mb-4">
    <div class="flex space-x-1">
      <!-- Active Stars -->
      <svg class="w-6 h-6 sm:w-7 sm:h-7 text-emerald-500 dark:text-emerald-400 fill-current" viewBox="0 0 24 24">
        <path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279L12 18.896l-7.416 3.896 1.48-8.279L.001 9.306l8.332-1.151L12 .587z" />
      </svg>
      <svg class="w-6 h-6 sm:w-7 sm:h-7 text-emerald-500 dark:text-emerald-400 fill-current" viewBox="0 0 24 24">
        <path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279L12 18.896l-7.416 3.896 1.48-8.279L.001 9.306l8.332-1.151L12 .587z" />
      </svg>
      <svg class="w-6 h-6 sm:w-7 sm:h-7 text-emerald-500 dark:text-emerald-400 fill-current" viewBox="0 0 24 24">
        <path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279L12 18.896l-7.416 3.896 1.48-8.279L.001 9.306l8.332-1.151L12 .587z" />
      </svg>
      <svg class="w-6 h-6 sm:w-7 sm:h-7 text-emerald-500 dark:text-emerald-400 fill-current" viewBox="0 0 24 24">
        <path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279L12 18.896l-7.416 3.896 1.48-8.279L.001 9.306l8.332-1.151L12 .587z" />
      </svg>
      <!-- Inactive Stars -->
      <svg class="w-6 h-6 sm:w-7 sm:h-7 text-gray-300 dark:text-gray-600 fill-current" viewBox="0 0 24 24">
        <path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279L12 18.896l-7.416 3.896 1.48-8.279L.001 9.306l8.332-1.151L12 .587z" />
      </svg>
    </div>
    <span class="ml-3 text-lg sm:text-xl font-bold text-gray-800 dark:text-white">4.0</span>
  </div>
  <p class="text-sm sm:text-base text-gray-600 dark:text-gray-300 text-center sm:text-left">Based on 125 ratings</p>
</div>

Verwandte Komponenten

Komponente des Bewertungssystems

Eine komplexe, retro-thematische Bewertungssystemkomponente für soziale Medien mit einem monochromatischen Farbschema. Es reagiert vollständig und unterstützt einen Dunkelmodus. Diese Komponente verwendet nur HTML und Tailwind CSS ohne JavaScript.

Offen

Komponente des Bewertungssystems

Eine minimalistische/flache Design-Bewertungssystemkomponente mit komplementärem Farbschema, moderater Komplexität, geeignet für den Konsum von Blogs / Inhalten. Es verfügt über ein responsives Design mit Unterstützung für dunkle Themen, die Tailwind CSS-Klassen und kein JavaScript verwenden.

Offen

Brutalism_Travel_Rating_System

Eine einfache, brutalistische Bewertungssystemkomponente für Reise- und Tourismus-Websites mit coolen Neutraltönen und Unterstützung für den Dunkelmodus.

Offen