Retro Rating System Component
A simple, retro-styled rating system component for e-commerce, featuring vibrant colors and dark theme support using Tailwind CSS.
HTML Code
<div class="flex items-center justify-center min-h-screen bg-gray-200 dark:bg-gray-800">
<div class="flex space-x-1 text-2xl">
<!-- Star 1 -->
<svg class="w-8 h-8 text-yellow-400 dark:text-yellow-500" fill="currentColor" viewBox="0 0 24 24">
<path d="M12 .288l3.525 10.917L24 11.462l-8.475 5.068 3.119 9.142L12 20.05l-6.644 5.622 3.119-9.142L0 11.462l8.475-.257L12 .288z"/>
</svg>
<!-- Star 2 -->
<svg class="w-8 h-8 text-yellow-400 dark:text-yellow-500" fill="currentColor" viewBox="0 0 24 24">
<path d="M12 .288l3.525 10.917L24 11.462l-8.475 5.068 3.119 9.142L12 20.05l-6.644 5.622 3.119-9.142L0 11.462l8.475-.257L12 .288z"/>
</svg>
<!-- Star 3 -->
<svg class="w-8 h-8 text-yellow-400 dark:text-yellow-500" fill="currentColor" viewBox="0 0 24 24">
<path d="M12 .288l3.525 10.917L24 11.462l-8.475 5.068 3.119 9.142L12 20.05l-6.644 5.622 3.119-9.142L0 11.462l8.475-.257L12 .288z"/>
</svg>
<!-- Star 4 -->
<svg class="w-8 h-8 text-yellow-400 dark:text-yellow-500" fill="currentColor" viewBox="0 0 24 24">
<path d="M12 .288l3.525 10.917L24 11.462l-8.475 5.068 3.119 9.142L12 20.05l-6.644 5.622 3.119-9.142L0 11.462l8.475-.257L12 .288z"/>
</svg>
<!-- Star 5 (empty) -->
<svg class="w-8 h-8 text-gray-400 dark:text-gray-600" fill="currentColor" viewBox="0 0 24 24">
<path d="M12 .288l3.525 10.917L24 11.462l-8.475 5.068 3.119 9.142L12 20.05l-6.644 5.622 3.119-9.142L0 11.462l8.475-.257L12 .288z"/>
</svg>
</div>
</div>Related Components
Rating System Component
A minimalist/flat design rating system component with a complementary color scheme, moderate complexity, suitable for blog/content consumption. It features a responsive design with dark theme support using Tailwind CSS classes and no JavaScript.
Rating System Component
A responsive rating system component designed in a Brutalism style using Tailwind CSS. It supports dark theme and has high contrast with a raw and bold design.
Rating System Component
A complex, retro-themed rating system component for social media, featuring a monochromatic color scheme. It's fully responsive and supports a dark mode. This component uses only HTML and Tailwind CSS, with no JavaScript.