Breadcrumbs Max Width

                    <div class="p-4 bg-white rounded-lg shadow-sm max-w-4xl mx-auto">
  <div class="breadcrumbs max-w-xs overflow-x-auto text-sm">
    <ul class="flex items-center whitespace-nowrap">
      <li class="flex items-center">
        <a href="#" class="text-gray-600 hover:text-blue-600 transition-colors">Home</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">Documentation</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">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>
  <p class="text-xs text-gray-500 mt-2">Scroll to view content beyond the maximum width</p>
</div>