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

등급 시스템 구성 요소

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

미리 보기

HTML 코드 

<div class="flex flex-col items-center justify-center p-6 bg-brown-50 dark:bg-stone-900 min-h-screen font-sans">
  <div class="w-full max-w-sm p-6 rounded-lg shadow-xl bg-white dark:bg-stone-800 transition-colors duration-300 transform hover:scale-105">
    <h2 class="text-2xl font-semibold text-stone-800 dark:text-stone-100 mb-4 text-center">Rate Our Service</h2>
    <p class="text-sm text-stone-600 dark:text-stone-300 mb-6 text-center">Your feedback helps us improve public services.</p>

    <div class="flex justify-center space-x-2 sm:space-x-4 mb-6">
      <!-- Star 1 -->
      <button class="peer group flex items-center justify-center w-12 h-12 sm:w-16 sm:h-16 rounded-full bg-stone-200 dark:bg-stone-700 hover:bg-amber-300 dark:hover:bg-amber-600 transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-amber-500 transform hover:scale-110 active:scale-95">
        <svg class="w-7 h-7 sm:w-9 sm:h-9 text-stone-600 dark:text-stone-400 group-hover:text-amber-700 dark:group-hover:text-amber-200 transition-colors duration-200" fill="currentColor" 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.931 1.48-8.279L.332 9.306l8.332-1.151L12 .587z"/>
        </svg>
      </button>
      
      <!-- Star 2 -->
      <button class="peer group flex items-center justify-center w-12 h-12 sm:w-16 sm:h-16 rounded-full bg-stone-200 dark:bg-stone-700 hover:bg-amber-300 dark:hover:bg-amber-600 transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-amber-500 transform hover:scale-110 active:scale-95">
        <svg class="w-7 h-7 sm:w-9 sm:h-9 text-stone-600 dark:text-stone-400 group-hover:text-amber-700 dark:group-hover:text-amber-200 transition-colors duration-200" fill="currentColor" 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.931 1.48-8.279L.332 9.306l8.332-1.151L12 .587z"/>
        </svg>
      </button>

      <!-- Star 3 -->
      <button class="peer group flex items-center justify-center w-12 h-12 sm:w-16 sm:h-16 rounded-full bg-stone-200 dark:bg-stone-700 hover:bg-amber-300 dark:hover:bg-amber-600 transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-amber-500 transform hover:scale-110 active:scale-95">
        <svg class="w-7 h-7 sm:w-9 sm:h-9 text-stone-600 dark:text-stone-400 group-hover:text-amber-700 dark:group-hover:text-amber-200 transition-colors duration-200" fill="currentColor" 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.931 1.48-8.279L.332 9.306l8.332-1.151L12 .587z"/>
        </svg>
      </button>

      <!-- Star 4 -->
      <button class="peer group flex items-center justify-center w-12 h-12 sm:w-16 sm:h-16 rounded-full bg-stone-200 dark:bg-stone-700 hover:bg-amber-300 dark:hover:bg-amber-600 transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-amber-500 transform hover:scale-110 active:scale-95">
        <svg class="w-7 h-7 sm:w-9 sm:h-9 text-stone-600 dark:text-stone-400 group-hover:text-amber-700 dark:group-hover:text-amber-200 transition-colors duration-200" fill="currentColor" 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.931 1.48-8.279L.332 9.306l8.332-1.151L12 .587z"/>
        </svg>
      </button>

      <!-- Star 5 -->
      <button class="peer group flex items-center justify-center w-12 h-12 sm:w-16 sm:h-16 rounded-full bg-stone-200 dark:bg-stone-700 hover:bg-amber-300 dark:hover:bg-amber-600 transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-amber-500 transform hover:scale-110 active:scale-95">
        <svg class="w-7 h-7 sm:w-9 sm:h-9 text-stone-600 dark:text-stone-400 group-hover:text-amber-700 dark:group-hover:text-amber-200 transition-colors duration-200" fill="currentColor" 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.931 1.48-8.279L.332 9.306l8.332-1.151L12 .587z"/>
        </svg>
      </button>
    </div>

    <button class="w-full py-3 rounded-md bg-stone-700 text-white dark:bg-amber-700 dark:text-stone-100 hover:bg-stone-800 dark:hover:bg-amber-600 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-stone-500 dark:focus:ring-amber-500 transform hover:scale-105 active:scale-95">
      Submit Rating
    </button>
  </div>
</div>

관련 구성 요소

등급 시스템 구성 요소

레트로/빈티지 스타일로 디자인된 등급 시스템 구성 요소로, 보색 구성표와 블로그 콘텐츠를 위한 복잡한 인터페이스를 활용합니다. 이 구성 요소는 다크 모드를 지원하며 Tailwind CSS를 사용하여 반응합니다.

열다

등급 시스템 구성 요소

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

열다

Bauhaus 파스텔 등급 시스템 구성 요소

기하학적 형태와 파스텔 색상을 가진 반응형이고 기능적인 평가 시스템 구성 요소로, 대시보드 통합에 적합합니다. 다크 모드 지원이 포함됩니다.

열다