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>

관련 구성 요소

브루탈리스트 등급 시스템 구성 요소

Tailwind CSS를 사용하여 잔인한 스타일로 설계된 반응형 등급 시스템 구성 요소이며 어두운 테마를 지원합니다.

열다

등급 시스템 구성 요소

어두운 테마를 지원하는 반응형 등급 시스템 구성 요소로, 소셜 미디어 인터페이스를 위한 파스텔 색 구성표가 있는 미니멀리스트/플랫 스타일로 설계되었습니다. 여러 대화형 요소가 있는 복잡한 구성 요소입니다.

열다

Monospace_Developer_Autumn_Rating_System_Component

모노스페이스에서 영감을 받은 복잡한 등급 시스템 구성 요소로, 산업 및 제조 응용 분야를 위한 가을 색이 있습니다. 깔끔한 디자인, 다양한 인터랙티브 요소, 완벽한 응답성 및 다크 모드 지원이 특징입니다.

열다