Search Components

Rating System

Allows users to rate content

Monospace Forest Rating System Component

A clean, code-inspired rating system component with a forest green palette, suitable for portfolios. Features interactive stars for rating and displays average ratings, fully responsive with dark mode support.

Open Preview

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

Rating System Component

A clean, minimalist rating system component with a candy/sweet color scheme, designed for weather/climate data. It uses a grid system and emphasizes typography, with full responsiveness and dark mode support.

Open Preview

                <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

A simple, brutalist-style rating system component for travel and tourism websites, featuring cool neutrals and dark mode support.

Open Preview

                <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

A simple, responsive rating system component with a skeuomorphic design, jewel tone color scheme, and dark mode support, suitable for non-profit/charity websites.

Open Preview

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

Retro Rating System Component

A retro/vintage rating system component with Earth tones, designed for business/corporate websites. It supports responsive design and dark theme.

Open Preview

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

Rating System Component

Retro/Vintage Rating System Component for E-commerce with Complementary Color Scheme.Responsive with Dark Mode Support. No JavaScript needed, only HTML with Tailwind CSS.

Open Preview

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

Rating System Component

A complex rating system component for e-commerce with minimalist/flat design, grayscale color scheme, responsive design, and dark theme support using Tailwind CSS. No JavaScript. Uses picsum.photos and randomuser.me for images and avatars.

Open Preview

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

Rating System Component

A minimalist/flat design rating system component with a complementary color scheme, moderate complexity, suitable for blog/content consumption. It features a responsive design with dark theme support using Tailwind CSS classes and no JavaScript.

Open Preview

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

Rating System Component

A complex, retro-themed rating system component for social media, featuring a monochromatic color scheme. It's fully responsive and supports a dark mode. This component uses only HTML and Tailwind CSS, with no JavaScript.

Open Preview

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

Retro Rating System Component

A simple, retro-styled rating system component for e-commerce, featuring vibrant colors and dark theme support using Tailwind CSS.

Open Preview

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

Search Components

Categories

Rating System