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
Monospace_Developer_Autumn_Rating_System_Component
Un composant complexe de système d’évaluation inspiré du monospace avec des couleurs d’automne pour les applications industrielles et manufacturières. Dispose d’un design épuré, de plusieurs éléments interactifs, d’une réactivité totale et d’une prise en charge du mode sombre.
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
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.