CCHub Logo CCHub Tailwind Collection
구성 요소 등급 시스템 레트로 레이팅 시스템 구성 요소

레트로 레이팅 시스템 구성 요소

전자 상거래를 위한 간단한 레트로 스타일의 등급 시스템 구성 요소로, 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>

관련 구성 요소

Bauhaus_Music_Rating_System

반응형 음악/오디오 등급 시스템 구성 요소로, Bauhaus에서 영감을 받은 디자인으로 보라색/보라색 색 구성표를 사용합니다. 다크 모드 지원 및 대화형 별 등급 기능(시각적인 만, JS 제외)이 포함됩니다.

열다

등급 시스템 구성 요소

Neumorphism 스타일, 반응형 효과 및 어두운 테마를 지원하는 등급 시스템 구성 요소.

열다

Neumorphic_Pastel_Rating_System_Component

파스텔 색상 구성표가 있는 간단하고 반응이 빠른 뉴모픽 등급 시스템 구성 요소로, 다크 모드 지원을 포함하여 여행 및 관광 웹사이트에 적합합니다.

열다