Monospace_Developer_Rating_System_Component

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