Composant du système d’évaluation
Un composant de classement de conception minimaliste et plat adapté aux applications de tableau de bord, avec des tons de bijou et une réactivité totale avec prise en charge du mode sombre.
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>Composants associés
Composant du système d’évaluation rétro
Un composant de système d’évaluation rétro/vintage avec des tons Terre, conçu pour les sites Web d’entreprise. Il prend en charge le design réactif et le thème sombre.
Composant du système d’évaluation
Un composant de système d’évaluation de style rétro/vintage conçu avec Tailwind CSS, avec un design réactif et la prise en charge du thème sombre.
Composant du système d’évaluation forestière Monospace
Un composant de système de notation propre, inspiré du code, avec une palette de vert forêt, adapté aux portefeuilles. Dispose d’étoiles interactives pour l’évaluation et affiche les notes moyennes, entièrement réactif avec prise en charge du mode sombre.