Komponente des neumorphen lebendigen Bewertungssystems

<div class="p-6 sm:p-8 md:p-10 bg-gradient-to-br from-purple-100 to-pink-100 dark:from-gray-900 dark:to-gray-800 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 lg:max-w-xl xl:max-w-2xl mx-auto rounded-3xl shadow-xl space-y-8 p-6 sm:p-8 md:p-10
    bg-gradient-to-br from-purple-50 to-pink-50 dark:from-gray-850 dark:to-gray-750
    dark:shadow-[inset_2px_2px_5px_#222,inset_-5px_-5px_10px_#444] shadow-[inset_2px_2px_5px_#dcdcdc,inset_-5px_-5px_15px_#ffffff]">

    <div class="text-center">
      <h2 class="text-2xl sm:text-3xl font-bold mb-2 text-purple-700 dark:text-purple-300">
        Rate This Discussion!
      </h2>
      <p class="text-sm sm:text-base text-pink-600 dark:text-pink-200">
        Your feedback helps the community grow.
      </p>
    </div>

    <!-- Star Rating Section -->
    <div class="flex justify-center items-center gap-2 sm:gap-3 lg:gap-4 p-4 sm:p-5 rounded-2xl
      bg-gradient-to-br from-purple-100 to-pink-100 dark:from-gray-800 dark:to-gray-700
      shadow-[inset_2px_2px_5px_#e0e0e0,inset_-5px_-5px_10px_#ffffff] dark:shadow-[inset_2px_2px_5px_#222,inset_-5px_-5px_10px_#444]
      relative border-t border-l border-white/50 dark:border-gray-600/50">

      <!-- Each star is a 'button' for demonstration, in a real app these would be radio inputs or JS controlled -->
      <div class="group relative cursor-pointer">
        <svg class="w-8 h-8 sm:w-10 sm:h-10 text-yellow-400 opacity-60 hover:opacity-100 transition-all duration-200
          group-hover:drop-shadow-[0_0_8px_rgba(252,211,77,0.7)] group-[.active]:opacity-100 group-[.active]:drop-shadow-[0_0_8px_rgba(252,211,77,0.7)]"
          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.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-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="absolute top-full left-1/2 -translate-x-1/2 mt-1 px-2 py-1 bg-gradient-to-br from-purple-100 to-pink-100 dark:from-gray-800 dark:to-gray-700 rounded-lg text-xs text-purple-700 dark:text-purple-300 opacity-0 group-hover:opacity-100 transition-opacity duration-200 shadow-md whitespace-nowrap">Terrible</span>
      </div>
      <div class="group relative cursor-pointer">
        <svg class="w-8 h-8 sm:w-10 sm:h-10 text-yellow-400 opacity-60 hover:opacity-100 transition-all duration-200
          group-hover:drop-shadow-[0_0_8px_rgba(252,211,77,0.7)] group-[.active]:opacity-100 group-[.active]:drop-shadow-[0_0_8px_rgba(252,211,77,0.7)]"
          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.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-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="absolute top-full left-1/2 -translate-x-1/2 mt-1 px-2 py-1 bg-gradient-to-br from-purple-100 to-pink-100 dark:from-gray-800 dark:to-gray-700 rounded-lg text-xs text-purple-700 dark:text-purple-300 opacity-0 group-hover:opacity-100 transition-opacity duration-200 shadow-md whitespace-nowrap">Bad</span>
      </div>
      <div class="group relative cursor-pointer">
        <svg class="w-8 h-8 sm:w-10 sm:h-10 text-yellow-400 opacity-60 hover:opacity-100 transition-all duration-200
          group-hover:drop-shadow-[0_0_8px_rgba(252,211,77,0.7)] group-[.active]:opacity-100 group-[.active]:drop-shadow-[0_0_8px_rgba(252,211,77,0.7)]"
          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.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-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="absolute top-full left-1/2 -translate-x-1/2 mt-1 px-2 py-1 bg-gradient-to-br from-purple-100 to-pink-100 dark:from-gray-800 dark:to-gray-700 rounded-lg text-xs text-purple-700 dark:text-purple-300 opacity-0 group-hover:opacity-100 transition-opacity duration-200 shadow-md whitespace-nowrap">Okay</span>
      </div>
      <div class="group relative cursor-pointer">
        <svg class="w-8 h-8 sm:w-10 sm:h-10 text-yellow-400 opacity-60 hover:opacity-100 transition-all duration-200
          group-hover:drop-shadow-[0_0_8px_rgba(252,211,77,0.7)] group-[.active]:opacity-100 group-[.active]:drop-shadow-[0_0_8px_rgba(252,211,77,0.7)]"
          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.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-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="absolute top-full left-1/2 -translate-x-1/2 mt-1 px-2 py-1 bg-gradient-to-br from-purple-100 to-pink-100 dark:from-gray-800 dark:to-gray-700 rounded-lg text-xs text-purple-700 dark:text-purple-300 opacity-0 group-hover:opacity-100 transition-opacity duration-200 shadow-md whitespace-nowrap">Good</span>
      </div>
      <div class="group relative cursor-pointer active">
        <svg class="w-8 h-8 sm:w-10 sm:h-10 text-yellow-400 opacity-100 transition-all duration-200
          drop-shadow-[0_0_8px_rgba(252,211,77,0.7)] !group-hover:opacity-100 !group-hover:drop-shadow-[0_0_8px_rgba(252,211,77,0.7)]"
          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.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-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="absolute top-full left-1/2 -translate-x-1/2 mt-1 px-2 py-1 bg-gradient-to-br from-purple-100 to-pink-100 dark:from-gray-800 dark:to-gray-700 rounded-lg text-xs text-purple-700 dark:text-purple-300 opacity-0 group-hover:opacity-100 transition-opacity duration-200 shadow-md whitespace-nowrap">Excellent</span>
      </div>
    </div>

    <!-- Up/Down Voting Section -->
    <div class="flex justify-center items-center gap-6 sm:gap-8 p-4 sm:p-5 rounded-2xl relative
      bg-gradient-to-br from-purple-100 to-pink-100 dark:from-gray-800 dark:to-gray-700
      shadow-[inset_2px_2px_5px_#e0e0e0,inset_-5px_-5px_10px_#ffffff] dark:shadow-[inset_2px_2px_5px_#222,inset_-5px_-5px_10px_#444]
      border-t border-l border-white/50 dark:border-gray-600/50">
      
      <!-- Downvote Button -->
      <button class="relative px-4 py-2 sm:px-6 sm:py-3 rounded-full group
        bg-gradient-to-br from-pink-500 to-red-500 dark:from-pink-600 dark:to-red-600
        shadow-[5px_5px_10px_#d0d0d0,-5px_-5px_10px_#ffffff] dark:shadow-[5px_5px_10px_#111,-5px_-5px_10px_#555]
        text-white font-semibold flex items-center justify-center gap-2
        hover:shadow-[inset_2px_2px_5px_#a0a0a0,inset_-5px_-5px_10px_#ffffff] dark:hover:shadow-[inset_2px_2px_5px_#222,inset_-5px_-5px_10px_#444]
        transition-all duration-200 active:scale-95">
        <svg class="w-5 h-5 sm:w-6 sm:h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
          <path fill-rule="evenodd" d="M14.707 12.707a1 1 0 01-1.414 0L10 9.414l-3.293 3.293a1 1 0 01-1.414-1.414l4-4a1 1 0 011.414 0l4 4a1 1 0 010 1.414z" clip-rule="evenodd"></path>
        </svg>
        <span class="text-sm sm:text-base">Downvote</span>
      </button>
      
      <!-- Score Display -->
      <span class="text-4xl sm:text-5xl font-extrabold text-purple-700 dark:text-purple-300 drop-shadow-md">
        +124
      </span>
      
      <!-- Upvote Button active -->
      <button class="relative px-4 py-2 sm:px-6 sm:py-3 rounded-full active group
        bg-gradient-to-br from-green-500 to-blue-500 dark:from-green-600 dark:to-blue-600
        shadow-[inset_2px_2px_5px_#a0a0a0,inset_-5px_-5px_10px_#ffffff] dark:shadow-[inset_2px_2px_5px_#222,inset_-5px_-5px_10px_#444]
        text-white font-semibold flex items-center justify-center gap-2
        hover:shadow-[5px_5px_10px_#d0d0d0,-5px_-5px_10px_#ffffff] dark:hover:shadow-[5px_5px_10px_#111,-5px_-5px_10px_#555]
        transition-all duration-200 active:scale-95">
        <svg class="w-5 h-5 sm:w-6 sm:h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
          <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"></path>
        </svg>
        <span class="text-sm sm:text-base">Upvote</span>
      </button>
    </div>

    <!-- Comment/Submit Section -->
    <div class="flex flex-col sm:flex-row gap-4">
      <input type="text" placeholder="Add a quick comment..." class="flex-grow px-5 py-3 rounded-full
        bg-purple-50 dark:bg-gray-700 text-purple-800 dark:text-white
        shadow-[inset_2px_2px_5px_#d0d0d0,inset_-5px_-5px_10px_#ffffff] dark:shadow-[inset_2px_2px_5px_#222,inset_-5px_-5px_10px_#444]
        focus:outline-none focus:ring-2 focus:ring-purple-400 dark:focus:ring-purple-500
        placeholder-purple-400 dark:placeholder-gray-500 transition-all duration-200 text-sm sm:text-base">
      <button class="px-6 py-3 rounded-full
        bg-gradient-to-br from-purple-600 to-pink-600 dark:from-purple-700 dark:to-pink-700
        shadow-[5px_5px_10px_#d0d0d0,-5px_-5px_10px_#ffffff] dark:shadow-[5px_5px_10px_#111,-5px_-5px_10px_#555]
        text-white font-semibold flex items-center justify-center gap-2 transition-all duration-200
        hover:scale-[1.02] hover:shadow-[7px_7px_14px_#c0c0c0,-7px_-7px_14px_#ffffff] dark:hover:shadow-[7px_7px_14px_#000,-7px_-7px_14px_#666]
        active:scale-95 active:shadow-[inset_2px_2px_5px_#a0a0a0,inset_-5px_-5px_10px_#ffffff] dark:active:shadow-[inset_2px_2px_5px_#222,inset_-5px_-5px_10px_#444]">
        Submit Rating
      </button>
    </div>

    <p class="text-xs text-center text-gray-500 dark:text-gray-400 mt-6">
      Average rating: <span class="font-bold text-indigo-700 dark:text-indigo-300">4.5/5</span> based on <span class="font-bold text-indigo-700 dark:text-indigo-300">2,345 votes</span>
    </p>

  </div>
  
  <!-- Custom Dark Mode Toggle (for demonstration) -->
  <div class="absolute top-4 right-4 flex items-center space-x-2">
    <span class="text-gray-700 dark:text-gray-300 text-sm">Light</span>
    <label for="dark-mode-toggle" class="relative inline-flex items-center cursor-pointer">
      <input type="checkbox" id="dark-mode-toggle" class="sr-only peer" onchange="document.documentElement.classList.toggle('dark')">
      <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-purple-300 dark:peer-focus:ring-purple-800 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-purple-600"></div>
    </label>
    <span class="text-gray-700 dark:text-gray-300 text-sm">Dark</span>
  </div>
</div>

<style>
  /* Custom CSS for Neumorphism background colors */
  .dark .bg-gray-850 {
    background-color: #1a1a1a; /* Deeper dark for neumorphism inset */
  }
  .dark .bg-gray-750 {
    background-color: #2a2a2a; /* Lighter dark for neumorphism inset */
  }
</style>