레트로 레이팅 시스템 구성 요소
전자 상거래를 위한 간단한 레트로 스타일의 등급 시스템 구성 요소로, 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>관련 구성 요소
등급 시스템 구성 요소
Retro/Vintage Rating System Complementary Color Scheme을 사용한 전자 상거래를 위한 구성 요소.Dark Mode 지원으로 반응형. JavaScript가 필요하지 않으며 Tailwind CSS가 있는 HTML만 있으면 됩니다.
Bauhaus_Music_Rating_System
반응형 음악/오디오 등급 시스템 구성 요소로, Bauhaus에서 영감을 받은 디자인으로 보라색/보라색 색 구성표를 사용합니다. 다크 모드 지원 및 대화형 별 등급 기능(시각적인 만, JS 제외)이 포함됩니다.