Neumorphic 运动面包屑

<nav class="flex items-center justify-center p-4 bg-gradient-to-br from-emerald-50 to-teal-100 dark:from-gray-800 dark:to-gray-950 min-h-24 md:min-h-32 shadow-inner-neumorphic-light dark:shadow-inner-neumorphic-dark" aria-label="Breadcrumb">
  <ol class="flex flex-wrap items-center space-x-2 sm:space-x-4">
    <li>
      <a href="#" class="flex items-center text-emerald-700 dark:text-emerald-300 hover:text-emerald-900 dark:hover:text-emerald-100 transition-colors duration-300 focus:outline-none focus:ring-2 focus:ring-emerald-700 dark:focus:ring-emerald-300 rounded-full px-3 py-1 text-sm sm:text-base font-semibold shadow-outer-neumorphic-light dark:shadow-outer-neumorphic-dark active:shadow-inner-neumorphic-light dark:active:shadow-inner-neumorphic-dark">
        <svg class="w-4 h-4 mr-1 sm:mr-2" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M10.707 2.293a1 1 0 00-1.414 0l-7 7a1 1 0 001.414 1.414L4 10.414V17a1 1 0 001 1h2a1 1 0 001-1v-2a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 001 1h2a1 1 0 001-1v-6.586l.293.293a1 1 0 001.414-1.414l-7-7z"></path></svg>
        Home
      </a>
    </li>
    <li class="flex items-center">
      <svg class="flex-shrink-0 w-4 h-4 text-emerald-600 dark:text-emerald-400 mx-1 sm:mx-2" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"></path></svg>
      <a href="#" class="flex items-center text-emerald-700 dark:text-emerald-300 hover:text-emerald-900 dark:hover:text-emerald-100 transition-colors duration-300 focus:outline-none focus:ring-2 focus:ring-emerald-700 dark:focus:ring-emerald-300 rounded-full px-3 py-1 text-sm sm:text-base font-semibold shadow-outer-neumorphic-light dark:shadow-outer-neumorphic-dark active:shadow-inner-neumorphic-light dark:active:shadow-inner-neumorphic-dark group-hover:block">
        <img src="https://randomuser.me/api/portraits/men/52.jpg" alt="Team Avatar" class="w-5 h-5 sm:w-6 sm:h-6 rounded-full mr-1 object-cover shadow-md">
        Athletics
      </a>
    </li>
    <li class="flex items-center">
      <svg class="flex-shrink-0 w-4 h-4 text-emerald-600 dark:text-emerald-400 mx-1 sm:mx-2" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"></path></svg>
      <a href="#" class="flex items-center text-sapphire-700 dark:text-sapphire-300 hover:text-sapphire-900 dark:hover:text-sapphire-100 transition-colors duration-300 focus:outline-none focus:ring-2 focus:ring-sapphire-700 dark:focus:ring-sapphire-300 rounded-full px-3 py-1 text-sm sm:text-base font-semibold shadow-outer-neumorphic-light dark:shadow-outer-neumorphic-dark active:shadow-inner-neumorphic-light dark:active:shadow-inner-neumorphic-dark">
        <svg class="w-4 h-4 mr-1 sm:mr-2" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M9 6a3 3 0 11-6 0 3 3 0 016 0zM17.472 2.72L14.75 5.442S13.435 7.15 11.25 7.203c-2.185.053-4.22-.924-4.22-.924S5.105 5.56 5.105 5.56L2.38 2.76A1 1 0 00.91 3.94l2.72 2.72c.983.983 2.87.983 2.87.983s-1.84.455-2.61.026a1 1 0 00-1.378 1.464l.6.6a1 1 0 001.4-.04c.77-.43 2.76 1.48 2.76 1.48s1.603 1.15 2.8 1.15c.57 0 1.1-.115 1.57-.31L16.06 17.5a1 1 0 001.41-1.41L11.53 10.74c.2-.47.31-1 .31-1.57 0-1.2-.4-2.22-1.15-2.8l1.48-1.48c.04.04.08.08.12.11l2.76 2.76a1 1 0 001.41-1.41l-2.72-2.72c-.983-.983-.983-2.87-.983-2.87s.455 1.84.026 2.61a1 1 0 001.464 1.378l.6-.6a1 1 0 00-.04-1.4C16.92 4.69 17.472 2.72 17.472 2.72zM15 6a3 3 0 11-6 0 3 3 0 016 0z"></path></svg>
        Teams
      </a>
    </li>
    <li class="flex items-center">
      <svg class="flex-shrink-0 w-4 h-4 text-sapphire-600 dark:text-sapphire-400 mx-1 sm:mx-2" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"></path></svg>
      <span class="flex items-center text-ruby-700 dark:text-ruby-300 px-3 py-1 text-sm sm:text-base font-bold cursor-default shadow-inner-neumorphic-light dark:shadow-inner-neumorphic-dark rounded-full">
        <img src="https://picsum.photos/id/1018/25/25" alt="Team Logo" class="w-5 h-5 sm:w-6 sm:h-6 rounded-full mr-1 object-cover shadow-md">
        Griffins Squad
      </span>
    </li>
  </ol>
</nav>

<style>
  /* Base light mode shadows */
  .shadow-inner-neumorphic-light {
    box-shadow: inset 5px 5px 10px #bfd6d0, inset -5px -5px 10px #ffffff;
  }

  .shadow-outer-neumorphic-light {
    box-shadow: 5px 5px 10px #bfd6d0, -5px -5px 10px #ffffff;
  }

  /* Base dark mode shadows */
  .dark .shadow-inner-neumorphic-dark {
    box-shadow: inset 5px 5px 10px #1a202c, inset -5px -5px 10px #4a5568;
  }

  .dark .shadow-outer-neumorphic-dark {
    box-shadow: 5px 5px 10px #1a202c, -5px -5px 10px #4a5568;
  }

  /* Jewel Tone Theme Colors (Examples - extend as needed in tailwind.config.js) */
  .text-emerald-700 { color: #047857; }
  .dark .text-emerald-300 { color: #6ee7b7; }
  .hover\:text-emerald-900:hover { color: #064e3b; }
  .dark .hover\:text-emerald-100:hover { color: #ecfdf5; }

  .focus\:ring-emerald-700:focus { --tw-ring-color: #047857; }
  .dark .focus\:ring-emerald-300:focus { --tw-ring-color: #6ee7b7; }

  .text-emerald-600 { color: #059669; }
  .dark .text-emerald-400 { color: #34d399; }

  .text-sapphire-700 { color: #1d4ed8; }
  .dark .text-sapphire-300 { color: #93c5fd; }
  .hover\:text-sapphire-900:hover { color: #1e3a8a; }
  .dark .hover\:text-sapphire-100:hover { color: #eff6ff; }

  .focus\:ring-sapphire-700:focus { --tw-ring-color: #1d4ed8; }
  .dark .focus\:ring-sapphire-300:focus { --tw-ring-color: #93c5fd; }

  .text-sapphire-600 { color: #2563eb; }
  .dark .text-sapphire-400 { color: #60a5fa; }

  .text-ruby-700 { color: #b91c1c; }
  .dark .text-ruby-300 { color: #fca5a5; }

  /* Background gradient Adjustments */
  .from-emerald-50 { background-image: linear-gradient(to bottom right, #effdf5, var(--tw-gradient-to, #d1fae5)); /* Tailwind default */}
  .to-teal-100 { background-image: linear-gradient(to bottom right, var(--tw-gradient-from, #f0fdf4), #ccfbf1); /* Tailwind default */}

  .dark .from-gray-800 { background-image: linear-gradient(to bottom right, #2d3748, var(--tw-gradient-to, #2c313a)); /* Tailwind default */}
  .dark .to-gray-950 { background-image: linear-gradient(to bottom right, var(--tw-gradient-from, #1a202c), #0f172a); /* Tailwind default */}

  /* Note: For full control and proper dark mode color overriding, define custom color palettes in tailwind.config.js */
  /* Example tailwind.config.js extension */
  /*
  module.exports = {
    darkMode: 'class',
    theme: {
      extend: {
        colors: {
          emerald: {
            50: '#effdf5',
            100: '#d1fae5',
            300: '#6ee7b7',
            400: '#34d399',
            600: '#059669',
            700: '#047857',
            800: '#065f46',
            900: '#064e3b'
          },
          sapphire: {
            50: '#eff6ff',
            100: '#dbeafe',
            300: '#93c5fd',
            400: '#60a5fa',
            600: '#2563eb',
            700: '#1d4ed8',
            800: '#1e40af',
            900: '#1e3a8a'
          },
          ruby: {
            50: '#fef2f2',
            100: '#fee2e2',
            300: '#fca5a5',
            400: '#ef4444',
            600: '#dc2626',
            700: '#b91c1c',
            800: '#991b1b',
            900: '#7f1d1d'
          }
        },
        boxShadow: {
          'inner-neumorphic-light': 'inset 5px 5px 10px #bfd6d0, inset -5px -5px 10px #ffffff',
          'outer-neumorphic-light': '5px 5px 10px #bfd6d0, -5px -5px 10px #ffffff',
          'inner-neumorphic-dark': 'inset 5px 5px 10px #1a202c, inset -5px -5px 10px #4a5568',
          'outer-neumorphic-dark': '5px 5px 10px #1a202c, -5px -5px 10px #4a5568'
        }
      }
    }
  }
  */
</style>