ニューモーフィック Back to Top ボタン (オーシャン ブルー)

<div class="flex justify-center items-center h-screen bg-blue-100 dark:bg-gray-900 duration-300">
  <!-- Component Wrapper -->
  <a href="#top" class="
      relative z-10 
      p-4 md:p-5 
      rounded-full 
      shadow-neumorphic-light-blue dark:shadow-neumorphic-dark-blue 
      text-blue-600 dark:text-blue-300 
      hover:shadow-neumorphic-light-blue-pressed dark:hover:shadow-neumorphic-dark-blue-pressed 
      active:shadow-neumorphic-light-blue-pressed dark:active:shadow-neumorphic-dark-blue-pressed 
      transition-all duration-300 ease-in-out 
      focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-opacity-75 
      group
    ">
    <svg class="w-8 h-8 md:w-10 md:h-10 rotate-180 transition-transform duration-300 group-hover:-translate-y-1" 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>

    <!-- Hidden arrow for hover effect (optional, uncomment to enable) -->
    <!-- <svg class="absolute w-8 h-8 md:w-10 md:h-10 text-blue-400 dark:text-blue-500 opacity-0 group-hover:opacity-100 transition-opacity duration-300 inset-0 m-auto -translate-y-2 group-hover:translate-y-0" 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> -->
  </a>

  <!-- Tailwind JIT custom utility classes for neumorphism (add these to your tailwind.config.js) -->
  <style>
    /* Light mode */
    .shadow-neumorphic-light-blue {
      box-shadow: 6px 6px 12px #98b3d6, -6px -6px 12px #cbe7ff;
    }
    .shadow-neumorphic-light-blue-pressed {
      box-shadow: inset 4px 4px 8px #98b3d6, inset -4px -4px 8px #cbe7ff;
    }

    /* Dark mode */
    .dark .shadow-neumorphic-dark-blue {
      box-shadow: 6px 6px 12px #181c2f, -6px -6px 12px #263456;
    }
    .dark .shadow-neumorphic-dark-blue-pressed {
      box-shadow: inset 4px 4px 8px #181c2f, inset -4px -4px 8px #263456;
    }
  </style>
</div>