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.
HTML Code
<div class="p-4 sm:p-6 md:p-8 bg-gradient-to-br from-purple-50 to-pink-50 dark:from-gray-800 dark:to-gray-900 min-h-screen flex items-center justify-center font-sans">
<div class="w-full max-w-md mx-auto bg-white dark:bg-gray-700 rounded-lg shadow-xl p-6 sm:p-8 border border-gray-100 dark:border-gray-600 transition-all duration-300 ease-in-out">
<h3 class="text-xl sm:text-2xl font-bold text-gray-800 dark:text-gray-100 mb-6 text-center tracking-wide">Rate Our Service</h3>
<div class="flex justify-center items-center gap-2 sm:gap-3 mb-8">
<button aria-label="1 star rating" class="rating-star text-3xl sm:text-4xl text-gray-300 dark:text-gray-500 hover:text-yellow-400 dark:hover:text-yellow-300 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-blue-300 rounded-sm">
★
</button>
<button aria-label="2 star rating" class="rating-star text-3xl sm:text-4xl text-gray-300 dark:text-gray-500 hover:text-yellow-400 dark:hover:text-yellow-300 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-blue-300 rounded-sm">
★
</button>
<button aria-label="3 star rating" class="rating-star text-3xl sm:text-4xl text-yellow-400 dark:text-yellow-300 hover:text-yellow-400 dark:hover:text-yellow-300 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-blue-300 rounded-sm">
★
</button>
<button aria-label="4 star rating" class="rating-star text-3xl sm:text-4xl text-gray-300 dark:text-gray-500 hover:text-yellow-400 dark:hover:text-yellow-300 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-blue-300 rounded-sm">
★
</button>
<button aria-label="5 star rating" class="rating-star text-3xl sm:text-4xl text-gray-300 dark:text-gray-500 hover:text-yellow-400 dark:hover:text-yellow-300 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-blue-300 rounded-sm">
★
</button>
</div>
<div class="mb-6">
<label for="comments" class="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-2">Comments (Optional):</label>
<textarea id="comments" rows="4" class="block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:ring-2 focus:ring-blue-300 focus:border-blue-300 dark:bg-gray-800 dark:text-gray-100 resize-none transition-colors duration-200 placeholder-gray-400 dark:placeholder-gray-500" placeholder="Tell us about your experience..."></textarea>
</div>
<div class="flex justify-center">
<button type="submit" class="w-full max-w-xs py-2 px-4 border border-transparent rounded-md shadow-sm text-lg font-semibold text-white bg-blue-500 hover:bg-blue-600 dark:bg-blue-600 dark:hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-offset-gray-800 dark:focus:ring-blue-600 transition-colors duration-200 ease-in-out transform hover:-translate-y-0.5">
Submit Rating
</button>
</div>
</div>
</div>Composants associés
Bauhaus_Music_Rating_System
Un composant réactif du système d’évaluation musicale/audio avec un design inspiré du Bauhaus, utilisant une palette de couleurs violet/violet. Inclut la prise en charge du mode sombre et la fonctionnalité interactive de classement par étoiles (visuel uniquement, pas de JS).
Skeuomorphic_Jewel_Tone_Rating_System_Simple
Un composant de système d’évaluation simple et réactif avec un design skeuomorphe, une palette de couleurs de bijou et une prise en charge du mode sombre, adapté aux sites Web à but non lucratif/caritatifs.
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.