Search Components

Rating System

Allows users to rate content

Monospace_Developer_Rating_System_Component

A clean, code-inspired rating system component for social media interfaces, featuring monospace fonts, terminal aesthetics, and complementary colors. It's fully responsive with dark mode support.

Open Preview

                <div class="font-['JetBrains_Mono',_monospace] bg-gradient-to-br from-indigo-50 to-purple-50 text-slate-800 dark:from-slate-900 dark:to-slate-800 dark:text-slate-200 p-6 sm:p-8 md:p-10 rounded-lg shadow-xl border border-solid border-indigo-200 dark:border-slate-700 max-w-sm mx-auto transition-colors duration-300">
  <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;700&display=swap" rel="stylesheet">
  <style>
    /* Basic reset for illustration purposes within the component */
    .rating-star-input { display: none; }
    .rating-star-label { cursor: pointer; transition: color 0.2s ease-in-out, transform 0.2s ease-in-out; }
    .rating-star-label:hover { transform: scale(1.1); }
    .rating-star-label:focus { outline: none; box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.5); /* indigo-500 */ }
    .rating-star-input:checked ~ .rating-star-label.star-icon,
    .rating-star-input:checked + .rating-star-label.star-icon {
      color: #7c3aed; /* violet-600 for checked stars */
    }
    .dark .rating-star-input:checked ~ .rating-star-label.star-icon,
    .dark .rating-star-input:checked + .rating-star-label.star-icon {
      color: #a78bfa; /* violet-400 for dark mode checked stars */
    }
    .rating-star-label.star-icon {
      color: #94a3b8; /* slate-400 for unchecked stars */
    }
    .dark .rating-star-label.star-icon {
      color: #475569; /* slate-700 for dark mode unchecked stars */
    }
  </style>

  <div class="flex items-center mb-4">
    <img src="https://randomuser.me/api/portraits/men/45.jpg" alt="User Avatar" class="w-12 h-12 rounded-full border-2 border-indigo-400 dark:border-violet-600 mr-4 shadow-md">
    <div>
      <p class="text-lg font-bold text-slate-900 dark:text-slate-100">@dev_master</p>
      <p class="text-xs text-slate-600 dark:text-slate-400">Senior Front-End Dev</p>
    </div>
  </div>

  <h3 class="text-xl font-bold mb-3 text-slate-900 dark:text-slate-100">Rate this project:</h3>

  <div class="flex justify-center text-3xl mb-6">
    <input type="radio" id="star5" name="rating" value="5" class="rating-star-input">
    <label for="star5" class="rating-star-label star-icon" aria-label="5 stars">★</label>
    <input type="radio" id="star4" name="rating" value="4" class="rating-star-input">
    <label for="star4" class="rating-star-label star-icon" aria-label="4 stars">★</label>
    <input type="radio" id="star3" name="rating" value="3" class="rating-star-input">
    <label for="star3" class="rating-star-label star-icon" aria-label="3 stars">★</label>
    <input type="radio" id="star2" name="rating" value="2" class="rating-star-input">
    <label for="star2" class="rating-star-label star-icon" aria-label="2 stars">★</label>
    <input type="radio" id="star1" name="rating" value="1" class="rating-star-input">
    <label for="star1" class="rating-star-label star-icon" aria-label="1 star">★</label>
  </div>

  <div class="mb-6">
    <label for="comment" class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2">Add a quick comment:</label>
    <textarea id="comment" class="w-full p-3 bg-white dark:bg-slate-700 border border-indigo-300 dark:border-slate-600 rounded-md shadow-sm text-slate-800 dark:text-slate-200 placeholder-slate-400 dark:placeholder-slate-500 focus:ring-2 focus:ring-indigo-500 focus:border-transparent transition-all duration-200 text-sm h-24 resize-none" placeholder="e.g., 'Excellent codebase!'"></textarea>
  </div>

  <button class="w-full py-3 px-4 bg-violet-600 hover:bg-violet-700 dark:bg-violet-700 dark:hover:bg-violet-600 text-white font-bold rounded-lg shadow-md hover:shadow-lg focus:outline-none focus:ring-2 focus:ring-violet-500 focus:ring-offset-2 dark:focus:ring-offset-slate-900 transition-all duration-200 text-lg">
    SUBMIT RATING <span class="text-xs ml-2">// &gt;</span>
  </button>

  <div class="mt-6 pt-4 border-t border-indigo-200 dark:border-slate-700 text-xs text-slate-500 dark:text-slate-400 text-center">
    <p><code>[status: live]</code> <span class="mx-1">•</span> <code>build: 0.0.1-beta</code></p>
  </div>
</div>

Neumorphic_Pastel_Rating_System_Component

A simple, responsive neumorphic rating system component with a pastel color scheme, suitable for travel and tourism websites, including dark mode support.

Open Preview

                <div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-800 p-4">
  <div class="w-full max-w-sm p-6 rounded-3xl bg-gray-100 dark:bg-gray-800 shadow-neumorphic-light dark:shadow-neumorphic-dark transition-all duration-300 ease-in-out">
    <h2 class="text-center text-xl md:text-2xl font-semibold text-gray-700 dark:text-gray-200 mb-6">
      Rate Your Experience
    </h2>
    <div class="flex justify-center space-x-3 md:space-x-4 mb-6">
      <!-- Star 1 -->
      <button class="w-12 h-12 md:w-16 md:h-16 rounded-full bg-gray-100 dark:bg-gray-800 flex items-center justify-center group focus:outline-none transition-all duration-300 ease-in-out
                     shadow-neumorphic-light-btn hover:shadow-neumorphic-light-btn-hover dark:shadow-neumorphic-dark-btn dark:hover:shadow-neumorphic-dark-btn-hover">
        <svg class="w-7 h-7 md:w-9 md:h-9 text-purple-300 dark:text-purple-600 group-hover:text-amber-400 transform transition-transform duration-200 ease-in-out group-hover:scale-110" 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.81L14.28 9.539a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.906-2.108a1 1 0 00-1.154 0L6.26 15.067c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path>
        </svg>
      </button>
      <!-- Star 2 -->
      <button class="w-12 h-12 md:w-16 md:h-16 rounded-full bg-gray-100 dark:bg-gray-800 flex items-center justify-center group focus:outline-none transition-all duration-300 ease-in-out
                     shadow-neumorphic-light-btn hover:shadow-neumorphic-light-btn-hover dark:shadow-neumorphic-dark-btn dark:hover:shadow-neumorphic-dark-btn-hover">
        <svg class="w-7 h-7 md:w-9 md:h-9 text-blue-300 dark:text-blue-600 group-hover:text-amber-400 transform transition-transform duration-200 ease-in-out group-hover:scale-110" 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.81L14.28 9.539a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.906-2.108a1 1 0 00-1.154 0L6.26 15.067c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1

Monospace_Developer_Autumn_Rating_System_Component

A complex, monospace-inspired rating system component with autumn colors for industrial and manufacturing applications. Features clean design, multiple interactive elements, full responsiveness, and dark mode support.

Open Preview

                <div class="font-['JetBrains_Mono',_monospace] bg-gray-50 dark:bg-gray-900 min-h-screen p-4 sm:p-6 md:p-8 flex items-center justify-center">
  <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;700&display=swap" rel="stylesheet">
  <div class="w-full max-w-4xl bg-white dark:bg-gray-800 shadow-xl rounded-lg overflow-hidden border border-gray-200 dark:border-gray-700 transition-colors duration-300">
    <div class="bg-amber-800 dark:bg-amber-900 p-4 sm:p-6 flex items-center justify-between border-b border-amber-900 dark:border-amber-700">
      <h2 class="text-xl sm:text-2xl font-bold text-white tracking-wide">System Performance Rating</h2>
      <div class="flex items-center space-x-2">
        <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M16.364 16.364l.707.707M12 21v-1m-4.673-1h4.673M3 12H2m1.636-6.364l.707-.707m0 12.728l-.707.707M6.707 6.707l-.707-.707m12.728 0l-.707.707M17 12a5 5 0 11-10 0 5 5 0 0110 0z"></path></svg>
        <span class="text-sm sm:text-base text-white opacity-75">v1.2.5</span>
      </div>
    </div>

    <div class="p-4 sm:p-6 grid grid-cols-1 md:grid-cols-3 gap-6">
      <div class="md:col-span-1 bg-gray-100 dark:bg-gray-700 rounded-md p-4 space-y-4 border border-gray-200 dark:border-gray-600 shadow-inner">
        <h3 class="text-lg font-bold text-gray-800 dark:text-gray-100 mb-2">Overall Score:</h3>
        <div class="flex items-center justify-center p-4 bg-gray-200 dark:bg-gray-800 rounded-md border border-gray-300 dark:border-gray-600">
          <span class="text-5xl font-extrabold text-amber-700 dark:text-amber-400">4.7</span>
          <span class="text-xl text-gray-500 dark:text-gray-400">/5</span>
        </div>

        <div class="flex items-center space-x-2 text-gray-700 dark:text-gray-300">
          <svg class="w-5 h-5 text-amber-600 dark:text-amber-400" 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.683-1.538 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.783.565-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
          <span class="text-sm">Based on 124 reviews</span>
        </div>

        <div class="pt-4 border-t border-gray-200 dark:border-gray-600">
          <p class="mb-2 text-gray-700 dark:text-gray-300 font-bold text-sm">Key Metrics Breakdown:</p>
          <div class="space-y-1 text-gray-600 dark:text-gray-400 text-xs">
            <div class="flex justify-between items-center">
              <span>Efficiency:</span>
              <span class="text-green-600 dark:text-green-400">A+</span>
            </div>
            <div class="flex justify-between items-center">
              <span>Reliability:</span>
              <span class="text-green-600 dark:text-green-400">A</span>
            </div>
            <div class="flex justify-between items-center">
              <span>Maintenance Cost:</span>
              <span class="text-red-600 dark:text-red-400">C-</span>
            </div>
            <div class="flex justify-between items-center">
              <span>Adaptability:</span>
              <span class="text-blue-600 dark:text-blue-400">B+</span>
            </div>
          </div>
        </div>
      </div>

      <div class="md:col-span-2 space-y-6">
        <div class="">
          <h3 class="text-lg font-bold text-gray-800 dark:text-gray-100 mb-4">Rate This System:</h3>
          <div class="flex items-center space-x-1 sm:space-x-2 text-2xl sm:text-3xl text-gray-300 dark:text-gray-600">
            <svg class="w-8 h-8 sm:w-10 sm:h-10 cursor-pointer hover:text-amber-500 dark:hover:text-amber-400 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.683-1.538 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.783.565-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
            <svg class="w-8 h-8 sm:w-10 sm:h-10 cursor-pointer hover:text-amber-500 dark:hover:text-amber-400 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.683-1.538 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.783.565-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
            <svg class="w-8 h-8 sm:w-10 sm:h-10 cursor-pointer hover:text-amber-500 dark:hover:text-amber-400 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.683-1.538 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.783.565-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
            <svg class="w-8 h-8 sm:w-10 sm:h-10 cursor-pointer hover:text-amber-500 dark:hover:text-amber-400 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.683-1.538 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.783.565-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
            <svg class="w-8 h-8 sm:w-10 sm:h-10 cursor-pointer hover:text-amber-500 dark:hover:text-amber-400 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.683-1.538 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.783.565-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
          </div>
        </div>

        <div class="flex flex-col space-y-4">
          <div>
            <label for="comments" class="block text-sm font-bold text-gray-800 dark:text-gray-100 mb-2">Comments:</label>
            <textarea id="comments" rows="4" class="block w-full px-3 py-2 text-gray-700 dark:text-gray-200 bg-gray-100 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-amber-500 dark:focus:ring-amber-400 transition-colors duration-200 resize-y placeholder-gray-400 dark:placeholder-gray-500" placeholder="Share your thoughts on the system's performance, strengths, or areas for improvement..."></textarea>
          </div>
          <div>
            <label for="recommendation" class="block text-sm font-bold text-gray-800 dark:text-gray-100 mb-2">Would you recommend this system?</label>
            <div class="flex items-center space-x-4">
              <label class="inline-flex items-center">
                <input type="radio" name="recommendation" value="yes" class="form-radio h-4 w-4 text-green-600 focus:ring-green-500 dark:focus:ring-green-400 border-gray-300 dark:border-gray-600 bg-gray-100 dark:bg-gray-700">
                <span class="ml-2 text-gray-700 dark:text-gray-200">Yes</span>
              </label>
              <label class="inline-flex items-center">
                <input type="radio" name="recommendation" value="no" class="form-radio h-4 w-4 text-red-600 focus:ring-red-500 dark:focus:ring-red-400 border-gray-300 dark:border-gray-600 bg-gray-100 dark:bg-gray-700">
                <span class="ml-2 text-gray-700 dark:text-gray-200">No</span>
              </label>
              <label class="inline-flex items-center">
                <input type="radio" name="recommendation" value="maybe" class="form-radio h-4 w-4 text-amber-600 focus:ring-amber-500 dark:focus:ring-amber-400 border-gray-300 dark:border-gray-600 bg-gray-100 dark:bg-gray-700">
                <span class="ml-2 text-gray-700 dark:text-gray-200">Maybe</span>
              </label>
            </div>
          </div>
          <div class="pt-4 flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4 border-t border-gray-200 dark:border-gray-600">
            <button type="submit" class="flex-1 w-full sm:w-auto bg-amber-700 hover:bg-amber-800 dark:bg-amber-600 dark:hover:bg-amber-700 text-white font-bold py-2 px-4 rounded-md focus:outline-none focus:ring-2 focus:ring-amber-500 dark:focus:ring-amber-400 transition-colors duration-200 text-base sm:text-lg tracking-wide shadow-md">
              Submit Rating
            </button>
            <button type="button" class="flex-1 w-full sm:w-auto bg-gray-300 hover:bg-gray-400 dark:bg-gray-600 dark:hover:bg-gray-500 text-gray-800 dark:text-gray-100 font-bold py-2 px-4 rounded-md focus:outline-none focus:ring-2 focus:ring-gray-400 dark:focus:ring-gray-500 transition-colors duration-200 text-base sm:text-lg tracking-wide shadow-md">
              Cancel
            </button>
          </div>
        </div>
      </div>
    </div>

    <div class="bg-amber-700 dark:bg-amber-800 p-4 sm:p-6 text-center text-white text-xs sm:text-sm border-t border-amber-900 dark:border-amber-700">
      <p>&lt;/END_OF_TRANSMISSION&gt; System ID: M-2023-ALPHA</p>
    </div>
  </div>
</div>

Rating System Component

A simple, responsive rating system component with sepia/brown tones, dark mode support, and microinteraction-focused styling, suitable for government/public service websites.

Open Preview

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

    <div class="flex justify-center space-x-2 sm:space-x-4 mb-6">
      <!-- Star 1 -->
      <button class="peer group flex items-center justify-center w-12 h-12 sm:w-16 sm:h-16 rounded-full bg-stone-200 dark:bg-stone-700 hover:bg-amber-300 dark:hover:bg-amber-600 transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-amber-500 transform hover:scale-110 active:scale-95">
        <svg class="w-7 h-7 sm:w-9 sm:h-9 text-stone-600 dark:text-stone-400 group-hover:text-amber-700 dark:group-hover:text-amber-200 transition-colors duration-200" fill="currentColor" viewBox="0 0 24 24">
          <path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279L12 18.896l-7.416 3.931 1.48-8.279L.332 9.306l8.332-1.151L12 .587z"/>
        </svg>
      </button>
      
      <!-- Star 2 -->
      <button class="peer group flex items-center justify-center w-12 h-12 sm:w-16 sm:h-16 rounded-full bg-stone-200 dark:bg-stone-700 hover:bg-amber-300 dark:hover:bg-amber-600 transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-amber-500 transform hover:scale-110 active:scale-95">
        <svg class="w-7 h-7 sm:w-9 sm:h-9 text-stone-600 dark:text-stone-400 group-hover:text-amber-700 dark:group-hover:text-amber-200 transition-colors duration-200" fill="currentColor" viewBox="0 0 24 24">
          <path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279L12 18.896l-7.416 3.931 1.48-8.279L.332 9.306l8.332-1.151L12 .587z"/>
        </svg>
      </button>

      <!-- Star 3 -->
      <button class="peer group flex items-center justify-center w-12 h-12 sm:w-16 sm:h-16 rounded-full bg-stone-200 dark:bg-stone-700 hover:bg-amber-300 dark:hover:bg-amber-600 transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-amber-500 transform hover:scale-110 active:scale-95">
        <svg class="w-7 h-7 sm:w-9 sm:h-9 text-stone-600 dark:text-stone-400 group-hover:text-amber-700 dark:group-hover:text-amber-200 transition-colors duration-200" fill="currentColor" viewBox="0 0 24 24">
          <path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279L12 18.896l-7.416 3.931 1.48-8.279L.332 9.306l8.332-1.151L12 .587z"/>
        </svg>
      </button>

      <!-- Star 4 -->
      <button class="peer group flex items-center justify-center w-12 h-12 sm:w-16 sm:h-16 rounded-full bg-stone-200 dark:bg-stone-700 hover:bg-amber-300 dark:hover:bg-amber-600 transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-amber-500 transform hover:scale-110 active:scale-95">
        <svg class="w-7 h-7 sm:w-9 sm:h-9 text-stone-600 dark:text-stone-400 group-hover:text-amber-700 dark:group-hover:text-amber-200 transition-colors duration-200" fill="currentColor" viewBox="0 0 24 24">
          <path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279L12 18.896l-7.416 3.931 1.48-8.279L.332 9.306l8.332-1.151L12 .587z"/>
        </svg>
      </button>

      <!-- Star 5 -->
      <button class="peer group flex items-center justify-center w-12 h-12 sm:w-16 sm:h-16 rounded-full bg-stone-200 dark:bg-stone-700 hover:bg-amber-300 dark:hover:bg-amber-600 transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-amber-500 transform hover:scale-110 active:scale-95">
        <svg class="w-7 h-7 sm:w-9 sm:h-9 text-stone-600 dark:text-stone-400 group-hover:text-amber-700 dark:group-hover:text-amber-200 transition-colors duration-200" fill="currentColor" viewBox="0 0 24 24">
          <path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279L12 18.896l-7.416 3.931 1.48-8.279L.332 9.306l8.332-1.151L12 .587z"/>
        </svg>
      </button>
    </div>

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

Rating System Component

A simple and engaging rating system component designed with rich jewel tones, providing microinteraction feedback for documentation and knowledge base sites. Fully responsive and supports dark mode.

Open Preview

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

Bauhaus_Music_Rating_System

A responsive music/audio rating system component with a Bauhaus-inspired design, using a purple/violet color scheme. Includes dark mode support and interactive star rating functionality (visual only, no JS).

Open Preview

                <div class="flex items-center justify-center min-h-screen p-4 bg-gray-50 dark:bg-gray-950 font-sans">
  <div class="w-full max-w-sm p-6 rounded-lg shadow-xl bg-white dark:bg-gray-800 transition-colors duration-300 transform border-2 border-purple-300 dark:border-purple-700">
    <h2 class="text-2xl font-bold mb-4 text-purple-800 dark:text-purple-200 text-center uppercase tracking-wider">Rate This Track</h2>

    <div class="flex justify-center mb-6">
      <img src="https://picsum.photos/120/120?random=1" alt="Album Art" class="w-24 h-24 sm:w-32 sm:h-32 rounded-lg object-cover border-2 border-purple-500 dark:border-purple-400 shadow-md">
    </div>

    <div class="text-center mb-6">
      <p class="text-lg font-semibold text-gray-900 dark:text-gray-100">"Cosmic Echoes"</p>
      <p class="text-sm text-gray-600 dark:text-gray-400">AstroFunk Collective</p>
    </div>

    <div class="flex justify-center space-x-2 text-3xl sm:text-4xl text-gray-400 dark:text-gray-600 mb-6">
      <button class="star-button focus:outline-none text-purple-500 dark:text-purple-400 hover:text-purple-600 dark:hover:text-purple-300 transform hover:scale-110 active:scale-95 transition-transform duration-150" aria-label="1 star">
        &#9733;
      </button>
      <button class="star-button focus:outline-none text-purple-500 dark:text-purple-400 hover:text-purple-600 dark:hover:text-purple-300 transform hover:scale-110 active:scale-95 transition-transform duration-150" aria-label="2 stars">
        &#9733;
      </button>
      <button class="star-button focus:outline-none text-purple-500 dark:text-purple-400 hover:text-purple-600 dark:hover:text-purple-300 transform hover:scale-110 active:scale-95 transition-transform duration-150" aria-label="3 stars">
        &#9733;
      </button>
      <button class="star-button focus:outline-none text-gray-400 dark:text-gray-600 hover:text-purple-600 dark:hover:text-purple-300 transform hover:scale-110 active:scale-95 transition-transform duration-150" aria-label="4 stars">
        &#9733;
      </button>
      <button class="star-button focus:outline-none text-gray-400 dark:text-gray-600 hover:text-purple-600 dark:hover:text-purple-300 transform hover:scale-110 active:scale-95 transition-transform duration-150" aria-label="5 stars">
        &#9733;
      </button>
    </div>

    <button class="w-full py-3 bg-purple-600 hover:bg-purple-700 dark:bg-purple-700 dark:hover:bg-purple-600 text-white font-semibold rounded-md shadow-lg transition-colors duration-200 transform focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-opacity-75 uppercase tracking-wide">
      Submit Rating
    </button>
  </div>
</div>

Bauhaus_Grayscale_Rating_System_Component

A complex, responsive rating system component designed in a Bauhaus style with a grayscale color scheme, suitable for event and conference websites. Features interactive elements and dark mode support.

Open Preview

                <div class="p-4 sm:p-6 md:p-8 bg-gray-50 dark:bg-gray-900 min-h-screen flex items-center justify-center font-sans">
  <div class="w-full max-w-4xl bg-white dark:bg-gray-800 shadow-xl rounded-lg overflow-hidden border border-gray-200 dark:border-gray-700 transition-all duration-300 ease-in-out">
    <div class="p-6 sm:p-8 border-b border-gray-200 dark:border-gray-700">
      <h2 class="text-2xl sm:text-3xl font-bold text-gray-900 dark:text-gray-100 mb-2 leading-tight tracking-tight text-center sm:text-left">
        Rate Your Experience at &ldquo;FutureTech Summit 2024&rdquo;
      </h2>
      <p class="text-md text-gray-600 dark:text-gray-400 text-center sm:text-left">
        Your feedback helps us improve future events. Please select your ratings below.
      </p>
    </div>

    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 p-6 sm:p-8">

      <!-- Overall Satisfaction -->
      <div class="flex flex-col border border-gray-300 dark:border-gray-600 rounded-md p-5 bg-gray-100 dark:bg-gray-750 transform transition-transform duration-200 hover:scale-[1.02] active:scale-100">
        <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-4">Overall Satisfaction</h3>
        <div class="flex justify-center items-center space-x-2 sm:space-x-4 mb-4">
          <!-- Star 1 -->
          <div class="relative group">
            <input type="radio" id="overall-star-1" name="overall-satisfaction" class="hidden peer" value="1">
            <label for="overall-star-1" class="cursor-pointer text-gray-400 dark:text-gray-500 text-3xl sm:text-4xl transition-colors duration-200 peer-checked:text-yellow-500 peer-hover:text-yellow-400 peer-checked:dark:text-yellow-400 peer-hover:dark:text-yellow-300 transform scale-90 group-hover:scale-100" title="Terrible">&#9733;</label>
          </div>
          <!-- Star 2 -->
          <div class="relative group">
            <input type="radio" id="overall-star-2" name="overall-satisfaction" class="hidden peer" value="2">
            <label for="overall-star-2" class="cursor-pointer text-gray-400 dark:text-gray-500 text-3xl sm:text-4xl transition-colors duration-200 peer-checked:text-yellow-500 peer-hover:text-yellow-400 peer-checked:dark:text-yellow-400 peer-hover:dark:text-yellow-300 transform scale-90 group-hover:scale-100" title="Poor">&#9733;</label>
          </div>
          <!-- Star 3 -->
          <div class="relative group">
            <input type="radio" id="overall-star-3" name="overall-satisfaction" class="hidden peer" value="3">
            <label for="overall-star-3" class="cursor-pointer text-gray-400 dark:text-gray-500 text-3xl sm:text-4xl transition-colors duration-200 peer-checked:text-yellow-500 peer-hover:text-yellow-400 peer-checked:dark:text-yellow-400 peer-hover:dark:text-yellow-300 transform scale-90 group-hover:scale-100" title="Average">&#9733;</label>
          </div>
          <!-- Star 4 -->
          <div class="relative group">
            <input type="radio" id="overall-star-4" name="overall-satisfaction" class="hidden peer" value="4">
            <label for="overall-star-4" class="cursor-pointer text-gray-400 dark:text-gray-500 text-3xl sm:text-4xl transition-colors duration-200 peer-checked:text-yellow-500 peer-hover:text-yellow-400 peer-checked:dark:text-yellow-400 peer-hover:dark:text-yellow-300 transform scale-90 group-hover:scale-100" title="Good">&#9733;</label>
          </div>
          <!-- Star 5 -->
          <div class="relative group">
            <input type="radio" id="overall-star-5" name="overall-satisfaction" class="hidden peer" value="5">
            <label for="overall-star-5" class="cursor-pointer text-gray-400 dark:text-gray-500 text-3xl sm:text-4xl transition-colors duration-200 peer-checked:text-yellow-500 peer-hover:text-yellow-400 peer-checked:dark:text-yellow-400 peer-hover:dark:text-yellow-300 transform scale-90 group-hover:scale-100" title="Excellent">&#9733;</label>
          </div>
        </div>
        <p class="text-sm text-gray-500 dark:text-gray-400 text-center">How would you rate your overall experience?</p>
      </div>

      <!-- Content Quality -->
      <div class="flex flex-col border border-gray-300 dark:border-gray-600 rounded-md p-5 bg-gray-100 dark:bg-gray-750 transform transition-transform duration-200 hover:scale-[1.02] active:scale-100">
        <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-4">Content Quality</h3>
        <div class="flex justify-center items-center space-x-2 sm:space-x-4 mb-4">
          <div class="relative group">
            <input type="radio" id="content-star-1" name="content-quality" class="hidden peer" value="1">
            <label for="content-star-1" class="cursor-pointer text-gray-400 dark:text-gray-500 text-3xl sm:text-4xl transition-colors duration-200 peer-checked:text-yellow-500 peer-hover:text-yellow-400 peer-checked:dark:text-yellow-400 peer-hover:dark:text-yellow-300 transform scale-90 group-hover:scale-100">&#9733;</label>
          </div>
          <div class="relative group">
            <input type="radio" id="content-star-2" name="content-quality" class="hidden peer" value="2">
            <label for="content-star-2" class="cursor-pointer text-gray-400 dark:text-gray-500 text-3xl sm:text-4xl transition-colors duration-200 peer-checked:text-yellow-500 peer-hover:text-yellow-400 peer-checked:dark:text-yellow-400 peer-hover:dark:text-yellow-300 transform scale-90 group-hover:scale-100">&#9733;</label>
          </div>
          <div class="relative group">
            <input type="radio" id="content-star-3" name="content-quality" class="hidden peer" value="3">
            <label for="content-star-3" class="cursor-pointer text-gray-400 dark:text-gray-500 text-3xl sm:text-4xl transition-colors duration-200 peer-checked:text-yellow-500 peer-hover:text-yellow-400 peer-checked:dark:text-yellow-400 peer-hover:dark:text-yellow-300 transform scale-90 group-hover:scale-100">&#9733;</label>
          </div>
          <div class="relative group">
            <input type="radio" id="content-star-4" name="content-quality" class="hidden peer" value="4">
            <label for="content-star-4" class="cursor-pointer text-gray-400 dark:text-gray-500 text-3xl sm:text-4xl transition-colors duration-200 peer-checked:text-yellow-500 peer-hover:text-yellow-400 peer-checked:dark:text-yellow-400 peer-hover:dark:text-yellow-300 transform scale-90 group-hover:scale-100">&#9733;</label>
          </div>
          <div class="relative group">
            <input type="radio" id="content-star-5" name="content-quality" class="hidden peer" value="5">
            <label for="content-star-5" class="cursor-pointer text-gray-400 dark:text-gray-500 text-3xl sm:text-4xl transition-colors duration-200 peer-checked:text-yellow-500 peer-hover:text-yellow-400 peer-checked:dark:text-yellow-400 peer-hover:dark:text-yellow-300 transform scale-90 group-hover:scale-100">&#9733;</label>
          </div>
        </div>
        <p class="text-sm text-gray-500 dark:text-gray-400 text-center">How valuable was the session content?</p>
      </div>

      <!-- Speaker Engagement -->
      <div class="flex flex-col border border-gray-300 dark:border-gray-600 rounded-md p-5 bg-gray-100 dark:bg-gray-750 transform transition-transform duration-200 hover:scale-[1.02] active:scale-100">
        <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-4">Speaker Engagement</h3>
        <div class="flex justify-center items-center space-x-2 sm:space-x-4 mb-4">
          <div class="relative group">
            <input type="radio" id="speaker-star-1" name="speaker-engagement" class="hidden peer" value="1">
            <label for="speaker-star-1" class="cursor-pointer text-gray-400 dark:text-gray-500 text-3xl sm:text-4xl transition-colors duration-200 peer-checked:text-yellow-500 peer-hover:text-yellow-400 peer-checked:dark:text-yellow-400 peer-hover:dark:text-yellow-300 transform scale-90 group-hover:scale-100">&#9733;</label>
          </div>
          <div class="relative group">
            <input type="radio" id="speaker-star-2" name="speaker-engagement" class="hidden peer" value="2">
            <label for="speaker-star-2" class="cursor-pointer text-gray-400 dark:text-gray-500 text-3xl sm:text-4xl transition-colors duration-200 peer-checked:text-yellow-500 peer-hover:text-yellow-400 peer-checked:dark:text-yellow-400 peer-hover:dark:text-yellow-300 transform scale-90 group-hover:scale-100">&#9733;</label>
          </div>
          <div class="relative group">
            <input type="radio" id="speaker-star-3" name="speaker-engagement" class="hidden peer" value="3">
            <label for="speaker-star-3" class="cursor-pointer text-gray-400 dark:text-gray-500 text-3xl sm:text-4xl transition-colors duration-200 peer-checked:text-yellow-500 peer-hover:text-yellow-400 peer-checked:dark:text-yellow-400 peer-hover:dark:text-yellow-300 transform scale-90 group-hover:scale-100">&#9733;</label>
          </div>
          <div class="relative group">
            <input type="radio" id="speaker-star-4" name="speaker-engagement" class="hidden peer" value="4">
            <label for="speaker-star-4" class="cursor-pointer text-gray-400 dark:text-gray-500 text-3xl sm:text-4xl transition-colors duration-200 peer-checked:text-yellow-500 peer-hover:text-yellow-400 peer-checked:dark:text-yellow-400 peer-hover:dark:text-yellow-300 transform scale-90 group-hover:scale-100">&#9733;</label>
          </div>
          <div class="relative group">
            <input type="radio" id="speaker-star-5" name="speaker-engagement" class="hidden peer" value="5">
            <label for="speaker-star-5" class="cursor-pointer text-gray-400 dark:text-gray-500 text-3xl sm:text-4xl transition-colors duration-200 peer-checked:text-yellow-500 peer-hover:text-yellow-400 peer-checked:dark:text-yellow-400 peer-hover:dark:text-yellow-300 transform scale-90 group-hover:scale-100">&#9733;</label>
          </div>
        </div>
        <p class="text-sm text-gray-500 dark:text-gray-400 text-center">How engaging and clear were the speakers?</p>
      </div>

      <!-- Venue & Logistics -->
      <div class="flex flex-col border border-gray-300 dark:border-gray-600 rounded-md p-5 bg-gray-100 dark:bg-gray-750 transform transition-transform duration-200 hover:scale-[1.02] active:scale-100">
        <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-4">Venue & Logistics</h3>
        <div class="flex justify-center items-center space-x-2 sm:space-x-4 mb-4">
          <div class="relative group">
            <input type="radio" id="venue-star-1" name="venue-logistics" class="hidden peer" value="1">
            <label for="venue-star-1" class="cursor-pointer text-gray-400 dark:text-gray-500 text-3xl sm:text-4xl transition-colors duration-200 peer-checked:text-yellow-500 peer-hover:text-yellow-400 peer-checked:dark:text-yellow-400 peer-hover:dark:text-yellow-300 transform scale-90 group-hover:scale-100">&#9733;</label>
          </div>
          <div class="relative group">
            <input type="radio" id="venue-star-2" name="venue-logistics" class="hidden peer" value="2">
            <label for="venue-star-2" class="cursor-pointer text-gray-400 dark:text-gray-500 text-3xl sm:text-4xl transition-colors duration-200 peer-checked:text-yellow-500 peer-hover:text-yellow-400 peer-checked:dark:text-yellow-400 peer-hover:dark:text-yellow-300 transform scale-90 group-hover:scale-100">&#9733;</label>
          </div>
          <div class="relative group">
            <input type="radio" id="venue-star-3" name="venue-logistics" class="hidden peer" value="3">
            <label for="venue-star-3" class="cursor-pointer text-gray-400 dark:text-gray-500 text-3xl sm:text-4xl transition-colors duration-200 peer-checked:text-yellow-500 peer-hover:text-yellow-400 peer-checked:dark:text-yellow-400 peer-hover:dark:text-yellow-300 transform scale-90 group-hover:scale-100">&#9733;</label>
          </div>
          <div class="relative group">
            <input type="radio" id="venue-star-4" name="venue-logistics" class="hidden peer" value="4">
            <label for="venue-star-4" class="cursor-pointer text-gray-400 dark:text-gray-500 text-3xl sm:text-4xl transition-colors duration-200 peer-checked:text-yellow-500 peer-hover:text-yellow-400 peer-checked:dark:text-yellow-400 peer-hover:dark:text-yellow-300 transform scale-90 group-hover:scale-100">&#9733;</label>
          </div>
          <div class="relative group">
            <input type="radio" id="venue-star-5" name="venue-logistics" class="hidden peer" value="5">
            <label for="venue-star-5" class="cursor-pointer text-gray-400 dark:text-gray-500 text-3xl sm:text-4xl transition-colors duration-200 peer-checked:text-yellow-500 peer-hover:text-yellow-400 peer-checked:dark:text-yellow-400 peer-hover:dark:text-yellow-300 transform scale-90 group-hover:scale-100">&#9733;</label>
          </div>
        </div>
        <p class="text-sm text-gray-500 dark:text-gray-400 text-center">How was the venue and event organization?</p>
      </div>

      <!-- Networking Opportunities -->
      <div class="flex flex-col border border-gray-300 dark:border-gray-600 rounded-md p-5 bg-gray-100 dark:bg-gray-750 transform transition-transform duration-200 hover:scale-[1.02] active:scale-100">
        <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-4">Networking Opportunities</h3>
        <div class="flex justify-center items-center space-x-2 sm:space-x-4 mb-4">
          <div class="relative group">
            <input type="radio" id="network-star-1" name="networking-opportunities" class="hidden peer" value="1">
            <label for="network-star-1" class="cursor-pointer text-gray-400 dark:text-gray-500 text-3xl sm:text-4xl transition-colors duration-200 peer-checked:text-yellow-500 peer-hover:text-yellow-400 peer-checked:dark:text-yellow-400 peer-hover:dark:text-yellow-300 transform scale-90 group-hover:scale-100">&#9733;</label>
          </div>
          <div class="relative group">
            <input type="radio" id="network-star-2" name="networking-opportunities" class="hidden peer" value="2">
            <label for="network-star-2" class="cursor-pointer text-gray-400 dark:text-gray-500 text-3xl sm:text-4xl transition-colors duration-200 peer-checked:text-yellow-500 peer-hover:text-yellow-400 peer-checked:dark:text-yellow-400 peer-hover:dark:text-yellow-300 transform scale-90 group-hover:scale-100">&#9733;</label>
          </div>
          <div class="relative group">
            <input type="radio" id="network-star-3" name="networking-opportunities" class="hidden peer" value="3">
            <label for="network-star-3" class="cursor-pointer text-gray-400 dark:text-gray-500 text-3xl sm:text-4xl transition-colors duration-200 peer-checked:text-yellow-500 peer-hover:text-yellow-400 peer-checked:dark:text-yellow-400 peer-hover:dark:text-yellow-300 transform scale-90 group-hover:scale-100">&#9733;</label>
          </div>
          <div class="relative group">
            <input type="radio" id="network-star-4" name="networking-opportunities" class="hidden peer" value="4">
            <label for="network-star-4" class="cursor-pointer text-gray-400 dark:text-gray-500 text-3xl sm:text-4xl transition-colors duration-200 peer-checked:text-yellow-500 peer-hover:text-yellow-400 peer-checked:dark:text-yellow-400 peer-hover:dark:text-yellow-300 transform scale-90 group-hover:scale-100">&#9733;</label>
          </div>
          <div class="relative group">
            <input type="radio" id="network-star-5" name="networking-opportunities" class="hidden peer" value="5">
            <label for="network-star-5" class="cursor-pointer text-gray-400 dark:text-gray-500 text-3xl sm:text-4xl transition-colors duration-200 peer-checked:text-yellow-500 peer-hover:text-yellow-400 peer-checked:dark:text-yellow-400 peer-hover:dark:text-yellow-300 transform scale-90 group-hover:scale-100">&#9733;</label>
          </div>
        </div>
        <p class="text-sm text-gray-500 dark:text-gray-400 text-center">Were there sufficient networking chances?</p>
      </div>

      <!-- Value for Money -->
      <div class="flex flex-col border border-gray-300 dark:border-gray-600 rounded-md p-5 bg-gray-100 dark:bg-gray-750 transform transition-transform duration-200 hover:scale-[1.02] active:scale-100">
        <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-4">Value for Money</h3>
        <div class="flex justify-center items-center space-x-2 sm:space-x-4 mb-4">
          <div class="relative group">
            <input type="radio" id="value-star-1" name="value-for-money" class="hidden peer" value="1">
            <label for="value-star-1" class="cursor-pointer text-gray-400 dark:text-gray-500 text-3xl sm:text-4xl transition-colors duration-200 peer-checked:text-yellow-500 peer-hover:text-yellow-400 peer-checked:dark:text-yellow-400 peer-hover:dark:text-yellow-300 transform scale-90 group-hover:scale-100">&#9733;</label>
          </div>
          <div class="relative group">
            <input type="radio" id="value-star-2" name="value-for-money" class="hidden peer" value="2">
            <label for="value-star-2" class="cursor-pointer text-gray-400 dark:text-gray-500 text-3xl sm:text-4xl transition-colors duration-200 peer-checked:text-yellow-500 peer-hover:text-yellow-400 peer-checked:dark:text-yellow-400 peer-hover:dark:text-yellow-300 transform scale-90 group-hover:scale-100">&#9733;</label>
          </div>
          <div class="relative group">
            <input type="radio" id="value-star-3" name="value-for-money" class="hidden peer" value="3">
            <label for="value-star-3" class="cursor-pointer text-gray-400 dark:text-gray-500 text-3xl sm:text-4xl transition-colors duration-200 peer-checked:text-yellow-500 peer-hover:text-yellow-400 peer-checked:dark:text-yellow-400 peer-hover:dark:text-yellow-300 transform scale-90 group-hover:scale-100">&#9733;</label>
          </div>
          <div class="relative group">
            <input type="radio" id="value-star-4" name="value-for-money" class="hidden peer" value="4">
            <label for="value-star-4" class="cursor-pointer text-gray-400 dark:text-gray-500 text-3xl sm:text-4xl transition-colors duration-200 peer-checked:text-yellow-500 peer-hover:text-yellow-400 peer-checked:dark:text-yellow-400 peer-hover:dark:text-yellow-300 transform scale-90 group-hover:scale-100">&#9733;</label>
          </div>
          <div class="relative group">
            <input type="radio" id="value-star-5" name="value-for-money" class="hidden peer" value="5">
            <label for="value-star-5" class="cursor-pointer text-gray-400 dark:text-gray-500 text-3xl sm:text-4xl transition-colors duration-200 peer-checked:text-yellow-500 peer-hover:text-yellow-400 peer-checked:dark:text-yellow-400 peer-hover:dark:text-yellow-300 transform scale-90 group-hover:scale-100">&#9733;</label>
          </div>
        </div>
        <p class="text-sm text-gray-500 dark:text-gray-400 text-center">Did the event offer good value for its cost?</p>
      </div>

    </div>

    <div class="p-6 sm:p-8 border-t border-gray-200 dark:border-gray-700">
      <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-4">Additional Feedback</h3>
      <textarea class="w-full p-3 sm:p-4 border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-gray-400 dark:focus:ring-gray-500 bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-gray-200 placeholder-gray-500 dark:placeholder-gray-400 resize-y min-h-[100px] transition-colors duration-200" placeholder="Please share any other thoughts or suggestions..."></textarea>

      <div class="mt-6 flex justify-end">
        <button type="submit" class="px-6 py-3 bg-black text-white font-semibold rounded-md shadow-md hover:bg-gray-800 dark:bg-gray-200 dark:text-gray-900 dark:hover:bg-gray-300 focus:outline-none focus:ring-2 focus:ring-black dark:focus:ring-gray-300 focus:ring-offset-2 focus:ring-offset-gray-50 dark:focus:ring-offset-gray-900 transition-all duration-300 ease-in-out transform hover:scale-[1.02] active:scale-100">
          Submit Feedback
        </button>
      </div>
    </div>
  </div>
</div>

Bauhaus Pastel Rating System Component

A responsive and functional rating system component with geometric forms and pastel colors, suitable for dashboard integration. Includes dark mode support.

Open Preview

                <div class="p-4 sm:p-6 md:p-8 bg-gradient-to-br from-purple-50 to-pink-50 dark:from-gray-800 dark:to-gray-900 min-h-screen flex items-center justify-center font-sans">
  <div class="w-full max-w-md mx-auto bg-white dark:bg-gray-700 rounded-lg shadow-xl p-6 sm:p-8 border border-gray-100 dark:border-gray-600 transition-all duration-300 ease-in-out">
    <h3 class="text-xl sm:text-2xl font-bold text-gray-800 dark:text-gray-100 mb-6 text-center tracking-wide">Rate Our Service</h3>
    
    <div class="flex justify-center items-center gap-2 sm:gap-3 mb-8">
      <button aria-label="1 star rating" class="rating-star text-3xl sm:text-4xl text-gray-300 dark:text-gray-500 hover:text-yellow-400 dark:hover:text-yellow-300 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-blue-300 rounded-sm">
        &#9733;
      </button>
      <button aria-label="2 star rating" class="rating-star text-3xl sm:text-4xl text-gray-300 dark:text-gray-500 hover:text-yellow-400 dark:hover:text-yellow-300 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-blue-300 rounded-sm">
        &#9733;
      </button>
      <button aria-label="3 star rating" class="rating-star text-3xl sm:text-4xl text-yellow-400 dark:text-yellow-300 hover:text-yellow-400 dark:hover:text-yellow-300 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-blue-300 rounded-sm">
        &#9733;
      </button>
      <button aria-label="4 star rating" class="rating-star text-3xl sm:text-4xl text-gray-300 dark:text-gray-500 hover:text-yellow-400 dark:hover:text-yellow-300 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-blue-300 rounded-sm">
        &#9733;
      </button>
      <button aria-label="5 star rating" class="rating-star text-3xl sm:text-4xl text-gray-300 dark:text-gray-500 hover:text-yellow-400 dark:hover:text-yellow-300 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-blue-300 rounded-sm">
        &#9733;
      </button>
    </div>
    
    <div class="mb-6">
      <label for="comments" class="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-2">Comments (Optional):</label>
      <textarea id="comments" rows="4" class="block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:ring-2 focus:ring-blue-300 focus:border-blue-300 dark:bg-gray-800 dark:text-gray-100 resize-none transition-colors duration-200 placeholder-gray-400 dark:placeholder-gray-500" placeholder="Tell us about your experience..."></textarea>
    </div>
    
    <div class="flex justify-center">
      <button type="submit" class="w-full max-w-xs py-2 px-4 border border-transparent rounded-md shadow-sm text-lg font-semibold text-white bg-blue-500 hover:bg-blue-600 dark:bg-blue-600 dark:hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-offset-gray-800 dark:focus:ring-blue-600 transition-colors duration-200 ease-in-out transform hover:-translate-y-0.5">
        Submit Rating
      </button>
    </div>
  </div>
</div>

Neumorphic Vibrant Rating System Component

A complex, interactive rating system component designed with a Neumorphic style and vibrant color scheme, suitable for forum and community platforms. It includes star ratings, up/down voting, and a numerical display, with full responsiveness and dark mode support.

Open Preview

                <div class="p-6 sm:p-8 md:p-10 bg-gradient-to-br from-purple-100 to-pink-100 dark:from-gray-900 dark:to-gray-800 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 lg:max-w-xl xl:max-w-2xl mx-auto rounded-3xl shadow-xl space-y-8 p-6 sm:p-8 md:p-10
    bg-gradient-to-br from-purple-50 to-pink-50 dark:from-gray-850 dark:to-gray-750
    dark:shadow-[inset_2px_2px_5px_#222,inset_-5px_-5px_10px_#444] shadow-[inset_2px_2px_5px_#dcdcdc,inset_-5px_-5px_15px_#ffffff]">

    <div class="text-center">
      <h2 class="text-2xl sm:text-3xl font-bold mb-2 text-purple-700 dark:text-purple-300">
        Rate This Discussion!
      </h2>
      <p class="text-sm sm:text-base text-pink-600 dark:text-pink-200">
        Your feedback helps the community grow.
      </p>
    </div>

    <!-- Star Rating Section -->
    <div class="flex justify-center items-center gap-2 sm:gap-3 lg:gap-4 p-4 sm:p-5 rounded-2xl
      bg-gradient-to-br from-purple-100 to-pink-100 dark:from-gray-800 dark:to-gray-700
      shadow-[inset_2px_2px_5px_#e0e0e0,inset_-5px_-5px_10px_#ffffff] dark:shadow-[inset_2px_2px_5px_#222,inset_-5px_-5px_10px_#444]
      relative border-t border-l border-white/50 dark:border-gray-600/50">

      <!-- Each star is a 'button' for demonstration, in a real app these would be radio inputs or JS controlled -->
      <div class="group relative cursor-pointer">
        <svg class="w-8 h-8 sm:w-10 sm:h-10 text-yellow-400 opacity-60 hover:opacity-100 transition-all duration-200
          group-hover:drop-shadow-[0_0_8px_rgba(252,211,77,0.7)] group-[.active]:opacity-100 group-[.active]:drop-shadow-[0_0_8px_rgba(252,211,77,0.7)]"
          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.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path>
        </svg>
        <span class="absolute top-full left-1/2 -translate-x-1/2 mt-1 px-2 py-1 bg-gradient-to-br from-purple-100 to-pink-100 dark:from-gray-800 dark:to-gray-700 rounded-lg text-xs text-purple-700 dark:text-purple-300 opacity-0 group-hover:opacity-100 transition-opacity duration-200 shadow-md whitespace-nowrap">Terrible</span>
      </div>
      <div class="group relative cursor-pointer">
        <svg class="w-8 h-8 sm:w-10 sm:h-10 text-yellow-400 opacity-60 hover:opacity-100 transition-all duration-200
          group-hover:drop-shadow-[0_0_8px_rgba(252,211,77,0.7)] group-[.active]:opacity-100 group-[.active]:drop-shadow-[0_0_8px_rgba(252,211,77,0.7)]"
          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.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path>
        </svg>
        <span class="absolute top-full left-1/2 -translate-x-1/2 mt-1 px-2 py-1 bg-gradient-to-br from-purple-100 to-pink-100 dark:from-gray-800 dark:to-gray-700 rounded-lg text-xs text-purple-700 dark:text-purple-300 opacity-0 group-hover:opacity-100 transition-opacity duration-200 shadow-md whitespace-nowrap">Bad</span>
      </div>
      <div class="group relative cursor-pointer">
        <svg class="w-8 h-8 sm:w-10 sm:h-10 text-yellow-400 opacity-60 hover:opacity-100 transition-all duration-200
          group-hover:drop-shadow-[0_0_8px_rgba(252,211,77,0.7)] group-[.active]:opacity-100 group-[.active]:drop-shadow-[0_0_8px_rgba(252,211,77,0.7)]"
          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.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path>
        </svg>
        <span class="absolute top-full left-1/2 -translate-x-1/2 mt-1 px-2 py-1 bg-gradient-to-br from-purple-100 to-pink-100 dark:from-gray-800 dark:to-gray-700 rounded-lg text-xs text-purple-700 dark:text-purple-300 opacity-0 group-hover:opacity-100 transition-opacity duration-200 shadow-md whitespace-nowrap">Okay</span>
      </div>
      <div class="group relative cursor-pointer">
        <svg class="w-8 h-8 sm:w-10 sm:h-10 text-yellow-400 opacity-60 hover:opacity-100 transition-all duration-200
          group-hover:drop-shadow-[0_0_8px_rgba(252,211,77,0.7)] group-[.active]:opacity-100 group-[.active]:drop-shadow-[0_0_8px_rgba(252,211,77,0.7)]"
          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.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path>
        </svg>
        <span class="absolute top-full left-1/2 -translate-x-1/2 mt-1 px-2 py-1 bg-gradient-to-br from-purple-100 to-pink-100 dark:from-gray-800 dark:to-gray-700 rounded-lg text-xs text-purple-700 dark:text-purple-300 opacity-0 group-hover:opacity-100 transition-opacity duration-200 shadow-md whitespace-nowrap">Good</span>
      </div>
      <div class="group relative cursor-pointer active">
        <svg class="w-8 h-8 sm:w-10 sm:h-10 text-yellow-400 opacity-100 transition-all duration-200
          drop-shadow-[0_0_8px_rgba(252,211,77,0.7)] !group-hover:opacity-100 !group-hover:drop-shadow-[0_0_8px_rgba(252,211,77,0.7)]"
          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.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path>
        </svg>
        <span class="absolute top-full left-1/2 -translate-x-1/2 mt-1 px-2 py-1 bg-gradient-to-br from-purple-100 to-pink-100 dark:from-gray-800 dark:to-gray-700 rounded-lg text-xs text-purple-700 dark:text-purple-300 opacity-0 group-hover:opacity-100 transition-opacity duration-200 shadow-md whitespace-nowrap">Excellent</span>
      </div>
    </div>

    <!-- Up/Down Voting Section -->
    <div class="flex justify-center items-center gap-6 sm:gap-8 p-4 sm:p-5 rounded-2xl relative
      bg-gradient-to-br from-purple-100 to-pink-100 dark:from-gray-800 dark:to-gray-700
      shadow-[inset_2px_2px_5px_#e0e0e0,inset_-5px_-5px_10px_#ffffff] dark:shadow-[inset_2px_2px_5px_#222,inset_-5px_-5px_10px_#444]
      border-t border-l border-white/50 dark:border-gray-600/50">
      
      <!-- Downvote Button -->
      <button class="relative px-4 py-2 sm:px-6 sm:py-3 rounded-full group
        bg-gradient-to-br from-pink-500 to-red-500 dark:from-pink-600 dark:to-red-600
        shadow-[5px_5px_10px_#d0d0d0,-5px_-5px_10px_#ffffff] dark:shadow-[5px_5px_10px_#111,-5px_-5px_10px_#555]
        text-white font-semibold flex items-center justify-center gap-2
        hover:shadow-[inset_2px_2px_5px_#a0a0a0,inset_-5px_-5px_10px_#ffffff] dark:hover:shadow-[inset_2px_2px_5px_#222,inset_-5px_-5px_10px_#444]
        transition-all duration-200 active:scale-95">
        <svg class="w-5 h-5 sm:w-6 sm:h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
          <path fill-rule="evenodd" d="M14.707 12.707a1 1 0 01-1.414 0L10 9.414l-3.293 3.293a1 1 0 01-1.414-1.414l4-4a1 1 0 011.414 0l4 4a1 1 0 010 1.414z" clip-rule="evenodd"></path>
        </svg>
        <span class="text-sm sm:text-base">Downvote</span>
      </button>
      
      <!-- Score Display -->
      <span class="text-4xl sm:text-5xl font-extrabold text-purple-700 dark:text-purple-300 drop-shadow-md">
        +124
      </span>
      
      <!-- Upvote Button active -->
      <button class="relative px-4 py-2 sm:px-6 sm:py-3 rounded-full active group
        bg-gradient-to-br from-green-500 to-blue-500 dark:from-green-600 dark:to-blue-600
        shadow-[inset_2px_2px_5px_#a0a0a0,inset_-5px_-5px_10px_#ffffff] dark:shadow-[inset_2px_2px_5px_#222,inset_-5px_-5px_10px_#444]
        text-white font-semibold flex items-center justify-center gap-2
        hover:shadow-[5px_5px_10px_#d0d0d0,-5px_-5px_10px_#ffffff] dark:hover:shadow-[5px_5px_10px_#111,-5px_-5px_10px_#555]
        transition-all duration-200 active:scale-95">
        <svg class="w-5 h-5 sm:w-6 sm:h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
          <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"></path>
        </svg>
        <span class="text-sm sm:text-base">Upvote</span>
      </button>
    </div>

    <!-- Comment/Submit Section -->
    <div class="flex flex-col sm:flex-row gap-4">
      <input type="text" placeholder="Add a quick comment..." class="flex-grow px-5 py-3 rounded-full
        bg-purple-50 dark:bg-gray-700 text-purple-800 dark:text-white
        shadow-[inset_2px_2px_5px_#d0d0d0,inset_-5px_-5px_10px_#ffffff] dark:shadow-[inset_2px_2px_5px_#222,inset_-5px_-5px_10px_#444]
        focus:outline-none focus:ring-2 focus:ring-purple-400 dark:focus:ring-purple-500
        placeholder-purple-400 dark:placeholder-gray-500 transition-all duration-200 text-sm sm:text-base">
      <button class="px-6 py-3 rounded-full
        bg-gradient-to-br from-purple-600 to-pink-600 dark:from-purple-700 dark:to-pink-700
        shadow-[5px_5px_10px_#d0d0d0,-5px_-5px_10px_#ffffff] dark:shadow-[5px_5px_10px_#111,-5px_-5px_10px_#555]
        text-white font-semibold flex items-center justify-center gap-2 transition-all duration-200
        hover:scale-[1.02] hover:shadow-[7px_7px_14px_#c0c0c0,-7px_-7px_14px_#ffffff] dark:hover:shadow-[7px_7px_14px_#000,-7px_-7px_14px_#666]
        active:scale-95 active:shadow-[inset_2px_2px_5px_#a0a0a0,inset_-5px_-5px_10px_#ffffff] dark:active:shadow-[inset_2px_2px_5px_#222,inset_-5px_-5px_10px_#444]">
        Submit Rating
      </button>
    </div>

    <p class="text-xs text-center text-gray-500 dark:text-gray-400 mt-6">
      Average rating: <span class="font-bold text-indigo-700 dark:text-indigo-300">4.5/5</span> based on <span class="font-bold text-indigo-700 dark:text-indigo-300">2,345 votes</span>
    </p>

  </div>
  
  <!-- Custom Dark Mode Toggle (for demonstration) -->
  <div class="absolute top-4 right-4 flex items-center space-x-2">
    <span class="text-gray-700 dark:text-gray-300 text-sm">Light</span>
    <label for="dark-mode-toggle" class="relative inline-flex items-center cursor-pointer">
      <input type="checkbox" id="dark-mode-toggle" class="sr-only peer" onchange="document.documentElement.classList.toggle('dark')">
      <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-purple-300 dark:peer-focus:ring-purple-800 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-purple-600"></div>
    </label>
    <span class="text-gray-700 dark:text-gray-300 text-sm">Dark</span>
  </div>
</div>

<style>
  /* Custom CSS for Neumorphism background colors */
  .dark .bg-gray-850 {
    background-color: #1a1a1a; /* Deeper dark for neumorphism inset */
  }
  .dark .bg-gray-750 {
    background-color: #2a2a2a; /* Lighter dark for neumorphism inset */
  }
</style>

Rating System Component

A minimalist and flat design rating component suitable for dashboard applications, featuring jewel tones and full responsiveness with dark mode support.

Open Preview

                <div class="p-4 sm:p-6 md:p-8 bg-white dark:bg-gray-800 rounded-lg shadow-lg max-w-sm mx-auto transition-colors duration-300">
  <h2 class="text-lg sm:text-xl font-semibold text-gray-800 dark:text-white mb-4 text-center sm:text-left">Overall Satisfaction</h2>
  <div class="flex items-center justify-center sm:justify-start mb-4">
    <div class="flex space-x-1">
      <!-- Active Stars -->
      <svg class="w-6 h-6 sm:w-7 sm:h-7 text-emerald-500 dark:text-emerald-400 fill-current" viewBox="0 0 24 24">
        <path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279L12 18.896l-7.416 3.896 1.48-8.279L.001 9.306l8.332-1.151L12 .587z" />
      </svg>
      <svg class="w-6 h-6 sm:w-7 sm:h-7 text-emerald-500 dark:text-emerald-400 fill-current" viewBox="0 0 24 24">
        <path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279L12 18.896l-7.416 3.896 1.48-8.279L.001 9.306l8.332-1.151L12 .587z" />
      </svg>
      <svg class="w-6 h-6 sm:w-7 sm:h-7 text-emerald-500 dark:text-emerald-400 fill-current" viewBox="0 0 24 24">
        <path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279L12 18.896l-7.416 3.896 1.48-8.279L.001 9.306l8.332-1.151L12 .587z" />
      </svg>
      <svg class="w-6 h-6 sm:w-7 sm:h-7 text-emerald-500 dark:text-emerald-400 fill-current" viewBox="0 0 24 24">
        <path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279L12 18.896l-7.416 3.896 1.48-8.279L.001 9.306l8.332-1.151L12 .587z" />
      </svg>
      <!-- Inactive Stars -->
      <svg class="w-6 h-6 sm:w-7 sm:h-7 text-gray-300 dark:text-gray-600 fill-current" viewBox="0 0 24 24">
        <path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279L12 18.896l-7.416 3.896 1.48-8.279L.001 9.306l8.332-1.151L12 .587z" />
      </svg>
    </div>
    <span class="ml-3 text-lg sm:text-xl font-bold text-gray-800 dark:text-white">4.0</span>
  </div>
  <p class="text-sm sm:text-base text-gray-600 dark:text-gray-300 text-center sm:text-left">Based on 125 ratings</p>
</div>

Search Components

Categories

Rating System