Composant du système d’évaluation
Un composant de système d’évaluation réactif conçu dans un style Brutalism à l’aide de Tailwind CSS. Il prend en charge le thème sombre et a un contraste élevé avec un design brut et audacieux.
HTML Code
<div class="max-w-sm mx-auto p-6 bg-white dark:bg-gray-800 rounded-lg shadow-md">
<h2 class="text-2xl font-bold text-gray-800 dark:text-white">Rate Us!</h2>
<p class="text-gray-600 dark:text-gray-400 mb-4">Your feedback is valuable to us!</p>
<div class="flex items-center justify-center mb-4">
<img src="https://picsum.photos/100/100" alt="Random User" class="rounded-full border-2 border-gray-800 dark:border-white">
<span class="ml-3 text-lg text-gray-800 dark:text-white">User Name</span>
</div>
<div class="flex justify-center">
<span class="text-5xl text-yellow-400 cursor-pointer hover:text-yellow-500 transition duration-200">★</span>
<span class="text-5xl text-yellow-400 cursor-pointer hover:text-yellow-500 transition duration-200">★</span>
<span class="text-5xl text-yellow-400 cursor-pointer hover:text-yellow-500 transition duration-200">★</span>
<span class="text-5xl text-yellow-400 cursor-pointer hover:text-yellow-500 transition duration-200">★</span>
<span class="text-5xl text-yellow-400 cursor-pointer hover:text-yellow-500 transition duration-200">★</span>
</div>
<div class="mt-4">
<button class="w-full bg-gray-800 dark:bg-yellow-400 text-white py-2 rounded-md font-bold hover:bg-yellow-500 transition duration-200">Submit Rating</button>
</div>
</div>
<style>
@media (prefers-color-scheme: dark) {
.dark:hover\:bg-yellow-500:hover {
background-color: #bb8d29;
}
}
</style>Composants associés
Composant du système d’évaluation
Un composant de système de notation réactif avec prise en charge du thème sombre, conçu dans un style minimaliste/plat avec une palette de couleurs pastel pour les interfaces de médias sociaux. Il s’agit d’un composant complexe avec de multiples éléments interactifs.
Composant du système d’évaluation rétro
Un composant de système d’évaluation simple et de style rétro pour le commerce électronique, avec des couleurs vives et une prise en charge du thème sombre à l’aide de Tailwind CSS.
Composant du système d’évaluation
Un composant du système d’évaluation conçu dans un style rétro/vintage, utilisant une palette de couleurs complémentaires et une interface complexe pour le contenu du blog. Ce composant prend en charge le mode sombre et est réactif à l’aide de Tailwind CSS.