Breadcrumbs Responsive

                    <div class="p-4 bg-white rounded-lg shadow-sm max-w-4xl mx-auto">
  <div class="breadcrumbs text-sm">
    <ul class="flex flex-wrap items-center">
      <!-- 移动设备只显示最后两级 -->
      <li class="hidden sm:flex items-center">
        <a href="#" class="text-gray-600 hover:text-blue-600 transition-colors">
          <span class="hidden md:inline">Home</span>
          <span class="md:hidden">H</span>
        </a>
        <span class="mx-2 text-gray-400">/</span>
      </li>
      <li class="hidden sm:flex items-center">
        <a href="#" class="text-gray-600 hover:text-blue-600 transition-colors">
          <span class="hidden md:inline">Documentation</span>
          <span class="md:hidden">Docs</span>
        </a>
        <span class="mx-2 text-gray-400">/</span>
      </li>
      <li class="hidden md:flex items-center">
        <a href="#" class="text-gray-600 hover:text-blue-600 transition-colors">Components</a>
        <span class="mx-2 text-gray-400">/</span>
      </li>
      <li class="flex items-center">
        <a href="#" class="text-gray-600 hover:text-blue-600 transition-colors">Navigation</a>
        <span class="mx-2 text-gray-400">/</span>
      </li>
      <li class="text-gray-800 font-medium">Breadcrumbs</li>
    </ul>
  </div>
</div>