Breadcrumbs Basic

                    <div class="p-4 bg-white rounded-lg shadow-sm max-w-4xl mx-auto">
  <nav class="flex" aria-label="Breadcrumb">
    <ol class="flex items-center space-x-1 text-sm text-gray-500">
      <li>
        <a href="#" class="hover:text-blue-600 transition-colors duration-200">
          Home
        </a>
      </li>
      <li class="flex items-center">
        <svg class="w-5 h-5 text-gray-400" 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="hover:text-blue-600 transition-colors duration-200 ml-1">
          Documents
        </a>
      </li>
      <li class="flex items-center">
        <svg class="w-5 h-5 text-gray-400" 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="ml-1 text-gray-700 font-medium">
          Add Document
        </span>
      </li>
    </ol>
  </nav>
</div>