Rating System Component

<div class="p-4 sm:p-6 md:p-8 bg-gradient-to-br from-pink-100 via-purple-100 to-green-100 dark:from-purple-950 dark:via-gray-900 dark:to-teal-950 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 bg-white dark:bg-gray-800 rounded-xl shadow-2xl p-6 sm:p-8 transform transition-all duration-300 hover:scale-105 border border-purple-200 dark:border-gray-700 relative overflow-hidden">
    <div class="absolute top-0 left-0 w-24 h-24 bg-gradient-to-br from-pink-300 to-purple-300 dark:from-sky-700 dark:to-purple-700 rounded-br-full opacity-70 blur-md"></div>
    <div class="absolute bottom-0 right-0 w-32 h-32 bg-gradient-to-tl from-green-300 to-yellow-300 dark:from-emerald-700 dark:to-lime-700 rounded-tl-full opacity-70 blur-md"></div>

    <h2 class="text-2xl sm:text-3xl font-extrabold text-gray-800 dark:text-white mb-2 sm:mb-4 tracking-tight leading-tight text-center relative z-10">
      Rate Today's Climate
    </h2>
    <p class="text-sm sm:text-base text-gray-600 dark:text-gray-300 mb-6 sm:mb-8 text-center relative z-10">
      How would you describe the overall weather conditions?
    </p>

    <div class="grid grid-cols-5 gap-2 sm:gap-3 justify-items-center mb-8 relative z-10">
      <!-- Star 1 -->
      <button class="flex flex-col items-center group focus:outline-none focus:ring-4 focus:ring-pink-300 focus:ring-opacity-75 rounded-lg active:scale-95 transition-transform duration-200">
        <span class="block text-4xl sm:text-5xl text-gray-300 dark:text-gray-600 group-hover:text-amber-400 group-focus:text-amber-500 transition-colors duration-200">
          ★
        </span>
        <span class="text-xs sm:text-sm text-gray-500 dark:text-gray-400 mt-1">
          Poor
        </span>
      </button>

      <!-- Star 2 -->
      <button class="flex flex-col items-center group focus:outline-none focus:ring-4 focus:ring-purple-300 focus:ring-opacity-75 rounded-lg active:scale-95 transition-transform duration-200">
        <span class="block text-4xl sm:text-5xl text-gray-300 dark:text-gray-600 group-hover:text-amber-400 group-focus:text-amber-500 transition-colors duration-200">
          ★
        </span>
        <span class="text-xs sm:text-sm text-gray-500 dark:text-gray-400 mt-1">
          Fair
        </span>
      </button>

      <!-- Star 3 -->
      <button class="flex flex-col items-center group focus:outline-none focus:ring-4 focus:ring-green-300 focus:ring-opacity-75 rounded-lg active:scale-95 transition-transform duration-200">
        <span class="block text-4xl sm:text-5xl text-gray-300 dark:text-gray-600 group-hover:text-amber-400 group-focus:text-amber-500 transition-colors duration-200">
          ★
        </span>
        <span class="text-xs sm:text-sm text-gray-500 dark:text-gray-400 mt-1">
          Good
        </span>
      </button>

      <!-- Star 4 -->
      <button class="flex flex-col items-center group focus:outline-none focus:ring-4 focus:ring-blue-300 focus:ring-opacity-75 rounded-lg active:scale-95 transition-transform duration-200">
        <span class="block text-4xl sm:text-5xl text-gray-300 dark:text-gray-600 group-hover:text-amber-400 group-focus:text-amber-500 transition-colors duration-200">
          ★
        </span>
        <span class="text-xs sm:text-sm text-gray-500 dark:text-gray-400 mt-1">
          Great
        </span>
      </button>

      <!-- Star 5 -->
      <button class="flex flex-col items-center group focus:outline-none focus:ring-4 focus:ring-yellow-300 focus:ring-opacity-75 rounded-lg active:scale-95 transition-transform duration-200">
        <span class="block text-4xl sm:text-5xl text-gray-300 dark:text-gray-600 group-hover:text-amber-400 group-focus:text-amber-500 transition-colors duration-200">
          ★
        </span>
        <span class="text-xs sm:text-sm text-gray-500 dark:text-gray-400 mt-1">
          Perfect
        </span>
      </button>
    </div>

    <div class="space-y-4 relative z-10">
      <label for="comments" class="block text-sm font-medium text-gray-700 dark:text-gray-200">Optional comments:</label>
      <textarea id="comments" rows="3" class="w-full p-3 border border-pink-300 dark:border-gray-700 rounded-lg focus:ring-2 focus:ring-pink-400 focus:border-pink-400 outline-none transition-colors duration-200 bg-pink-50 dark:bg-gray-700 text-gray-800 dark:text-gray-50 placeholder-pink-400 dark:placeholder-gray-400 resize-none" placeholder="E.g., 'Sunny with a light breeze.'"></textarea>
    </div>

    <button class="mt-8 w-full py-3 px-6 bg-gradient-to-r from-pink-500 to-purple-500 dark:from-sky-600 dark:to-purple-600 text-white font-semibold rounded-lg shadow-lg hover:shadow-xl transform transition-all duration-300 hover:scale-105 active:scale-95 focus:outline-none focus:ring-4 focus:ring-pink-300 dark:focus:ring-sky-500 relative z-10">
      Submit Rating
    </button>

    <p class="text-xxs text-gray-400 dark:text-gray-500 mt-6 text-center relative z-10">
      Provided by <a href="#" class="underline hover:text-gray-500 dark:hover:text-gray-400 transition-colors duration-200">ClimatePulse Data</a>
    </p>
  </div>
</div>