Neumorphic 下拉菜单

<div class="relative inline-block text-left">
  <button class="flex items-center justify-center w-12 h-12 rounded-full bg-gradient-to-br from-purple-400 to-indigo-600 shadow-neumorphic-light dark:shadow-neumorphic-dark focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-opacity-75">
    <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar">
  </button>

  <div class="origin-top-right absolute right-0 mt-2 w-56 rounded-md shadow-lg bg-gradient-to-br from-purple-400 to-indigo-600 dark:from-gray-700 dark:to-gray-900 ring-1 ring-black ring-opacity-5 divide-y divide-purple-300 dark:divide-gray-600 focus:outline-none">
    <div class="py-1">
      <a href="#" class="block px-4 py-2 text-sm text-white hover:bg-purple-500 hover:text-white dark:text-gray-200 dark:hover:bg-gray-800">Profile</a>
      <a href="#" class="block px-4 py-2 text-sm text-white hover:bg-purple-500 hover:text-white dark:text-gray-200 dark:hover:bg-gray-800">Settings</a>
    </div>
    <div class="py-1">
      <a href="#" class="block px-4 py-2 text-sm text-white hover:bg-purple-500 hover:text-white dark:text-gray-200 dark:hover:bg-gray-800">Notifications</a>
      <a href="#" class="block px-4 py-2 text-sm text-white hover:bg-purple-500 hover:text-white dark:text-gray-200 dark:hover:bg-gray-800">Messeges</a>
    </div>
    <div class="py-1">
      <a href="#" class="block px-4 py-2 text-sm text-white hover:bg-purple-500 hover:text-white dark:text-gray-200 dark:hover:bg-gray-800">Logout</a>
    </div>
  </div>
</div>

<style>
  .shadow-neumorphic-light {
    box-shadow: 6px 6px 12px #9d7df5, -6px -6px 12px #c9a7ff;
  }
  .dark .shadow-neumorphic-dark {
    box-shadow: 6px 6px 12px #333333, -6px -6px 12px #666666;
  }
</style>