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

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