등급 시스템 구성 요소
대시보드 애플리케이션에 적합한 미니멀하고 평평한 디자인 등급 구성 요소로, 보석 톤과 다크 모드 지원으로 완전한 응답성을 특징으로 합니다.
HTML 코드
<div class="p-4 sm:p-6 md:p-8 bg-white dark:bg-gray-800 rounded-lg shadow-lg max-w-sm mx-auto transition-colors duration-300">
<h2 class="text-lg sm:text-xl font-semibold text-gray-800 dark:text-white mb-4 text-center sm:text-left">Overall Satisfaction</h2>
<div class="flex items-center justify-center sm:justify-start mb-4">
<div class="flex space-x-1">
<!-- Active Stars -->
<svg class="w-6 h-6 sm:w-7 sm:h-7 text-emerald-500 dark:text-emerald-400 fill-current" 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.896 1.48-8.279L.001 9.306l8.332-1.151L12 .587z" />
</svg>
<svg class="w-6 h-6 sm:w-7 sm:h-7 text-emerald-500 dark:text-emerald-400 fill-current" 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.896 1.48-8.279L.001 9.306l8.332-1.151L12 .587z" />
</svg>
<svg class="w-6 h-6 sm:w-7 sm:h-7 text-emerald-500 dark:text-emerald-400 fill-current" 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.896 1.48-8.279L.001 9.306l8.332-1.151L12 .587z" />
</svg>
<svg class="w-6 h-6 sm:w-7 sm:h-7 text-emerald-500 dark:text-emerald-400 fill-current" 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.896 1.48-8.279L.001 9.306l8.332-1.151L12 .587z" />
</svg>
<!-- Inactive Stars -->
<svg class="w-6 h-6 sm:w-7 sm:h-7 text-gray-300 dark:text-gray-600 fill-current" 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.896 1.48-8.279L.001 9.306l8.332-1.151L12 .587z" />
</svg>
</div>
<span class="ml-3 text-lg sm:text-xl font-bold text-gray-800 dark:text-white">4.0</span>
</div>
<p class="text-sm sm:text-base text-gray-600 dark:text-gray-300 text-center sm:text-left">Based on 125 ratings</p>
</div>관련 구성 요소
Bauhaus 파스텔 등급 시스템 구성 요소
기하학적 형태와 파스텔 색상을 가진 반응형이고 기능적인 평가 시스템 구성 요소로, 대시보드 통합에 적합합니다. 다크 모드 지원이 포함됩니다.
Bauhaus_Grayscale_Rating_System_Component
Bauhaus 스타일로 회색조 색상으로 설계된 복잡하고 반응이 빠른 평가 시스템 구성 요소로, 이벤트 및 컨퍼런스 웹 사이트에 적합합니다. 대화형 요소와 다크 모드 지원이 특징입니다.