레트로 레이팅 시스템 구성 요소
전자 상거래를 위한 간단한 레트로 스타일의 등급 시스템 구성 요소로, Tailwind CSS를 사용하여 생생한 색상과 어두운 테마를 지원합니다.
HTML 코드
<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>