Neumorphic 导航栏

<nav class="p-4 bg-lime-100 dark:bg-emerald-900 shadow-neumorphic-light dark:shadow-neumorphic-dark flex flex-col md:flex-row justify-between items-center rounded-2xl max-w-7xl mx-auto my-8">
  <div class="flex items-center space-x-2 mb-4 md:mb-0">
    <svg class="w-8 h-8 text-emerald-700 dark:text-lime-300" 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>
    <span class="text-2xl font-bold text-emerald-800 dark:text-lime-200 font-serif">LoveLink</span>
  </div>
  <ul class="flex flex-col md:flex-row space-y-4 md:space-y-0 md:space-x-8 text-lg font-medium text-emerald-700 dark:text-lime-300">
    <li>
      <a href="#" class="block py-2 px-4 rounded-xl transition-all duration-300 ease-in-out
        shadow-neumorphic-inner-light hover:shadow-neumorphic-outer-light
        dark:shadow-neumorphic-inner-dark dark:hover:shadow-neumorphic-outer-dark
        focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:ring-opacity-50
        text-emerald-700 dark:text-lime-300 hover:text-emerald-900 dark:hover:text-lime-100">
        Discover
      </a>
    </li>
    <li>
      <a href="#" class="block py-2 px-4 rounded-xl transition-all duration-300 ease-in-out
        shadow-neumorphic-inner-light hover:shadow-neumorphic-outer-light
        dark:shadow-neumorphic-inner-dark dark:hover:shadow-neumorphic-outer-dark
        focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:ring-opacity-50
        text-emerald-700 dark:text-lime-300 hover:text-emerald-900 dark:hover:text-lime-100">
        Messages
      </a>
    </li>
    <li>
      <a href="#" class="block py-2 px-4 rounded-xl transition-all duration-300 ease-in-out
        shadow-neumorphic-inner-light hover:shadow-neumorphic-outer-light
        dark:shadow-neumorphic-inner-dark dark:hover:shadow-neumorphic-outer-dark
        focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:ring-opacity-50
        text-emerald-700 dark:text-lime-300 hover:text-emerald-900 dark:hover:text-lime-100">
        Profile
      </a>
    </li>
    <li>
      <a href="#" class="block py-2 px-4 rounded-xl transition-all duration-300 ease-in-out
        shadow-neumorphic-inner-light hover:shadow-neumorphic-outer-light
        dark:shadow-neumorphic-inner-dark dark:hover:shadow-neumorphic-outer-dark
        focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:ring-opacity-50
        text-emerald-700 dark:text-lime-300 hover:text-emerald-900 dark:hover:text-lime-100">
        Settings
      </a>
    </li>
  </ul>
</nav>

<style>
  /* Neumorphic Shadows - You would typically configure these in your tailwind.config.js */
  .shadow-neumorphic-light {
    box-shadow: 6px 6px 12px #9acd32, -6px -6px 12px #e0ffe0;
  }
  .dark .shadow-neumorphic-dark {
    box-shadow: 6px 6px 12px #104e3b, -6px -6px 12px #268a6f;
  }

  .shadow-neumorphic-inner-light {
    box-shadow: inset 3px 3px 6px #9acd32, inset -3px -3px 6px #e0ffe0;
  }
  .dark .shadow-neumorphic-inner-dark {
    box-shadow: inset 3px 3px 6px #104e3b, inset -3px -3px 6px #268a6f;
  }

  .shadow-neumorphic-outer-light {
    box-shadow: 6px 6px 12px #9acd32, -6px -6px 12px #e0ffe0;
  }
  .dark .shadow-neumorphic-outer-dark {
    box-shadow: 6px 6px 12px #104e3b, -6px -6px 12px #268a6f;
  }

  /* You'd add these custom styles to your tailwind.config.js extends section for shadows. */
  /* Example tailwind.config.js snippet: */
  /*
  module.exports = {
    theme: {
      extend: {
        colors: {
          'lime-100': '#f0fff0',
          'emerald-900': '#1a5f4a',
          'emerald-700': '#047857',
          'emerald-800': '#065f46',
          'lime-200': '#d9f99d',
          'lime-300': '#bef264',
          'emerald-500': '#10b981',
        },
        boxShadow: {
          'neumorphic-light': '6px 6px 12px #9acd32, -6px -6px 12px #e0ffe0',
          'neumorphic-dark': '6px 6px 12px #104e3b, -6px -6px 12px #268a6f',
          'neumorphic-inner-light': 'inset 3px 3px 6px #9acd32, inset -3px -3px 6px #e0ffe0',
          'neumorphic-inner-dark': 'inset 3px 3px 6px #104e3b, inset -3px -3px 6px #268a6f',
          'neumorphic-outer-light': '6px 6px 12px #9acd32, -6px -6px 12px #e0ffe0',
          'neumorphic-outer-dark': '6px 6px 12px #104e3b, -6px -6px 12px #268a6f',
        }
      }
    },
    plugins: [],
  }
  */
</style>