Composant du système d’évaluation
Un composant du système d’évaluation minimaliste/flat design avec une palette de couleurs complémentaires, une complexité modérée, adapté à la consommation de blogs/contenus. Il présente un design réactif avec la prise en charge du thème sombre utilisant les classes CSS Tailwind et sans JavaScript.
HTML Code
<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>Composants associés
Composant du système d’évaluation
Un composant de système d’évaluation minimaliste adapté aux sites Web d’entreprise, avec une mise en page réactive et une prise en charge du thème sombre.
Composant du système d’évaluation
Un composant de système d’évaluation de style glassmorphic adapté aux portfolios présentant des travaux ou des produits, avec un design réactif et une prise en charge du thème sombre.
Composant du système d’évaluation
Un composant complexe de système d’évaluation à thème rétro pour les médias sociaux, doté d’une palette de couleurs monochromatiques. Il est entièrement réactif et prend en charge un mode sombre. Ce composant utilise uniquement HTML et Tailwind CSS, sans JavaScript.