Rating System Component
A simple, responsive rating system component with sepia/brown tones, dark mode support, and microinteraction-focused styling, suitable for government/public service websites.
HTML Code
<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>Related Components
Rating System Component
A responsive Rating System Component with dark theme support, designed in a Minimalist/Flat style with a Pastel color scheme for social media interfaces. It is a complex component with multiple interactive elements.
Rating System Component
A responsive web component for rating items with a skeuomorphic design that mimics real-world counterparts. Suitable for showcasing work or products in a portfolio.
Bauhaus_Music_Rating_System
A responsive music/audio rating system component with a Bauhaus-inspired design, using a purple/violet color scheme. Includes dark mode support and interactive star rating functionality (visual only, no JS).