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

등급 시스템 구성 요소

풍부한 보석 색조로 설계된 간단하고 매력적인 평가 시스템 구성 요소로, 문서 및 기술 자료 사이트에 대한 마이크로 인터랙션 피드백을 제공합니다. 완벽하게 반응하며 다크 모드를 지원합니다.

미리 보기

HTML 코드 

<div class="flex flex-col items-center justify-center p-6 bg-gray-50 dark:bg-gray-900 min-h-screen">
  <div class="bg-white dark:bg-gray-800 shadow-xl rounded-lg p-6 sm:p-8 md:p-10 max-w-sm w-full transition-all duration-300 ease-in-out transform hover:scale-105">
    <h3 class="text-xl sm:text-2xl font-bold text-gray-800 dark:text-gray-100 text-center mb-6">
      How useful was this article?
    </h3>
    <div class="flex justify-center space-x-2 sm:space-x-3 mb-6">
      <button aria-label="1 star rating" class="group p-2 rounded-full transition-all duration-200 ease-in-out hover:bg-red-500/20 active:scale-90">
        <svg class="w-8 h-8 sm:w-9 sm:h-9 text-red-500 group-hover:text-red-600 dark:text-red-400 dark:group-hover:text-red-500 transition-colors duration-200" fill="currentColor" viewBox="0 0 20 20">
          <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.538 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.565-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69L9.049 2.927z"></path>
        </svg>
      </button>
      <button aria-label="2 star rating" class="group p-2 rounded-full transition-all duration-200 ease-in-out hover:bg-orange-500/20 active:scale-90">
        <svg class="w-8 h-8 sm:w-9 sm:h-9 text-orange-500 group-hover:text-orange-600 dark:text-orange-400 dark:group-hover:text-orange-500 transition-colors duration-200" fill="currentColor" viewBox="0 0 20 20">
          <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.538 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.565-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69L9.049 2.927z"></path>
        </svg>
      </button>
      <button aria-label="3 star rating" class="group p-2 rounded-full transition-all duration-200 ease-in-out hover:bg-amber-500/20 active:scale-90">
        <svg class="w-8 h-8 sm:w-9 sm:h-9 text-amber-500 group-hover:text-amber-600 dark:text-amber-400 dark:group-hover:text-amber-500 transition-colors duration-200" fill="currentColor" viewBox="0 0 20 20">
          <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.538 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.565-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69L9.049 2.927z"></path>
        </svg>
      </button>
      <button aria-label="4 star rating" class="group p-2 rounded-full transition-all duration-200 ease-in-out hover:bg-emerald-500/20 active:scale-90">
        <svg class="w-8 h-8 sm:w-9 sm:h-9 text-emerald-500 group-hover:text-emerald-600 dark:text-emerald-400 dark:group-hover:text-emerald-500 transition-colors duration-200" fill="currentColor" viewBox="0 0 20 20">
          <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.538 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.565-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69L9.049 2.927z"></path>
        </svg>
      </button>
      <button aria-label="5 star rating" class="group p-2 rounded-full transition-all duration-200 ease-in-out hover:bg-indigo-500/20 active:scale-90">
        <svg class="w-8 h-8 sm:w-9 sm:h-9 text-indigo-500 group-hover:text-indigo-600 dark:text-indigo-400 dark:group-hover:text-indigo-500 transition-colors duration-200" fill="currentColor" viewBox="0 0 20 20">
          <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.538 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.565-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69L9.049 2.927z"></path>
        </svg>
      </button>
    </div>
    <p class="text-sm text-gray-500 dark:text-gray-400 text-center">
      Click a star to rate
    </p>
  </div>
</div>

관련 구성 요소

Skeuomorphic_Jewel_Tone_Rating_System_Simple

스큐어모픽 디자인, 보석 톤 색 구성표 및 다크 모드 지원을 갖춘 간단하고 반응이 빠른 등급 시스템 구성 요소로 비영리/자선 웹사이트에 적합합니다.

열다

등급 시스템 구성 요소

Tailwind CSS를 사용하여 Brutalism 스타일로 설계된 반응형 등급 시스템 구성 요소입니다. 어두운 테마를 지원하며 원시적이고 대담한 디자인으로 높은 대비를 가지고 있습니다.

열다

등급 시스템 구성 요소

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

열다