Skeuomorphic_Jewel_Tone_Rating_System_Simple

<div class="flex items-center justify-center p-4 min-h-screen bg-gradient-to-br from-gray-100 to-gray-200 dark:from-gray-900 dark:to-gray-800 font-sans">
  <div class="w-full max-w-sm p-6 rounded-3xl shadow-xl bg-gradient-to-br from-emerald-500 to-teal-600 dark:from-emerald-800 dark:to-teal-900 border-4 border-emerald-400 dark:border-emerald-700
              transform transition-all duration-300 hover:scale-[1.01] hover:shadow-2xl
              relative overflow-hidden group">
    
    <!-- Background Glow Effect (Skeuomorphic Detail) -->
    <div class="absolute -inset-1 rounded-3xl bg-gradient-to-br from-rose-500 to-purple-600 opacity-0 blur-md group-hover:opacity-30 transition-opacity duration-500"></div>
    
    <div class="relative z-10 flex flex-col items-center space-y-6">
      <h2 class="text-3xl font-extrabold text-white text-shadow tracking-tight text-center">
        Rate Our Impact
      </h2>
      <p class="text-sm text-emerald-100/90 text-center mb-4 leading-relaxed max-w-xs">
        Your feedback helps us grow and serve our community better.
      </p>

      <div class="flex space-x-2 sm:space-x-4">
        <!-- Star 1 -->
        <button aria-label="1 star rating" class="relative w-14 h-14 sm:w-16 sm:h-16 rounded-full bg-gradient-to-br from-yellow-400 to-yellow-600 dark:from-yellow-600 dark:to-yellow-800 shadow-md
                       flex items-center justify-center transform transition-transform duration-200 hover:scale-110
                       focus:outline-none focus:ring-4 focus:ring-yellow-300 focus:ring-opacity-75 dark:focus:ring-yellow-700
                       group-active:scale-95
                       active:bg-gradient-to-br active:from-yellow-600 active:to-yellow-800 dark:active:from-yellow-800 dark:active:to-yellow-900">
          <svg class="w-8 h-8 sm:w-10 sm:h-10 text-yellow-100 group-hover:text-white 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.688-1.538 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.57-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path>
          </svg>
           <!-- Inner Shadow (Skeuomorphic Detail) -->
          <div class="absolute inset-1 rounded-full shadow-inner opacity-20 bg-black dark:bg-white blur-[1px]"></div>
        </button>

        <!-- Star 2 -->
        <button aria-label="2 star rating" class="relative w-14 h-14 sm:w-16 sm:h-16 rounded-full bg-gradient-to-br from-yellow-400 to-yellow-600 dark:from-yellow-600 dark:to-yellow-800 shadow-md
                       flex items-center justify-center transform transition-transform duration-200 hover:scale-110
                       focus:outline-none focus:ring-4 focus:ring-yellow-300 focus:ring-opacity-75 dark:focus:ring-yellow-700
                       group-active:scale-95
                       active:bg-gradient-to-br active:from-yellow-600 active:to-yellow-800 dark:active:from-yellow-800 dark:active:to-yellow-900">
          <svg class="w-8 h-8 sm:w-10 sm:h-10 text-yellow-100 group-hover:text-white 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.688-1.538 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.57-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path>
          </svg>
          <div class="absolute inset-1 rounded-full shadow-inner opacity-20 bg-black dark:bg-white blur-[1px]"></div>
        </button>

        <!-- Star 3 -->
        <button aria-label="3 star rating" class="relative w-14 h-14 sm:w-16 sm:h-16 rounded-full bg-gradient-to-br from-yellow-400 to-yellow-600 dark:from-yellow-600 dark:to-yellow-800 shadow-md
                       flex items-center justify-center transform transition-transform duration-200 hover:scale-110
                       focus:outline-none focus:ring-4 focus:ring-yellow-300 focus:ring-opacity-75 dark:focus:ring-yellow-700
                       group-active:scale-95
                       active:bg-gradient-to-br active:from-yellow-600 active:to-yellow-800 dark:active:from-yellow-800 dark:active:to-yellow-900">
          <svg class="w-8 h-8 sm:w-10 sm:h-10 text-yellow-100 group-hover:text-white 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.688-1.538 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.57-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path>
          </svg>
          <div class="absolute inset-1 rounded-full shadow-inner opacity-20 bg-black dark:bg-white blur-[1px]"></div>
        </button>

        <!-- Star 4 -->
        <button aria-label="4 star rating" class="relative w-14 h-14 sm:w-16 sm:h-16 rounded-full bg-gradient-to-br from-yellow-400 to-yellow-600 dark:from-yellow-600 dark:to-yellow-800 shadow-md
                       flex items-center justify-center transform transition-transform duration-200 hover:scale-110
                       focus:outline-none focus:ring-4 focus:ring-yellow-300 focus:ring-opacity-75 dark:focus:ring-yellow-700
                       group-active:scale-95
                       active:bg-gradient-to-br active:from-yellow-600 active:to-yellow-800 dark:active:from-yellow-800 dark:active:to-yellow-900">
          <svg class="w-8 h-8 sm:w-10 sm:h-10 text-yellow-100 group-hover:text-white 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.688-1.538 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.57-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path>
          </svg>
          <div class="absolute inset-1 rounded-full shadow-inner opacity-20 bg-black dark:bg-white blur-[1px]"></div>
        </button>

        <!-- Star 5 -->
        <button aria-label="5 star rating" class="relative w-14 h-14 sm:w-16 sm:h-16 rounded-full bg-gradient-to-br from-yellow-400 to-yellow-600 dark:from-yellow-600 dark:to-yellow-800 shadow-md
                       flex items-center justify-center transform transition-transform duration-200 hover:scale-110
                       focus:outline-none focus:ring-4 focus:ring-yellow-300 focus:ring-opacity-75 dark:focus:ring-yellow-700
                       group-active:scale-95
                       active:bg-gradient-to-br active:from-yellow-600 active:to-yellow-800 dark:active:from-yellow-800 dark:active:to-yellow-900">
          <svg class="w-8 h-8 sm:w-10 sm:h-10 text-yellow-100 group-hover:text-white 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.688-1.538 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.57-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path>
          </svg>
          <div class="absolute inset-1 rounded-full shadow-inner opacity-20 bg-black dark:bg-white blur-[1px]"></div>
        </button>
      </div>

      <button class="mt-6 w-full py-3 px-6 bg-gradient-to-br from-pink-500 to-purple-600 dark:from-pink-700 dark:to-purple-800
                     text-white font-bold rounded-xl shadow-lg
                     transform transition-all duration-300 hover:scale-[1.01] hover:shadow-xl
                     focus:outline-none focus:ring-4 focus:ring-pink-300 dark:focus:ring-pink-700 focus:ring-opacity-75
                     active:from-pink-600 active:to-purple-700 dark:active:from-pink-800 dark:active:to-purple-900 border-2 border-pink-400 dark:border-pink-600
                     text-shadow-sm">
        Submit Rating
      </button>
    </div>
    
    <!-- Subtle outer glow effect (skeuomorphic detail) -->
    <div class="absolute -bottom-2 -left-2 w-16 h-16 bg-pink-300 dark:bg-pink-600 rounded-full mix-blend-multiply filter blur-xl opacity-30 group-hover:bottom-0 transition-all duration-500"></div>
    <div class="absolute -top-2 -right-2 w-16 h-16 bg-cyan-300 dark:bg-cyan-600 rounded-full mix-blend-multiply filter blur-xl opacity-30 group-hover:top-0 transition-all duration-500"></div>
  </div>
</div>

<style>
  /* Custom text-shadow for skeuomorphism */
  .text-shadow {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.4), 
                 -1px -1px 2px rgba(255, 255, 255, 0.2);
  }
  .dark .text-shadow {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.6), 
                 -1px -1px 2px rgba(255, 255, 255, 0.1);
  }

  .text-shadow-sm {
    text-shadow: 0.5px 0.5px 1px rgba(0, 0, 0, 0.3);
  }
  .dark .text-shadow-sm {
    text-shadow: 0.5px 0.5px 1px rgba(0, 0, 0, 0.5);
  }
</style>