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.
HTML Code
<div class="max-w-md mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-md p-6">
<h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200 mb-4">Rate Our Service</h2>
<div class="flex items-center space-x-2 mb-4">
<img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
<span class="text-gray-700 dark:text-gray-300">John Doe</span>
</div>
<div class="flex">
<span class="text-gray-600 dark:text-gray-400 mr-2">Rating:</span>
<div class="flex items-center space-x-1">
<svg class="w-6 h-6 text-yellow-500 dark:text-yellow-400" fill="currentColor" viewBox="0 0 20 20"><path d="M10 15l-5.878 3.09 1.121-6.528L0 6.091l6.637-.557L10 0l3.363 5.534L20 6.091l-5.243 5.471 1.121 6.528z"/></svg>
<svg class="w-6 h-6 text-yellow-500 dark:text-yellow-400" fill="currentColor" viewBox="0 0 20 20"><path d="M10 15l-5.878 3.09 1.121-6.528L0 6.091l6.637-.557L10 0l3.363 5.534L20 6.091l-5.243 5.471 1.121 6.528z"/></svg>
<svg class="w-6 h-6 text-yellow-500 dark:text-yellow-400" fill="currentColor" viewBox="0 0 20 20"><path d="M10 15l-5.878 3.09 1.121-6.528L0 6.091l6.637-.557L10 0l3.363 5.534L20 6.091l-5.243 5.471 1.121 6.528z"/></svg>
<svg class="w-6 h-6 text-yellow-500 dark:text-yellow-400" fill="currentColor" viewBox="0 0 20 20"><path d="M10 15l-5.878 3.09 1.121-6.528L0 6.091l6.637-.557L10 0l3.363 5.534L20 6.091l-5.243 5.471 1.121 6.528z"/></svg>
<svg class="w-6 h-6 text-yellow-500 dark:text-yellow-400" fill="currentColor" viewBox="0 0 20 20"><path d="M10 15l-5.878 3.09 1.121-6.528L0 6.091l6.637-.557L10 0l3.363 5.534L20 6.091l-5.243 5.471 1.121 6.528z"/></svg>
</div>
</div>
<textarea class="w-full p-2 bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-300 rounded-md focus:outline-none focus:ring focus:ring-yellow-300 dark:focus:ring-yellow-400" placeholder="Leave your feedback here..."></textarea>
<button class="mt-4 px-4 py-2 bg-yellow-500 dark:bg-yellow-400 text-white rounded-md hover:bg-yellow-600 dark:hover:bg-yellow-500">Submit</button>
</div>Composants associés
Composant du système d’évaluation des couleurs pastel Bauhaus
Un composant de système d’évaluation réactif et fonctionnel avec des formes géométriques et des couleurs pastel, adapté à l’intégration dans le tableau de bord. Inclut la prise en charge du mode 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.
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.