검색 구성 요소

카테고리

구성 요소 등급 시스템

등급 시스템

사용자가 콘텐츠를 평가할 수 있습니다.

Monospace Forest Rating System 구성 요소

포트폴리오에 적합한 포레스트 그린 팔레트가 있는 깔끔한 코드에서 영감을 받은 등급 시스템 구성 요소입니다. 등급을 매기기 위한 대화형 별표가 특징이며 평균 등급을 표시하며 다크 모드 지원으로 완벽하게 반응합니다.

                <div class="font-mono bg-green-50 text-green-900 min-h-screen p-4 sm:p-8 md:p-12 dark:bg-gray-900 dark:text-green-200 transition-colors duration-300">
  <div class="max-w-4xl mx-auto bg-green-100 dark:bg-gray-800 shadow-lg rounded-lg overflow-hidden border border-green-300 dark:border-green-700">
    <div class="p-6 sm:p-8 lg:p-10 border-b border-green-200 dark:border-gray-700">
      <h2 class="text-2xl sm:text-3xl font-bold text-green-800 dark:text-green-300 mb-2 code-line-prefix ">
        <span class="text-green-600 dark:text-emerald-500">$</span> product_rating_system<span class="text-green-600 dark:text-emerald-500">()</span>
      </h2>
      <p class="text-green-700 dark:text-green-400 text-sm sm:text-base mb-4 code-line-prefix ">
        <span class="text-green-600 dark:text-emerald-600">></span> Evaluate product satisfaction based on user feedback.
      </p>

      <div class="flex flex-col sm:flex-row items-center justify-between py-4 border-t border-b border-green-200 dark:border-gray-700">
        <div class="mb-4 sm:mb-0">
          <p class="text-lg font-semibold text-green-800 dark:text-green-300 code-line-prefix ">
            <span class="text-green-600 dark:text-emerald-500">avg_rating:</span> <span class="text-xl">4.7</span> / <span class="text-sm">5.0</span>
          </p>
          <div class="flex items-center text-green-600 dark:text-emerald-500 mt-1">
            <svg class="w-6 h-6 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.693 7.502 8.307 1.207-6.012 5.865 1.42 8.261L12 18.066l-7.408 3.896 1.42-8.261-6.012-5.865 8.307-1.207L12 .587z"/></svg>
            <svg class="w-6 h-6 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.693 7.502 8.307 1.207-6.012 5.865 1.42 8.261L12 18.066l-7.408 3.896 1.42-8.261-6.012-5.865 8.307-1.207L12 .587z"/></svg>
            <svg class="w-6 h-6 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.693 7.502 8.307 1.207-6.012 5.865 1.42 8.261L12 18.066l-7.408 3.896 1.42-8.261-6.012-5.865 8.307-1.207L12 .587z"/></svg>
            <svg class="w-6 h-6 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.693 7.502 8.307 1.207-6.012 5.865 1.42 8.261L12 18.066l-7.408 3.896 1.42-8.261-6.012-5.865 8.307-1.207L12 .587z"/></svg>
            <svg class="w-6 h-6 fill-current text-green-300 dark:text-gray-600" viewBox="0 0 24 24"><path d="M12 .587l3.693 7.502 8.307 1.207-6.012 5.865 1.42 8.261L12 18.066l-7.408 3.896 1.42-8.261-6.012-5.865 8.307-1.207L12 .587z"/></svg>
            <span class="ml-2 text-green-700 dark:text-green-400 text-sm">(<span class="font-bold">128</span> ratings)</span>
          </div>
        </div>

        <div class="flex flex-col items-center">
          <p class="text-lg font-semibold text-green-800 dark:text-green-300 mb-2 code-line-prefix ">
            <span class="text-green-600 dark:text-emerald-500">$</span> submit_rating<span class="text-green-600 dark:text-emerald-500">()</span>
          </p>
          <div class="flex text-green-400 dark:text-gray-500 space-x-1">
            <button class="star-button focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:ring-offset-2 focus:ring-offset-green-100 p-1 rounded-sm transition-colors duration-200 hover:text-emerald-500 dark:hover:text-emerald-400" aria-label="1 star">
              <svg class="w-8 h-8 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.693 7.502 8.307 1.207-6.012 5.865 1.42 8.261L12 18.066l-7.408 3.896 1.42-8.261-6.012-5.865 8.307-1.207L12 .587z"/></svg>
            </button>
            <button class="star-button focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:ring-offset-2 focus:ring-offset-green-100 p-1 rounded-sm transition-colors duration-200 hover:text-emerald-500 dark:hover:text-emerald-400" aria-label="2 stars">
              <svg class="w-8 h-8 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.693 7.502 8.307 1.207-6.012 5.865 1.42 8.261L12 18.066l-7.408 3.896 1.42-8.261-6.012-5.865 8.307-1.207L12 .587z"/></svg>
            </button>
            <button class="star-button focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:ring-offset-2 focus:ring-offset-green-100 p-1 rounded-sm transition-colors duration-200 hover:text-emerald-500 dark:hover:text-emerald-400" aria-label="3 stars">
              <svg class="w-8 h-8 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.693 7.502 8.307 1.207-6.012 5.865 1.42 8.261L12 18.066l-7.408 3.896 1.42-8.261-6.012-5.865 8.307-1.207L12 .587z"/></svg>
            </button>
            <button class="star-button focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:ring-offset-2 focus:ring-offset-green-100 p-1 rounded-sm transition-colors duration-200 hover:text-emerald-500 dark:hover:text-emerald-400" aria-label="4 stars">
              <svg class="w-8 h-8 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.693 7.502 8.307 1.207-6.012 5.865 1.42 8.261L12 18.066l-7.408 3.896 1.42-8.261-6.012-5.865 8.307-1.207L12 .587z"/></svg>
            </button>
            <button class="star-button focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:ring-offset-2 focus:ring-offset-green-100 p-1 rounded-sm transition-colors duration-200 hover:text-emerald-500 dark:hover:text-emerald-400" aria-label="5 stars">
              <svg class="w-8 h-8 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.693 7.502 8.307 1.207-6.012 5.865 1.42 8.261L12 18.066l-7.408 3.896 1.42-8.261-6.012-5.865 8.307-1.207L12 .587z"/></svg>
            </button>
          </div>
        </div>
      </div>
    </div>

    <div class="p-6 sm:p-8 lg:p-10">
      <h3 class="text-xl sm:text-2xl font-bold text-green-800 dark:text-green-300 mb-4 code-line-prefix ">
        <span class="text-green-600 dark:text-emerald-500">$</span> recent_reviews<span class="text-green-600 dark:text-emerald-500">()</span>
      </h3>

      <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
        <!-- Review 1 -->
        <article class="bg-green-50 dark:bg-gray-700 p-5 rounded-lg border border-green-200 dark:border-gray-600 code-block">
          <div class="flex items-center mb-3">
            <img class="w-10 h-10 rounded-full mr-3 border-2 border-green-400 dark:border-emerald-600" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
            <div>
              <p class="font-semibold text-green-800 dark:text-green-300">[email protected]</p>
              <p class="text-green-600 dark:text-green-400 text-sm">2 days ago</p>
            </div>
          </div>
          <div class="flex text-green-600 dark:text-emerald-500 mb-2">
            <svg class="w-4 h-4 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.693 7.502 8.307 1.207-6.012 5.865 1.42 8.261L12 18.066l-7.408 3.896 1.42-8.261-6.012-5.865 8.307-1.207L12 .587z"/></svg>
            <svg class="w-4 h-4 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.693 7.502 8.307 1.207-6.012 5.865 1.42 8.261L12 18.066l-7.408 3.896 1.42-8.261-6.012-5.865 8.307-1.207L12 .587z"/></svg>
            <svg class="w-4 h-4 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.693 7.502 8.307 1.207-6.012 5.865 1.42 8.261L12 18.066l-7.408 3.896 1.42-8.261-6.012-5.865 8.307-1.207L12 .587z"/></svg>
            <svg class="w-4 h-4 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.693 7.502 8.307 1.207-6.012 5.865 1.42 8.261L12 18.066l-7.408 3.896 1.42-8.261-6.012-5.865 8.307-1.207L12 .587z"/></svg>
            <svg class="w-4 h-4 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.693 7.502 8.307 1.207-6.012 5.865 1.42 8.261L12 18.066l-7.408 3.896 1.42-8.261-6.012-5.865 8.307-1.207L12 .587z"/></svg>
          </div>
          <p class="text-green-700 dark:text-green-400 leading-relaxed text-sm">"Absolutely stellar! This product exceeded all my expectations. The performance is top-notch and the design is incredibly intuitive. Highly recommend!"</p>
        </article>

        <!-- Review 2 -->
        <article class="bg-green-50 dark:bg-gray-700 p-5 rounded-lg border border-green-200 dark:border-gray-600 code-block">
          <div class="flex items-center mb-3">
            <img class="w-10 h-10 rounded-full mr-3 border-2 border-green-400 dark:border-emerald-600" src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar">
            <div>
              <p class="font-semibold text-green-800 dark:text-green-300">[email protected]</p>
              <p class="text-green-600 dark:text-green-400 text-sm">1 week ago</p>
            </div>
          </div>
          <div class="flex text-green-600 dark:text-emerald-500 mb-2">
            <svg class="w-4 h-4 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.693 7.502 8.307 1.207-6.012 5.865 1.42 8.261L12 18.066l-7.408 3.896 1.42-8.261-6.012-5.865 8.307-1.207L12 .587z"/></svg>
            <svg class="w-4 h-4 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.693 7.502 8.307 1.207-6.012 5.865 1.42 8.261L12 18.066l-7.408 3.896 1.42-8.261-6.012-5.865 8.307-1.207L12 .587z"/></svg>
            <svg class="w-4 h-4 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.693 7.502 8.307 1.207-6.012 5.865 1.42 8.261L12 18.066l-7.408 3.896 1.42-8.261-6.012-5.865 8.307-1.207L12 .587z"/></svg>
            <svg class="w-4 h-4 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.693 7.502 8.307 1.207-6.012 5.865 1.42 8.261L12 18.066l-7.408 3.896 1.42-8.261-6.012-5.865 8.307-1.207L12 .587z"/></svg>
            <svg class="w-4 h-4 fill-current text-green-300 dark:text-gray-600" viewBox="0 0 24 24"><path d="M12 .587l3.693 7.502 8.307 1.207-6.012 5.865 1.42 8.261L12 18.066l-7.408 3.896 1.42-8.261-6.012-5.865 8.307-1.207L12 .587z"/></svg>
          </div>
          <p class="text-green-700 dark:text-green-400 leading-relaxed text-sm">"Solid product for the price. It does exactly what it promises. One small suggestion: a bit more documentation could be helpful."</p>
        </article>

        <!-- Review 3 -->
        <article class="bg-green-50 dark:bg-gray-700 p-5 rounded-lg border border-green-200 dark:border-gray-600 code-block">
          <div class="flex items-center mb-3">
            <img class="w-10 h-10 rounded-full mr-3 border-2 border-green-400 dark:border-emerald-600" src="https://randomuser.me/api/portraits/men/19.jpg" alt="User Avatar">
            <div>
              <p class="font-semibold text-green-800 dark:text-green-300">[email protected]</p>
              <p class="text-green-600 dark:text-green-400 text-sm">3 weeks ago</p>
            </div>
          </div>
          <div class="flex text-green-600 dark:text-emerald-500 mb-2">
            <svg class="w-4 h-4 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.693 7.502 8.307 1.207-6.012 5.865 1.42 8.261L12 18.066l-7.408 3.896 1.42-8.261-6.012-5.865 8.307-1.207L12 .587z"/></svg>
            <svg class="w-4 h-4 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.693 7.502 8.307 1.207-6.012 5.865 1.42 8.261L12 18.066l-7.408 3.896 1.42-8.261-6.012-5.865 8.307-1.207L12 .587z"/></svg>
            <svg class="w-4 h-4 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.693 7.502 8.307 1.207-6.012 5.865 1.42 8.261L12 18.066l-7.408 3.896 1.42-8.261-6.012-5.865 8.307-1.207L12 .587z"/></svg>
            <svg class="w-4 h-4 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.693 7.502 8.307 1.207-6.012 5.865 1.42 8.261L12 18.066l-7.408 3.896 1.42-8.261-6.012-5.865 8.307-1.207L12 .587z"/></svg>
            <svg class="w-4 h-4 fill-current text-green-300 dark:text-gray-600" viewBox="0 0 24 24"><path d="M12 .587l3.693 7.502 8.307 1.207-6.012 5.865 1.42 8.261L12 18.066l-7.408 3.896 1.42-8.261-6.012-5.865 8.307-1.207L12 .587z"/></svg>
          </div>
          <p class="text-green-700 dark:text-green-400 leading-relaxed text-sm">"Integration was easier than expected. Great tool for data visualization! Some minor bugs, but nothing that breaks the workflow."</p>
        </article>

        <!-- Review 4 -->
        <article class="bg-green-50 dark:bg-gray-700 p-5 rounded-lg border border-green-200 dark:border-gray-600 code-block">
          <div class="flex items-center mb-3">
            <img class="w-10 h-10 rounded-full mr-3 border-2 border-green-400 dark:border-emerald-600" src="https://randomuser.me/api/portraits/women/67.jpg" alt="User Avatar">
            <div>
              <p class="font-semibold text-green-800 dark:text-green-300">[email protected]</p>
              <p class="text-green-600 dark:text-green-400 text-sm">1 month ago</p>
            </div>
          </div>
          <div class="flex text-green-600 dark:text-emerald-500 mb-2">
            <svg class="w-4 h-4 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.693 7.502 8.307 1.207-6.012 5.865 1.42 8.261L12 18.066l-7.408 3.896 1.42-8.261-6.012-5.865 8.307-1.207L12 .587z"/></svg>
            <svg class="w-4 h-4 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.693 7.502 8.307 1.207-6.012 5.865 1.42 8.261L12 18.066l-7.408 3.896 1.42-8.261-6.012-5.865 8.307-1.207L12 .587z"/></svg>
            <svg class="w-4 h-4 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.693 7.502 8.307 1.207-6.012 5.865 1.42 8.261L12 18.066l-7.408 3.896 1.42-8.261-6.012-5.865 8.307-1.207L12 .587z"/></svg>
            <svg class="w-4 h-4 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.693 7.502 8.307 1.207-6.012 5.865 1.42 8.261L12 18.066l-7.408 3.896 1.42-8.261-6.012-5.865 8.307-1.207L12 .587z"/></svg>
            <svg class="w-4 h-4 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.693 7.502 8.307 1.207-6.012 5.865 1.42 8.261L12 18.066l-7.408 3.896 1.42-8.261-6.012-5.865 8.307-1.207L12 .587z"/></svg>
          </div>
          <p class="text-green-700 dark:text-green-400 leading-relaxed text-sm">"A game changer for my workflow! The features are incredibly robust and the support has been fantastic. Can't recommend enough."</p>
        </article>
      </div>
    </div>
  </div>
</div>

<style>
  /* This is for the 'code-line-prefix' which creates the > or $ symbol */
  .code-line-prefix::before {
      content: ' ';
      display: inline-block;
      margin-right: 0.5em;
  }
  .code-line-prefix:not(.code-block) > span:first-child::before {
      content: ''; /* Remove prefix if it's explicitly the first span for styling it green */
      margin-right: 0;
  }

  h2.code-line-prefix::before, h3.code-line-prefix::before {
      content: '$';
      color: var(--tw-color-green-600);
  }

  .dark h2.code-line-prefix::before, .dark h3.code-line-prefix::before {
    color: var(--tw-color-emerald-500);
  }

  p.code-line-prefix::before {
      content: '>';
      color: var(--tw-color-green-600);
  }

  .dark p.code-line-prefix::before {
    color: var(--tw-color-emerald-600);
  }

  /* Simulate interactive star hover/focus for submit rating */
  .star-button:focus svg,
  .star-button:hover svg {
    color: var(--tw-color-emerald-500); /* Applies to light theme */
  }

  .dark .star-button:focus svg,
  .dark .star-button:hover svg {
    color: var(--tw-color-emerald-400); /* Applies to dark theme */
  }

  /* Example of how to 'fill' stars, would typically be done with JS but for static HTML, we use class based */
  .star-button:nth-child(1):hover ~ .star-button,
  .star-button:nth-child(2):hover ~ .star-button:nth-child(3),
  .star-button:nth-child(2):hover ~ .star-button:nth-child(4),
  .star-button:nth-child(2):hover ~ .star-button:nth-child(5),
  .star-button:nth-child(3):hover ~ .star-button:nth-child(4),
  .star-button:nth-child(3):hover ~ .star-button:nth-child(5),
  .star-button:nth-child(4):hover ~ .star-button:nth-child(5) {
      color: initial; /* Reset color for non-hovered stars */
  }

  .star-button:hover > svg,
  .star-button:hover ~ .star-button svg {
      color: inherit; /* Stars before the hovered one */
  }
  .star-button:hover + .star-button > svg {
       color: initial;
  }

</style>

등급 시스템 구성 요소

날씨/기후 데이터를 위해 설계된 사탕/달콤한 색 구성표가 있는 깔끔하고 미니멀한 등급 시스템 구성 요소입니다. 그리드 시스템을 사용하고 완전한 응답성과 다크 모드 지원으로 타이포그래피를 강조합니다.

열다 미리 보기

                <div class="p-4 sm:p-6 md:p-8 bg-gradient-to-br from-pink-100 via-purple-100 to-green-100 dark:from-purple-950 dark:via-gray-900 dark:to-teal-950 min-h-screen flex items-center justify-center font-sans">
  <div class="w-full max-w-sm sm:max-w-md md:max-w-lg bg-white dark:bg-gray-800 rounded-xl shadow-2xl p-6 sm:p-8 transform transition-all duration-300 hover:scale-105 border border-purple-200 dark:border-gray-700 relative overflow-hidden">
    <div class="absolute top-0 left-0 w-24 h-24 bg-gradient-to-br from-pink-300 to-purple-300 dark:from-sky-700 dark:to-purple-700 rounded-br-full opacity-70 blur-md"></div>
    <div class="absolute bottom-0 right-0 w-32 h-32 bg-gradient-to-tl from-green-300 to-yellow-300 dark:from-emerald-700 dark:to-lime-700 rounded-tl-full opacity-70 blur-md"></div>

    <h2 class="text-2xl sm:text-3xl font-extrabold text-gray-800 dark:text-white mb-2 sm:mb-4 tracking-tight leading-tight text-center relative z-10">
      Rate Today's Climate
    </h2>
    <p class="text-sm sm:text-base text-gray-600 dark:text-gray-300 mb-6 sm:mb-8 text-center relative z-10">
      How would you describe the overall weather conditions?
    </p>

    <div class="grid grid-cols-5 gap-2 sm:gap-3 justify-items-center mb-8 relative z-10">
      <!-- Star 1 -->
      <button class="flex flex-col items-center group focus:outline-none focus:ring-4 focus:ring-pink-300 focus:ring-opacity-75 rounded-lg active:scale-95 transition-transform duration-200">
        <span class="block text-4xl sm:text-5xl text-gray-300 dark:text-gray-600 group-hover:text-amber-400 group-focus:text-amber-500 transition-colors duration-200">
          ★
        </span>
        <span class="text-xs sm:text-sm text-gray-500 dark:text-gray-400 mt-1">
          Poor
        </span>
      </button>

      <!-- Star 2 -->
      <button class="flex flex-col items-center group focus:outline-none focus:ring-4 focus:ring-purple-300 focus:ring-opacity-75 rounded-lg active:scale-95 transition-transform duration-200">
        <span class="block text-4xl sm:text-5xl text-gray-300 dark:text-gray-600 group-hover:text-amber-400 group-focus:text-amber-500 transition-colors duration-200">
          ★
        </span>
        <span class="text-xs sm:text-sm text-gray-500 dark:text-gray-400 mt-1">
          Fair
        </span>
      </button>

      <!-- Star 3 -->
      <button class="flex flex-col items-center group focus:outline-none focus:ring-4 focus:ring-green-300 focus:ring-opacity-75 rounded-lg active:scale-95 transition-transform duration-200">
        <span class="block text-4xl sm:text-5xl text-gray-300 dark:text-gray-600 group-hover:text-amber-400 group-focus:text-amber-500 transition-colors duration-200">
          ★
        </span>
        <span class="text-xs sm:text-sm text-gray-500 dark:text-gray-400 mt-1">
          Good
        </span>
      </button>

      <!-- Star 4 -->
      <button class="flex flex-col items-center group focus:outline-none focus:ring-4 focus:ring-blue-300 focus:ring-opacity-75 rounded-lg active:scale-95 transition-transform duration-200">
        <span class="block text-4xl sm:text-5xl text-gray-300 dark:text-gray-600 group-hover:text-amber-400 group-focus:text-amber-500 transition-colors duration-200">
          ★
        </span>
        <span class="text-xs sm:text-sm text-gray-500 dark:text-gray-400 mt-1">
          Great
        </span>
      </button>

      <!-- Star 5 -->
      <button class="flex flex-col items-center group focus:outline-none focus:ring-4 focus:ring-yellow-300 focus:ring-opacity-75 rounded-lg active:scale-95 transition-transform duration-200">
        <span class="block text-4xl sm:text-5xl text-gray-300 dark:text-gray-600 group-hover:text-amber-400 group-focus:text-amber-500 transition-colors duration-200">
          ★
        </span>
        <span class="text-xs sm:text-sm text-gray-500 dark:text-gray-400 mt-1">
          Perfect
        </span>
      </button>
    </div>

    <div class="space-y-4 relative z-10">
      <label for="comments" class="block text-sm font-medium text-gray-700 dark:text-gray-200">Optional comments:</label>
      <textarea id="comments" rows="3" class="w-full p-3 border border-pink-300 dark:border-gray-700 rounded-lg focus:ring-2 focus:ring-pink-400 focus:border-pink-400 outline-none transition-colors duration-200 bg-pink-50 dark:bg-gray-700 text-gray-800 dark:text-gray-50 placeholder-pink-400 dark:placeholder-gray-400 resize-none" placeholder="E.g., 'Sunny with a light breeze.'"></textarea>
    </div>

    <button class="mt-8 w-full py-3 px-6 bg-gradient-to-r from-pink-500 to-purple-500 dark:from-sky-600 dark:to-purple-600 text-white font-semibold rounded-lg shadow-lg hover:shadow-xl transform transition-all duration-300 hover:scale-105 active:scale-95 focus:outline-none focus:ring-4 focus:ring-pink-300 dark:focus:ring-sky-500 relative z-10">
      Submit Rating
    </button>

    <p class="text-xxs text-gray-400 dark:text-gray-500 mt-6 text-center relative z-10">
      Provided by <a href="#" class="underline hover:text-gray-500 dark:hover:text-gray-400 transition-colors duration-200">ClimatePulse Data</a>
    </p>
  </div>
</div>

Brutalism_Travel_Rating_System

여행 및 관광 웹사이트를 위한 단순하고 야만적인 스타일의 평가 시스템 구성 요소로, 멋진 중립 및 다크 모드 지원을 특징으로 합니다.

열다 미리 보기

                <div class="p-4 sm:p-6 md:p-8 bg-gray-100 dark:bg-gray-800 font-mono">厕
  <div class="max-w-md mx-auto border-2 border-gray-900 dark:border-gray-50 bg-white dark:bg-gray-950 p-4 sm:p-6 shadow-[8px_8px_0px_0px_rgba(17,24,39,1)] dark:shadow-[8px_8px_0px_0px_rgba(229,231,235,1)]">
    <h2 class="text-xl sm:text-2xl font-bold text-gray-900 dark:text-gray-50 mb-4 uppercase tracking-widest">RATE YOUR TRIP</h2>
    
    <div class="flex items-center space-x-2 sm:space-x-4 mb-6">
      <img src="https://picsum.photos/id/1015/60/60" alt="Destination" class="w-16 h-16 sm:w-20 sm:h-20 object-cover border-2 border-gray-900 dark:border-gray-50 flex-shrink-0">
      <div class="flex-grow">
        <p class="text-lg sm:text-xl font-bold text-gray-900 dark:text-gray-50">Alpine Adventure</p>
        <p class="text-xs sm:text-sm text-gray-700 dark:text-gray-300">Zurich, Switzerland</p>
      </div>
    </div>

    <div class="flex justify-between mb-6">
      <button class="flex-1 py-3 px-2 sm:px-4 text-center text-gray-900 dark:text-gray-50 text-xl sm:text-2xl transition-colors duration-200
                     border-2 border-r-0 border-gray-900 dark:border-gray-50 hover:bg-gray-200 dark:hover:bg-gray-800">
        ★
      </button>
      <button class="flex-1 py-3 px-2 sm:px-4 text-center text-gray-900 dark:text-gray-50 text-xl sm:text-2xl transition-colors duration-200
                     border-2 border-r-0 border-gray-900 dark:border-gray-50 hover:bg-gray-200 dark:hover:bg-gray-800">
        ★
      </button>
      <button class="flex-1 py-3 px-2 sm:px-4 text-center text-gray-900 dark:text-gray-50 text-xl sm:text-2xl transition-colors duration-200
                     border-2 border-r-0 border-gray-900 dark:border-gray-50 hover:bg-gray-200 dark:hover:bg-gray-800">
        ★
      </button>
      <button class="flex-1 py-3 px-2 sm:px-4 text-center text-gray-900 dark:text-gray-50 text-xl sm:text-2xl transition-colors duration-200
                     border-2 border-r-0 border-gray-900 dark:border-gray-50 hover:bg-gray-200 dark:hover:bg-gray-800">
        ★
      </button>
      <button class="flex-1 py-3 px-2 sm:px-4 text-center text-gray-900 dark:text-gray-50 text-xl sm:text-2xl transition-colors duration-200
                     border-2 border-gray-900 dark:border-gray-50 hover:bg-gray-200 dark:hover:bg-gray-800">
        ★
      </button>
    </div>

    <button class="w-full bg-gray-900 dark:bg-gray-50 text-white dark:text-gray-900 py-3 sm:py-4 
                   text-lg sm:text-xl font-bold uppercase tracking-widest 
                   border-2 border-gray-900 dark:border-gray-50 
                   hover:bg-gray-700 dark:hover:bg-gray-300 transition-colors duration-200 shadow-[4px_4px_0px_0px_rgba(17,24,39,1)] dark:shadow-[4px_4px_0px_0px_rgba(229,231,235,1)]">
      SUBMIT RATING
    </button>
  </div>
</div>

Skeuomorphic_Jewel_Tone_Rating_System_Simple

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

열다 미리 보기

                <div class="flex items-center justify-center p-4 min-h-screen bg-gradient-to-br from-gray-100 to-gray-200 dark:from-gray-900 dark:to-gray-800 font-sans">
  <div class="w-full max-w-sm p-6 rounded-3xl shadow-xl bg-gradient-to-br from-emerald-500 to-teal-600 dark:from-emerald-800 dark:to-teal-900 border-4 border-emerald-400 dark:border-emerald-700
              transform transition-all duration-300 hover:scale-[1.01] hover:shadow-2xl
              relative overflow-hidden group">
    
    <!-- Background Glow Effect (Skeuomorphic Detail) -->
    <div class="absolute -inset-1 rounded-3xl bg-gradient-to-br from-rose-500 to-purple-600 opacity-0 blur-md group-hover:opacity-30 transition-opacity duration-500"></div>
    
    <div class="relative z-10 flex flex-col items-center space-y-6">
      <h2 class="text-3xl font-extrabold text-white text-shadow tracking-tight text-center">
        Rate Our Impact
      </h2>
      <p class="text-sm text-emerald-100/90 text-center mb-4 leading-relaxed max-w-xs">
        Your feedback helps us grow and serve our community better.
      </p>

      <div class="flex space-x-2 sm:space-x-4">
        <!-- Star 1 -->
        <button aria-label="1 star rating" class="relative w-14 h-14 sm:w-16 sm:h-16 rounded-full bg-gradient-to-br from-yellow-400 to-yellow-600 dark:from-yellow-600 dark:to-yellow-800 shadow-md
                       flex items-center justify-center transform transition-transform duration-200 hover:scale-110
                       focus:outline-none focus:ring-4 focus:ring-yellow-300 focus:ring-opacity-75 dark:focus:ring-yellow-700
                       group-active:scale-95
                       active:bg-gradient-to-br active:from-yellow-600 active:to-yellow-800 dark:active:from-yellow-800 dark:active:to-yellow-900">
          <svg class="w-8 h-8 sm:w-10 sm:h-10 text-yellow-100 group-hover:text-white transition-colors duration-200" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
            <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.688-1.538 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.57-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path>
          </svg>
           <!-- Inner Shadow (Skeuomorphic Detail) -->
          <div class="absolute inset-1 rounded-full shadow-inner opacity-20 bg-black dark:bg-white blur-[1px]"></div>
        </button>

        <!-- Star 2 -->
        <button aria-label="2 star rating" class="relative w-14 h-14 sm:w-16 sm:h-16 rounded-full bg-gradient-to-br from-yellow-400 to-yellow-600 dark:from-yellow-600 dark:to-yellow-800 shadow-md
                       flex items-center justify-center transform transition-transform duration-200 hover:scale-110
                       focus:outline-none focus:ring-4 focus:ring-yellow-300 focus:ring-opacity-75 dark:focus:ring-yellow-700
                       group-active:scale-95
                       active:bg-gradient-to-br active:from-yellow-600 active:to-yellow-800 dark:active:from-yellow-800 dark:active:to-yellow-900">
          <svg class="w-8 h-8 sm:w-10 sm:h-10 text-yellow-100 group-hover:text-white transition-colors duration-200" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
            <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.688-1.538 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.57-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path>
          </svg>
          <div class="absolute inset-1 rounded-full shadow-inner opacity-20 bg-black dark:bg-white blur-[1px]"></div>
        </button>

        <!-- Star 3 -->
        <button aria-label="3 star rating" class="relative w-14 h-14 sm:w-16 sm:h-16 rounded-full bg-gradient-to-br from-yellow-400 to-yellow-600 dark:from-yellow-600 dark:to-yellow-800 shadow-md
                       flex items-center justify-center transform transition-transform duration-200 hover:scale-110
                       focus:outline-none focus:ring-4 focus:ring-yellow-300 focus:ring-opacity-75 dark:focus:ring-yellow-700
                       group-active:scale-95
                       active:bg-gradient-to-br active:from-yellow-600 active:to-yellow-800 dark:active:from-yellow-800 dark:active:to-yellow-900">
          <svg class="w-8 h-8 sm:w-10 sm:h-10 text-yellow-100 group-hover:text-white transition-colors duration-200" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
            <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.688-1.538 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.57-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path>
          </svg>
          <div class="absolute inset-1 rounded-full shadow-inner opacity-20 bg-black dark:bg-white blur-[1px]"></div>
        </button>

        <!-- Star 4 -->
        <button aria-label="4 star rating" class="relative w-14 h-14 sm:w-16 sm:h-16 rounded-full bg-gradient-to-br from-yellow-400 to-yellow-600 dark:from-yellow-600 dark:to-yellow-800 shadow-md
                       flex items-center justify-center transform transition-transform duration-200 hover:scale-110
                       focus:outline-none focus:ring-4 focus:ring-yellow-300 focus:ring-opacity-75 dark:focus:ring-yellow-700
                       group-active:scale-95
                       active:bg-gradient-to-br active:from-yellow-600 active:to-yellow-800 dark:active:from-yellow-800 dark:active:to-yellow-900">
          <svg class="w-8 h-8 sm:w-10 sm:h-10 text-yellow-100 group-hover:text-white transition-colors duration-200" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
            <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.688-1.538 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.57-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path>
          </svg>
          <div class="absolute inset-1 rounded-full shadow-inner opacity-20 bg-black dark:bg-white blur-[1px]"></div>
        </button>

        <!-- Star 5 -->
        <button aria-label="5 star rating" class="relative w-14 h-14 sm:w-16 sm:h-16 rounded-full bg-gradient-to-br from-yellow-400 to-yellow-600 dark:from-yellow-600 dark:to-yellow-800 shadow-md
                       flex items-center justify-center transform transition-transform duration-200 hover:scale-110
                       focus:outline-none focus:ring-4 focus:ring-yellow-300 focus:ring-opacity-75 dark:focus:ring-yellow-700
                       group-active:scale-95
                       active:bg-gradient-to-br active:from-yellow-600 active:to-yellow-800 dark:active:from-yellow-800 dark:active:to-yellow-900">
          <svg class="w-8 h-8 sm:w-10 sm:h-10 text-yellow-100 group-hover:text-white transition-colors duration-200" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
            <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.688-1.538 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.57-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path>
          </svg>
          <div class="absolute inset-1 rounded-full shadow-inner opacity-20 bg-black dark:bg-white blur-[1px]"></div>
        </button>
      </div>

      <button class="mt-6 w-full py-3 px-6 bg-gradient-to-br from-pink-500 to-purple-600 dark:from-pink-700 dark:to-purple-800
                     text-white font-bold rounded-xl shadow-lg
                     transform transition-all duration-300 hover:scale-[1.01] hover:shadow-xl
                     focus:outline-none focus:ring-4 focus:ring-pink-300 dark:focus:ring-pink-700 focus:ring-opacity-75
                     active:from-pink-600 active:to-purple-700 dark:active:from-pink-800 dark:active:to-purple-900 border-2 border-pink-400 dark:border-pink-600
                     text-shadow-sm">
        Submit Rating
      </button>
    </div>
    
    <!-- Subtle outer glow effect (skeuomorphic detail) -->
    <div class="absolute -bottom-2 -left-2 w-16 h-16 bg-pink-300 dark:bg-pink-600 rounded-full mix-blend-multiply filter blur-xl opacity-30 group-hover:bottom-0 transition-all duration-500"></div>
    <div class="absolute -top-2 -right-2 w-16 h-16 bg-cyan-300 dark:bg-cyan-600 rounded-full mix-blend-multiply filter blur-xl opacity-30 group-hover:top-0 transition-all duration-500"></div>
  </div>
</div>

<style>
  /* Custom text-shadow for skeuomorphism */
  .text-shadow {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.4), 
                 -1px -1px 2px rgba(255, 255, 255, 0.2);
  }
  .dark .text-shadow {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.6), 
                 -1px -1px 2px rgba(255, 255, 255, 0.1);
  }

  .text-shadow-sm {
    text-shadow: 0.5px 0.5px 1px rgba(0, 0, 0, 0.3);
  }
  .dark .text-shadow-sm {
    text-shadow: 0.5px 0.5px 1px rgba(0, 0, 0, 0.5);
  }
</style>

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

어스 톤의 레트로/빈티지 등급 시스템 구성 요소로, 비즈니스/기업 웹사이트용으로 설계되었습니다. 반응형 디자인과 어두운 테마를 지원합니다.

열다 미리 보기

                <div class="bg-stone-100 dark:bg-stone-900 p-8 rounded-lg shadow-lg max-w-md mx-auto my-10 font-mono">
  <div class="text-stone-800 dark:text-stone-200 text-center mb-6">
    <h2 class="text-3xl font-bold mb-2">Rate Our Service</h2>
    <p class="text-stone-600 dark:text-stone-400">Your feedback helps us improve.</p>
  </div>
  
  <div class="flex justify-center items-center mb-8">
    <div class="flex space-x-2 text-4xl">
      <input type="radio" id="star1" name="rating" value="1" class="hidden" />
      <label for="star1" class="cursor-pointer text-stone-400 hover:text-yellow-500 dark:hover:text-yellow-400 transition-colors duration-200">
        &#9733;
      </label>
      <input type="radio" id="star2" name="rating" value="2" class="hidden" />
      <label for="star2" class="cursor-pointer text-stone-400 hover:text-yellow-500 dark:hover:text-yellow-400 transition-colors duration-200">
        &#9733;
      </label>
      <input type="radio" id="star3" name="rating" value="3" class="hidden" />
      <label for="star3" class="cursor-pointer text-stone-400 hover:text-yellow-500 dark:hover:text-yellow-400 transition-colors duration-200">
        &#9733;
      </label>
      <input type="radio" id="star4" name="rating" value="4" class="hidden" />
      <label for="star4" class="cursor-pointer text-stone-400 hover:text-yellow-500 dark:hover:text-yellow-400 transition-colors duration-200">
        &#9733;
      </label>
      <input type="radio" id="star5" name="rating" value="5" class="hidden" />
      <label for="star5" class="cursor-pointer text-stone-400 hover:text-yellow-500 dark:hover:text-yellow-400 transition-colors duration-200">
        &#9733;
      </label>
    </div>
  </div>

  <div class="mb-6">
    <label for="comment" class="block text-stone-700 dark:text-stone-300 text-sm font-bold mb-2">Leave a comment (optional):</label>
    <textarea id="comment" rows="4" class="shadow appearance-none border rounded w-full py-2 px-3 text-stone-700 leading-tight focus:outline-none focus:shadow-outline bg-stone-200 dark:bg-stone-800 dark:text-stone-300 border-stone-300 dark:border-stone-700 focus:border-stone-500 dark:focus:border-stone-500"></textarea>
  </div>

  <div class="flex justify-between items-center">
    <button class="bg-amber-600 hover:bg-amber-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline transition-colors duration-200">
      Submit Rating
    </button>
    <div class="flex -space-x-2 overflow-hidden">
      <img class="inline-block h-10 w-10 rounded-full ring-2 ring-stone-100 dark:ring-stone-900" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
      <img class="inline-block h-10 w-10 rounded-full ring-2 ring-stone-100 dark:ring-stone-900" src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar">
      <img class="inline-block h-10 w-10 rounded-full ring-2 ring-stone-100 dark:ring-stone-900" src="https://randomuser.me/api/portraits/men/4.jpg" alt="User Avatar">
    </div>
  </div>
</div>

등급 시스템 구성 요소

Retro/Vintage Rating System Complementary Color Scheme을 사용한 전자 상거래를 위한 구성 요소.Dark Mode 지원으로 반응형. JavaScript가 필요하지 않으며 Tailwind CSS가 있는 HTML만 있으면 됩니다.

열다 미리 보기

                <div class="bg-gray-200 dark:bg-gray-800 p-8 min-h-screen flex items-center justify-center font-mono">
  <div class="bg-white dark:bg-gray-900 shadow-lg rounded-lg p-6 max-w-md w-full border-4 border-purple-500 dark:border-yellow-400 transform rotate-3 hover:rotate-0 transition-transform duration-300">
    <div class="text-center mb-6">
      <h2 class="text-3xl font-bold text-purple-700 dark:text-yellow-300 mb-2">Rate Our Product!</h2>
      <p class="text-gray-600 dark:text-gray-400">Share your thoughts on this awesome vintage item.</p>
    </div>

    <div class="flex justify-center items-center mb-6 space-x-2">
      <label for="rating" class="sr-only">Rating</label>
      <input type="range" id="rating" name="rating" min="1" max="5" value="4" class="slider w-full h-2 rounded-lg appearance-none cursor-pointer bg-gradient-to-r from-purple-400 to-red-400 dark:from-yellow-400 dark:to-green-400 thumb-retro" style="--slider-track-color: #d1d5db; --slider-thumb-color: #8b5cf6;">
      <span class="text-2xl font-bold text-purple-700 dark:text-yellow-300" id="rating-value">4</span>
    </div>

    <div class="grid grid-cols-5 gap-2 mb-6">
      <button class="rating-star group relative w-12 h-12 flex items-center justify-center bg-gray-300 dark:bg-gray-700 rounded-full text-2xl text-gray-500 dark:text-gray-400 hover:bg-purple-400 hover:text-white dark:hover:bg-yellow-400 dark:hover:text-gray-900 transition-all duration-200 shadow-md transform hover:scale-110">
        <span class="star-icon">⭐</span>
        <span class="tooltip absolute bottom-full left-1/2 -translate-x-1/2 mb-2 px-3 py-1 bg-gray-800 text-white text-xs rounded opacity-0 group-hover:opacity-100 transition-opacity duration-200 pointer-events-none">Terrible</span>
      </button>
      <button class="rating-star group relative w-12 h-12 flex items-center justify-center bg-gray-300 dark:bg-gray-700 rounded-full text-2xl text-gray-500 dark:text-gray-400 hover:bg-purple-400 hover:text-white dark:hover:bg-yellow-400 dark:hover:text-gray-900 transition-all duration-200 shadow-md transform hover:scale-110">
        <span class="star-icon">⭐⭐</span>
        <span class="tooltip absolute bottom-full left-1/2 -translate-x-1/2 mb-2 px-3 py-1 bg-gray-800 text-white text-xs rounded opacity-0 group-hover:opacity-100 transition-opacity duration-200 pointer-events-none">Bad</span>
      </button>
      <button class="rating-star group relative w-12 h-12 flex items-center justify-center bg-gray-300 dark:bg-gray-700 rounded-full text-2xl text-gray-500 dark:text-gray-400 hover:bg-purple-400 hover:text-white dark:hover:bg-yellow-400 dark:hover:text-gray-900 transition-all duration-200 shadow-md transform hover:scale-110">
        <span class="star-icon">⭐⭐⭐</span>
        <span class="tooltip absolute bottom-full left-1/2 -translate-x-1/2 mb-2 px-3 py-1 bg-gray-800 text-white text-xs rounded opacity-0 group-hover:opacity-100 transition-opacity duration-200 pointer-events-none">Okay</span>
      </button>
      <button class="rating-star group relative w-12 h-12 flex items-center justify-center bg-gray-300 dark:bg-gray-700 rounded-full text-2xl text-gray-500 dark:text-gray-400 hover:bg-purple-400 hover:text-white dark:hover:bg-yellow-400 dark:hover:text-gray-900 transition-all duration-200 shadow-md transform hover:scale-110">
        <span class="star-icon">⭐⭐⭐⭐</span>
        <span class="tooltip absolute bottom-full left-1/2 -translate-x-1/2 mb-2 px-3 py-1 bg-gray-800 text-white text-xs rounded opacity-0 group-hover:opacity-100 transition-opacity duration-200 pointer-events-none">Good</span>
      </button>
      <button class="rating-star group relative w-12 h-12 flex items-center justify-center bg-gray-300 dark:bg-gray-700 rounded-full text-2xl text-gray-500 dark:text-gray-400 hover:bg-purple-400 hover:text-white dark:hover:bg-yellow-400 dark:hover:text-gray-900 transition-all duration-200 shadow-md transform hover:scale-110">
        <span class="star-icon">⭐⭐⭐⭐⭐</span>
        <span class="tooltip absolute bottom-full left-1/2 -translate-x-1/2 mb-2 px-3 py-1 bg-gray-800 text-white text-xs rounded opacity-0 group-hover:opacity-100 transition-opacity duration-200 pointer-events-none">Excellent</span>
      </button>
    </div>

    <div class="mb-6">
      <label for="feedback" class="block text-gray-700 dark:text-gray-300 text-sm font-bold mb-2">Your Feedback:</label>
      <textarea id="feedback" name="feedback" rows="4" class="shadow appearance-none border border-gray-400 dark:border-gray-600 rounded w-full py-3 px-4 text-gray-700 dark:text-gray-200 leading-tight focus:outline-none focus:ring-4 focus:ring-purple-300 dark:focus:ring-yellow-300 bg-gray-100 dark:bg-gray-700 resize-none placeholder-gray-500 dark:placeholder-gray-400 font-mono" placeholder="Tell us more about your experience..."></textarea>
    </div>

    <div class="flex flex-col sm:flex-row justify-between items-center space-y-4 sm:space-y-0 sm:space-x-4">
      <button class="bg-purple-600 hover:bg-purple-700 text-white font-bold py-3 px-6 rounded-lg focus:outline-none focus:shadow-outline transition-all duration-200 transform hover:scale-105 shadow-lg border-2 border-purple-800 dark:bg-yellow-500 dark:hover:bg-yellow-600 dark:text-gray-900 dark:border-yellow-700 w-full sm:w-auto">
        Submit Rating
      </button>
      <button class="bg-gray-400 hover:bg-gray-500 text-white font-bold py-3 px-6 rounded-lg focus:outline-none focus:shadow-outline transition-all duration-200 transform hover:scale-105 shadow-lg border-2 border-gray-600 dark:bg-gray-600 dark:hover:bg-gray-700 dark:border-gray-800 w-full sm:w-auto">
        Cancel
      </button>
    </div>
  </div>
</div>

<style>
  /* Retro slider thumb styles */
  .thumb-retro::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 25px;
    height: 25px;
    background: #8b5cf6; /* Purple */
    cursor: pointer;
    border-radius: 50%;
    border: 3px solid #f9fafb; /* White */
    box-shadow: 0 0 0 4px rgba(139, 92, 246, 0.4); /* Purple glow */
    transition: background 0.15s ease-in-out, border-color 0.15s ease-in-out;
  }

  .dark .thumb-retro::-webkit-slider-thumb {
    background: #fbbf24; /* Yellow */
    border-color: #111827; /* Dark gray */
    box-shadow: 0 0 0 4px rgba(251, 191, 36, 0.4); /* Yellow glow */
  }

  .thumb-retro::-moz-range-thumb {
    width: 25px;
    height: 25px;
    background: #8b5cf6; /* Purple */
    cursor: pointer;
    border-radius: 50%;
    border: 3px solid #f9fafb; /* White */
    box-shadow: 0 0 0 4px rgba(139, 92, 246, 0.4); /* Purple glow */
    transition: background 0.15s ease-in-out, border-color 0.15s ease-in-out;
  }

  .dark .thumb-retro::-moz-range-thumb {
    background: #fbbf24; /* Yellow */
    border-color: #111827; /* Dark gray */
    box-shadow: 0 0 0 4px rgba(251, 191, 36, 0.4); /* Yellow glow */
  }

  /* Tooltip for stars */
  .group .tooltip {
    display: none;
  }

  .group:hover .tooltip {
    display: block;
  }

  /* Custom styles for star rating selection (active state - optional, can be done with JS) */
  .rating-star:hover .star-icon {
    animation: pulse-star 0.3s ease-in-out infinite alternate;
  }

  @keyframes pulse-star {
    from { transform: scale(1); }
    to { transform: scale(1.2); }
  }

  /* Hide the default range input track */
  input[type="range"]::-webkit-slider-runnable-track {
    background: var(--slider-track-color);
    border-radius: 9999px;
  }

  input[type="range"]::-moz-range-track {
    background: var(--slider-track-color);
    border-radius: 9999px;
  }
</style>

등급 시스템 구성 요소

미니멀리스트/플랫 디자인, 그레이스케일 색 구성표, 반응형 디자인 및 Tailwind CSS를 사용한 어두운 테마 지원을 갖춘 전자 상거래를 위한 복잡한 평가 시스템 구성 요소입니다. 자바스크립트가 없습니다. 이미지 및 아바타에 picsum.photos 및 randomuser.me 를 사용합니다.

열다 미리 보기

                <div class="bg-white dark:bg-gray-900 rounded-lg shadow-lg p-6 max-w-xl mx-auto my-10">
    <h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-6">Customer Reviews</h2>

    <!-- Overall Rating Section -->
    <div class="flex items-center mb-6">
        <div class="w-1/3 text-center">
            <p class="text-5xl font-bold text-gray-800 dark:text-white">4.5</p>
            <div class="flex justify-center text-yellow-400 mt-1">
                <svg class="w-6 h-6" 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.539 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.565-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
                <svg class="w-6 h-6" 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.539 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.565-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
                <svg class="w-6 h-6" 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.539 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.565-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
                <svg class="w-6 h-6" 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.539 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.565-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
                <svg class="w-6 h-6 text-gray-300 dark:text-gray-600" 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.539 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.565-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
            </div>
            <p class="text-sm text-gray-600 dark:text-gray-400 mt-1">Based on 125 reviews</p>
        </div>
        <!-- Rating Breakdown -->
        <div class="w-2/3 ml-8">
            <div class="flex items-center mb-2">
                <span class="text-gray-700 dark:text-gray-300 text-sm mr-2">5 Stars</span>
                <div class="flex-grow bg-gray-200 dark:bg-gray-700 rounded-full h-2">
                    <div class="bg-yellow-400 h-2 rounded-full" style="width: 80%;"></div>
                </div>
                <span class="text-gray-700 dark:text-gray-300 text-sm ml-2">80%</span>
            </div>
            <div class="flex items-center mb-2">
                <span class="text-gray-700 dark:text-gray-300 text-sm mr-2">4 Stars</span>
                <div class="flex-grow bg-gray-200 dark:bg-gray-700 rounded-full h-2">
                    <div class="bg-yellow-400 h-2 rounded-full" style="width: 15%;"></div>
                </div>
                <span class="text-gray-700 dark:text-gray-300 text-sm ml-2">15%</span>
            </div>
            <div class="flex items-center mb-2">
                <span class="text-gray-700 dark:text-gray-300 text-sm mr-2">3 Stars</span>
                <div class="flex-grow bg-gray-200 dark:bg-gray-700 rounded-full h-2">
                    <div class="bg-yellow-400 h-2 rounded-full" style="width: 3%;"></div>
                </div>
                <span class="text-gray-700 dark:text-gray-300 text-sm ml-2">3%</span>
            </div>
            <div class="flex items-center mb-2">
                <span class="text-gray-700 dark:text-gray-300 text-sm mr-2">2 Stars</span>
                <div class="flex-grow bg-gray-200 dark:bg-gray-700 rounded-full h-2">
                    <div class="bg-yellow-400 h-2 rounded-full" style="width: 1%;"></div>
                </div>
                <span class="text-gray-700 dark:text-gray-300 text-sm ml-2">1%</span>
            </div>
            <div class="flex items-center">
                <span class="text-gray-700 dark:text-gray-300 text-sm mr-2">1 Star</span>
                <div class="flex-grow bg-gray-200 dark:bg-gray-700 rounded-full h-2">
                    <div class="bg-yellow-400 h-2 rounded-full" style="width: 1%;"></div>
                </div>
                <span class="text-gray-700 dark:text-gray-300 text-sm ml-2">1%</span>
            </div>
        </div>
    </div>

    <!-- Write a Review Button -->
    <div class="text-center mb-8">
        <button class="bg-gray-800 dark:bg-gray-200 text-white dark:text-gray-900 px-6 py-3 rounded-lg hover:bg-gray-700 dark:hover:bg-gray-300 transition duration-300">
            Write a Review
        </button>
    </div>

    <!-- Individual Reviews -->
    <div class="border-t border-gray-200 dark:border-gray-700 pt-6">
        <!-- Review 1 -->
        <div class="mb-6 pb-6 border-b border-gray-200 dark:border-gray-700 last:border-b-0 last:pb-0">
            <div class="flex items-center mb-3">
                <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-4">
                <div>
                    <p class="font-semibold text-gray-800 dark:text-white">John Doe</p>
                    <div class="flex text-yellow-400 text-sm">
                        <svg class="w-4 h-4" 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.539 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.565-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
                        <svg class="w-4 h-4" 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.539 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.565-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
                        <svg class="w-4 h-4" 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.539 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.565-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
                        <svg class="w-4 h-4" 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.539 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.565-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
                        <svg class="w-4 h-4 text-gray-300 dark:text-gray-600" 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.539 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.565-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
                    </div>
                </div>
            </div>
            <p class="text-gray-700 dark:text-gray-300 mb-2">"Absolutely love this product! The quality is superb and it exceeded my expectations. Highly recommend!"</p>
            <p class="text-sm text-gray-500 dark:text-gray-400">Reviewed on January 15, 2024</p>
            <div class="mt-4 flex flex-wrap gap-2">
                <img src="https://picsum.photos/seed/product1_1/100/100" alt="Product Image" class="w-20 h-20 object-cover rounded-lg">
                <img src="https://picsum.photos/seed/product1_2/100/100" alt="Product Image" class="w-20 h-20 object-cover rounded-lg">
            </div>
        </div>

        <!-- Review 2 -->
        <div class="mb-6 pb-6 border-b border-gray-200 dark:border-gray-700 last:border-b-0 last:pb-0">
            <div class="flex items-center mb-3">
                <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-4">
                <div>
                    <p class="font-semibold text-gray-800 dark:text-white">Jane Smith</p>
                    <div class="flex text-yellow-400 text-sm">
                        <svg class="w-4 h-4" 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.539 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.565-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
                        <svg class="w-4 h-4" 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.539 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.565-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
                        <svg class="w-4 h-4" 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.539 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.565-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
                        <svg class="w-4 h-4" 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.539 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.565-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
                        <svg class="w-4 h-4" 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.539 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.565-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
                    </div>
                </div>
            </div>
            <p class="text-gray-700 dark:text-gray-300 mb-2">"Good value for money. The shipping was fast, and the item arrived well-packaged. Happy with my purchase."</p>
            <p class="text-sm text-gray-500 dark:text-gray-400">Reviewed on January 10, 2024</p>
            <div class="mt-4 flex flex-wrap gap-2">
                <img src="https://picsum.photos/seed/product2_1/100/100" alt="Product Image" class="w-20 h-20 object-cover rounded-lg">
            </div>
        </div>

        <!-- Review 3 -->
        <div class="mb-6 pb-6 border-b border-gray-200 dark:border-gray-700 last:border-b-0 last:pb-0">
            <div class="flex items-center mb-3">
                <img src="https://randomuser.me/api/portraits/men/70.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-4">
                <div>
                    <p class="font-semibold text-gray-800 dark:text-white">Peter Jones</p>
                    <div class="flex text-yellow-400 text-sm">
                        <svg class="w-4 h-4" 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.539 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.565-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
                        <svg class="w-4 h-4" 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.539 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.565-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
                        <svg class="w-4 h-4" 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.539 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.565-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
                        <svg class="w-4 h-4 text-gray-300 dark:text-gray-600" 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.539 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.565-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
                        <svg class="w-4 h-4 text-gray-300 dark:text-gray-600" 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.539 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.565-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
                    </div>
                </div>
            </div>
            <p class="text-gray-700 dark:text-gray-300 mb-2">"It's okay. Not the best, not the worst. It does the job, but I expected a bit more."</p>
            <p class="text-sm text-gray-500 dark:text-gray-400">Reviewed on January 05, 2024</p>
        </div>
    </div>

    <!-- Pagination Placeholder -->
    <div class="flex justify-center items-center mt-6 space-x-2">
        <button class="px-3 py-1 text-gray-500 dark:text-gray-400 bg-gray-100 dark:bg-gray-800 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-700">Previous</button>
        <button class="px-3 py-1 text-gray-700 dark:text-white bg-gray-200 dark:bg-gray-700 rounded-lg">1</button>
        <button class="px-3 py-1 text-gray-500 dark:text-gray-400 bg-gray-100 dark:bg-gray-800 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-700">2</button>
        <button class="px-3 py-1 text-gray-500 dark:text-gray-400 bg-gray-100 dark:bg-gray-800 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-700">3</button>
        <button class="px-3 py-1 text-gray-500 dark:text-gray-400 bg-gray-100 dark:bg-gray-800 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-700">Next</button>
    </div>

</div>

등급 시스템 구성 요소

미니멀리스트/플랫 디자인 등급 시스템 구성 요소로, 보색 구성표, 적당한 복잡성, 블로그/콘텐츠 소비에 적합합니다. JavaScript 없이 Tailwind CSS 클래스를 사용하여 어두운 테마를 지원하는 반응형 디자인이 특징입니다.

열다 미리 보기

                <div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
  <div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md max-w-sm w-full">
    <h2 class="text-xl font-semibold text-gray-800 dark:text-white mb-4">Rate this content</h2>
    <div class="flex justify-center space-x-2 mb-4">
      <svg class="w-8 h-8 text-gray-300 dark:text-gray-600 hover:text-yellow-400 dark:hover:text-yellow-300 transition-colors duration-200 cursor-pointer" 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.539 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.565-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118l-2.8-2.034c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path>
      </svg>
      <svg class="w-8 h-8 text-gray-300 dark:text-gray-600 hover:text-yellow-400 dark:hover:text-yellow-300 transition-colors duration-200 cursor-pointer" 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.539 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.565-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118l-2.8-2.034c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path>
      </svg>
      <svg class="w-8 h-8 text-yellow-400 dark:text-yellow-300 hover:text-yellow-400 dark:hover:text-yellow-300 transition-colors duration-200 cursor-pointer" 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.539 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.565-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118l-2.8-2.034c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path>
      </svg>
      <svg class="w-8 h-8 text-yellow-400 dark:text-yellow-300 hover:text-yellow-400 dark:hover:text-yellow-300 transition-colors duration-200 cursor-pointer" 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.539 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.565-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118l-2.8-2.034c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path>
      </svg>
      <svg class="w-8 h-8 text-yellow-400 dark:text-yellow-300 hover:text-yellow-400 dark:hover:text-yellow-300 transition-colors duration-200 cursor-pointer" 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.539 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.565-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118l-2.8-2.034c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path>
      </svg>
    </div>
    <p class="text-sm text-gray-600 dark:text-gray-400 text-center">Click on a star to rate!</p>
  </div>
</div>

등급 시스템 구성 요소

소셜 미디어를 위한 복잡한 복고풍 테마의 등급 시스템 구성 요소로, 단색 색 구성표를 특징으로 합니다. 완벽하게 반응하며 다크 모드를 지원합니다. 이 구성 요소는 JavaScript 없이 HTML 및 Tailwind CSS만 사용합니다.

열다 미리 보기

                <div class="p-8 bg-gray-100 dark:bg-gray-900 min-h-screen font-mono">

  <!-- Retro Rating System Component -->
  <div class="max-w-md mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6">
    <div class="mb-6 text-center">
      <h2 class="text-3xl font-bold text-gray-700 dark:text-gray-200 uppercase tracking-wider">Rate This Post</h2>
      <p class="text-gray-500 dark:text-gray-400 text-sm">Share your thoughts with the community!</p>
    </div>

    <!-- User Avatar and Post Info -->
    <div class="flex items-center mb-6">
      <img class="w-12 h-12 rounded-full border-2 border-gray-300 dark:border-gray-600 mr-4" src="https://randomuser.me/api/portraits/men/75.jpg" alt="User Avatar">
      <div>
        <p class="text-lg font-semibold text-gray-800 dark:text-gray-100">Galactic Traveler</p>
        <p class="text-sm text-gray-500 dark:text-gray-400">Posted 2 hours ago</p>
      </div>
    </div>

    <!-- Rating Stars -->
    <div class="flex justify-center items-center mb-6">
      <input type="radio" id="star5" name="rating" value="5" class="hidden" />
      <label for="star5" class="text-gray-400 dark:text-gray-600 text-5xl cursor-pointer hover:text-yellow-500 dark:hover:text-yellow-400 transition-colors duration-200 leading-none">&starf;</label>
      <input type="radio" id="star4" name="rating" value="4" class="hidden" />
      <label for="star4" class="text-gray-400 dark:text-gray-600 text-5xl cursor-pointer hover:text-yellow-500 dark:hover:text-yellow-400 transition-colors duration-200 leading-none">&starf;</label>
      <input type="radio" id="star3" name="rating" value="3" class="hidden" />
      <label for="star3" class="text-gray-400 dark:text-gray-600 text-5xl cursor-pointer hover:text-yellow-500 dark:hover:text-yellow-400 transition-colors duration-200 leading-none">&starf;</label>
      <input type="radio" id="star2" name="rating" value="2" class="hidden" />
      <label for="star2" class="text-gray-400 dark:text-gray-600 text-5xl cursor-pointer hover:text-yellow-500 dark:hover:text-yellow-400 transition-colors duration-200 leading-none">&starf;</label>
      <input type="radio" id="star1" name="rating" value="1" class="hidden" />
      <label for="star1" class="text-gray-400 dark:text-gray-600 text-5xl cursor-pointer hover:text-yellow-500 dark:hover:text-yellow-400 transition-colors duration-200 leading-none">&starf;</label>
    </div>

    <!-- Textarea for comments -->
    <div class="mb-6">
      <textarea class="w-full p-4 rounded-md bg-gray-50 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 text-gray-800 dark:text-gray-200 focus:outline-none focus:ring-2 focus:ring-gray-400 dark:focus:ring-gray-500 transition-all duration-200 resize-y" rows="4" placeholder="Leave your comment here..."></textarea>
    </div>

    <!-- Buttons -->
    <div class="flex justify-between space-x-4">
      <button class="flex-1 py-3 px-6 rounded-md bg-gray-700 hover:bg-gray-800 text-white dark:bg-gray-600 dark:hover:bg-gray-700 transition-colors duration-200 uppercase font-semibold tracking-wide shadow-md">
        Submit Rating
      </button>
      <button class="flex-1 py-3 px-6 rounded-md bg-gray-300 hover:bg-gray-400 text-gray-800 dark:bg-gray-700 dark:hover:bg-gray-600 dark:text-gray-200 transition-colors duration-200 uppercase font-semibold tracking-wide shadow-md">
        Cancel
      </button>
    </div>

    <!-- Popular Reviews Section (Responsive) -->
    <div class="mt-8 pt-6 border-t border-gray-300 dark:border-gray-700">
      <h3 class="text-2xl font-bold text-gray-700 dark:text-gray-200 mb-4 text-center">Popular Reviews</h3>
      <div class="grid gap-4 md:grid-cols-2">
        <!-- Review Card 1 -->
        <div class="bg-gray-50 dark:bg-gray-700 p-4 rounded-md shadow-sm border border-gray-200 dark:border-gray-600">
          <div class="flex items-center mb-2">
            <img class="w-8 h-8 rounded-full mr-2" src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar">
            <p class="font-semibold text-gray-800 dark:text-gray-100">Pixel Pioneer</p>
          </div>
          <p class="text-yellow-500 dark:text-yellow-400 text-lg mb-2">★★★★★</p>
          <p class="text-gray-600 dark:text-gray-300 text-sm">"Absolutely loved this! Brings back so many memories of old forums."</p>
        </div>
        <!-- Review Card 2 -->
        <div class="bg-gray-50 dark:bg-gray-700 p-4 rounded-md shadow-sm border border-gray-200 dark:border-gray-600">
          <div class="flex items-center mb-2">
            <img class="w-8 h-8 rounded-full mr-2" src="https://randomuser.me/api/portraits/men/4.jpg" alt="User Avatar">
            <p class="font-semibold text-gray-800 dark:text-gray-100">Data Diver</p>
          </div>
          <p class="text-yellow-500 dark:text-yellow-400 text-lg mb-2">★★★★☆</p>
          <p class="text-gray-600 dark:text-gray-300 text-sm">"Great design, very nostalgic. A bit slow on my old phone though."</p>
        </div>
      </div>
       <div class="mt-4 text-center">
        <a href="#" class="text-gray-600 dark:text-gray-400 hover:underline text-sm">View all reviews</a>
      </div>
    </div>

  </div>

</div>

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

전자 상거래를 위한 간단한 레트로 스타일의 등급 시스템 구성 요소로, Tailwind CSS를 사용하여 생생한 색상과 어두운 테마를 지원합니다.

열다 미리 보기

                <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>