Componente del sistema de clasificación
Un componente del sistema de calificación simple y receptivo con tonos sepia/marrón, compatibilidad con modo oscuro y estilo centrado en la microinteracción, adecuado para sitios web gubernamentales/de servicio público.
Código HTML
<div class="flex flex-col items-center justify-center p-6 bg-brown-50 dark:bg-stone-900 min-h-screen font-sans">
<div class="w-full max-w-sm p-6 rounded-lg shadow-xl bg-white dark:bg-stone-800 transition-colors duration-300 transform hover:scale-105">
<h2 class="text-2xl font-semibold text-stone-800 dark:text-stone-100 mb-4 text-center">Rate Our Service</h2>
<p class="text-sm text-stone-600 dark:text-stone-300 mb-6 text-center">Your feedback helps us improve public services.</p>
<div class="flex justify-center space-x-2 sm:space-x-4 mb-6">
<!-- Star 1 -->
<button class="peer group flex items-center justify-center w-12 h-12 sm:w-16 sm:h-16 rounded-full bg-stone-200 dark:bg-stone-700 hover:bg-amber-300 dark:hover:bg-amber-600 transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-amber-500 transform hover:scale-110 active:scale-95">
<svg class="w-7 h-7 sm:w-9 sm:h-9 text-stone-600 dark:text-stone-400 group-hover:text-amber-700 dark:group-hover:text-amber-200 transition-colors duration-200" fill="currentColor" viewBox="0 0 24 24">
<path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279L12 18.896l-7.416 3.931 1.48-8.279L.332 9.306l8.332-1.151L12 .587z"/>
</svg>
</button>
<!-- Star 2 -->
<button class="peer group flex items-center justify-center w-12 h-12 sm:w-16 sm:h-16 rounded-full bg-stone-200 dark:bg-stone-700 hover:bg-amber-300 dark:hover:bg-amber-600 transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-amber-500 transform hover:scale-110 active:scale-95">
<svg class="w-7 h-7 sm:w-9 sm:h-9 text-stone-600 dark:text-stone-400 group-hover:text-amber-700 dark:group-hover:text-amber-200 transition-colors duration-200" fill="currentColor" viewBox="0 0 24 24">
<path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279L12 18.896l-7.416 3.931 1.48-8.279L.332 9.306l8.332-1.151L12 .587z"/>
</svg>
</button>
<!-- Star 3 -->
<button class="peer group flex items-center justify-center w-12 h-12 sm:w-16 sm:h-16 rounded-full bg-stone-200 dark:bg-stone-700 hover:bg-amber-300 dark:hover:bg-amber-600 transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-amber-500 transform hover:scale-110 active:scale-95">
<svg class="w-7 h-7 sm:w-9 sm:h-9 text-stone-600 dark:text-stone-400 group-hover:text-amber-700 dark:group-hover:text-amber-200 transition-colors duration-200" fill="currentColor" viewBox="0 0 24 24">
<path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279L12 18.896l-7.416 3.931 1.48-8.279L.332 9.306l8.332-1.151L12 .587z"/>
</svg>
</button>
<!-- Star 4 -->
<button class="peer group flex items-center justify-center w-12 h-12 sm:w-16 sm:h-16 rounded-full bg-stone-200 dark:bg-stone-700 hover:bg-amber-300 dark:hover:bg-amber-600 transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-amber-500 transform hover:scale-110 active:scale-95">
<svg class="w-7 h-7 sm:w-9 sm:h-9 text-stone-600 dark:text-stone-400 group-hover:text-amber-700 dark:group-hover:text-amber-200 transition-colors duration-200" fill="currentColor" viewBox="0 0 24 24">
<path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279L12 18.896l-7.416 3.931 1.48-8.279L.332 9.306l8.332-1.151L12 .587z"/>
</svg>
</button>
<!-- Star 5 -->
<button class="peer group flex items-center justify-center w-12 h-12 sm:w-16 sm:h-16 rounded-full bg-stone-200 dark:bg-stone-700 hover:bg-amber-300 dark:hover:bg-amber-600 transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-amber-500 transform hover:scale-110 active:scale-95">
<svg class="w-7 h-7 sm:w-9 sm:h-9 text-stone-600 dark:text-stone-400 group-hover:text-amber-700 dark:group-hover:text-amber-200 transition-colors duration-200" fill="currentColor" viewBox="0 0 24 24">
<path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279L12 18.896l-7.416 3.931 1.48-8.279L.332 9.306l8.332-1.151L12 .587z"/>
</svg>
</button>
</div>
<button class="w-full py-3 rounded-md bg-stone-700 text-white dark:bg-amber-700 dark:text-stone-100 hover:bg-stone-800 dark:hover:bg-amber-600 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-stone-500 dark:focus:ring-amber-500 transform hover:scale-105 active:scale-95">
Submit Rating
</button>
</div>
</div>Componentes relacionados
Skeuomorphic_Jewel_Tone_Rating_System_Simple
Un componente del sistema de calificación simple y receptivo con un diseño esqueuomórfico, combinación de colores en tono joya y compatibilidad con modo oscuro, adecuado para sitios web sin fines de lucro / caridad.
Componente del sistema de clasificación vibrante neumórfico
Un componente complejo e interactivo del sistema de clasificación diseñado con un estilo neumórfico y una combinación de colores vibrantes, adecuado para plataformas de foros y comunidades. Incluye calificaciones de estrellas, votación a favor/abajo y una pantalla numérica, con capacidad de respuesta total y compatibilidad con el modo oscuro.
Sistema de clasificación de glassmorphism
Un sistema de calificación al estilo Glassmorphism con colores complementarios, diseñado para plataformas de redes sociales. Incluye un diseño responsivo y soporte para el modo oscuro usando Tailwind CSS.