Monospace_Developer_Autumn_Rating_System_Component

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