등급 시스템 구성 요소

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