Neumorphe Like-/Reaction-Tasten

<div class="flex items-center justify-center min-h-screen bg-emerald-50 dark:bg-emerald-950 p-4 font-sans">
  <div class="flex space-x-4 p-4 rounded-3xl shadow-xl dark:shadow-2xl bg-emerald-100 dark:bg-emerald-900
              shadow-emerald-200/80 dark:shadow-emerald-900/80
              dark:shadow-inner-xl dark:shadow-emerald-800/80">

    <!-- Like Button -->
    <button class="flex items-center justify-center w-12 h-12 rounded-full 
                   bg-emerald-100 dark:bg-emerald-900 
                   shadow-neumorphic-light dark:shadow-neumorphic-dark 
                   text-emerald-700 dark:text-emerald-300 
                   hover:shadow-neumorphic-inset-light dark:hover:shadow-neumorphic-inset-dark 
                   focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:ring-opacity-50
                   transition-all duration-300 ease-in-out">
      <svg class="w-6 h-6" 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="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"></path>
      </svg>
    </button>

    <!-- Thumbs Up Button -->
    <button class="flex items-center justify-center w-12 h-12 rounded-full 
                   bg-emerald-100 dark:bg-emerald-900 
                   shadow-neumorphic-light dark:shadow-neumorphic-dark 
                   text-emerald-700 dark:text-emerald-300 
                   hover:shadow-neumorphic-inset-light dark:hover:shadow-neumorphic-inset-dark 
                   focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:ring-opacity-50
                   transition-all duration-300 ease-in-out">
      <svg class="w-6 h-6" 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="M14 10V9m0-1a7 7 0 00-14 0v1m14 0a7 7 0 0114 0v1m-7 8c-1.657 0-3-1.343-3-3s1.343-3 3-3 3 1.343 3 3-1.343 3-3 3zM4 16h-.01M7 16h.01M10 16h.01M13 16h.01M16 16h.01M19 16h.01M22 16h.01"></path>
      </svg>
    </button>

    <!-- Thumbs Down Button -->
    <button class="flex items-center justify-center w-12 h-12 rounded-full 
                   bg-emerald-100 dark:bg-emerald-900 
                   shadow-neumorphic-light dark:shadow-neumorphic-dark 
                   text-emerald-700 dark:text-emerald-300 
                   hover:shadow-neumorphic-inset-light dark:hover:shadow-neumorphic-inset-dark 
                   focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:ring-opacity-50
                   transition-all duration-300 ease-in-out">
      <svg class="w-6 h-6 transform rotate-180" 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="M14 10V9m0-1a7 7 0 00-14 0v1m14 0a7 7 0 0114 0v1m-7 8c-1.657 0-3-1.343-3-3s1.343-3 3-3 3 1.343 3 3-1.343 3-3 3zM4 16h-.01M7 16h.01M10 16h.01M13 16h.01M16 16h.01M19 16h.01M22 16h.01"></path>
      </svg>
    </button>

  </div>
</div>

<style>
  /* Neumorphic Shadows (Tailwind custom values) */
  /* Light Mode */
  .shadow-neumorphic-light {
    box-shadow: 6px 6px 12px #98d8be, -6px -6px 12px #c9fff2;
  }
  .hover\:shadow-neumorphic-inset-light:hover {
    box-shadow: inset 4px 4px 8px #98d8be, inset -4px -4px 8px #c9fff2;
  }

  /* Dark Mode */
  .dark .shadow-neumorphic-dark {
    box-shadow: 6px 6px 12px #0a3d2e, -6px -6px 12px #33a77a;
  }
  .dark .hover\:shadow-neumorphic-inset-dark:hover {
    box-shadow: inset 4px 4px 8px #0a3d2e, inset -4px -4px 8px #33a77a;
  }

  /* General neumorphic base for the container */
  .shadow-xl {
    box-shadow: 10px 10px 20px rgba(0,0,0,0.1), -10px -10px 20px rgba(255,255,255,1); /* Light mode base */
  }
  .dark .shadow-2xl {
    box-shadow: 10px 10px 20px rgba(0,0,0,0.5), -10px -10px 20px rgba(45,45,45,1); /* Dark mode base */
  }

  /* Specific overrides for the emerald background */
  .shadow-emerald-200\/80 {
    box-shadow: 10px 10px 20px rgba(181, 237, 212, 0.8), -10px -10px 20px rgba(239, 255, 247, 1);
  }
  .dark .shadow-emerald-900\/80 {
    box-shadow: 10px 10px 20px rgba(18, 59, 45, 0.8), -10px -10px 20px rgba(41, 107, 81, 1);
  }

  /* Inner shadow for the main container (more pronounced in dark mode) */
  .dark .shadow-inner-xl {
    box-shadow: inset 5px 5px 10px #0a3d2e, inset -5px -5px 10px #33a77a;
  }
</style>