CCHub Logo CCHub Tailwind Collection
구성 요소 등급 시스템 등급 시스템 구성 요소

등급 시스템 구성 요소

대시보드 애플리케이션에 적합한 미니멀하고 평평한 디자인 등급 구성 요소로, 보석 톤과 다크 모드 지원으로 완전한 응답성을 특징으로 합니다.

미리 보기

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_Music_Rating_System

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

열다

등급 시스템 구성 요소

세피아/브라운 톤, 다크 모드 지원 및 마이크로 인터랙션 중심 스타일을 갖춘 간단하고 반응이 빠른 등급 시스템 구성 요소로, 정부/공공 서비스 웹 사이트에 적합합니다.

열다

Glassmorphism 등급 시스템

소셜 미디어 플랫폼을 위해 설계된 보색이 있는 Glassmorphism 스타일의 평가 시스템입니다. 여기에는 Tailwind CSS를 사용하는 반응형 레이아웃과 다크 모드 지원이 포함됩니다.

열다