breadcrumbs

<section>
  <div
    class="items-center px-8 py-12 mx-auto max-w-7xl lg:px-16 md:px-12 lg:py-24"
  >
    <div class="justify-center w-full mx-auto">
      <nav aria-label="Breadcrumb">
        <ol role="list" class="flex items-center space-x-2">
          <li>
            <a
              href="#_"
              class="text-sm flex items-center gap-2 font-medium text-gray-500 duration-200 hover:text-blue-600"
              aria-current="false"
            >
              <svg
                aria-hidden="true"
                xmlns="http://www.w3.org/2000/svg"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                stroke-width="2"
                stroke-linecap="round"
                stroke-linejoin="round"
                class="icon icon-tabler size-5 icons-tabler-outline icon-tabler-home"
              >
                <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                <path d="M5 12l-2 0l9 -9l9 9l-2 0"></path>
                <path d="M5 12v7a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-7"></path>
                <path d="M9 21v-6a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v6"></path></svg
              ><span>Home</span>
              <svg
                xmlns="http://www.w3.org/2000/svg"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                stroke-width="2"
                stroke-linecap="round"
                stroke-linejoin="round"
                class="icon size-4 icon-tabler icons-tabler-outline icon-tabler-chevron-right"
              >
                <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                <path d="M9 6l6 6l-6 6"></path>
              </svg>
            </a>
          </li>
          <a
            href="#_"
            class="text-sm flex items-center gap-2 font-medium text-gray-500 duration-200 hover:text-blue-600"
            aria-current="false"
          ></a>
          <li>
            <a
              href="#_"
              class="text-sm flex items-center gap-2 font-medium text-gray-500 duration-200 hover:text-blue-600"
              aria-current="false"
            ></a
            ><a
              href="#_"
              class="text-sm flex items-center gap-2 font-medium text-gray-500 duration-200 hover:text-blue-600"
              aria-current="false"
              >Work
              <svg
                xmlns="http://www.w3.org/2000/svg"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                stroke-width="2"
                stroke-linecap="round"
                stroke-linejoin="round"
                class="icon size-4 icon-tabler icons-tabler-outline icon-tabler-chevron-right"
              >
                <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                <path d="M9 6l6 6l-6 6"></path>
              </svg>
            </a>
          </li>
          <a
            href="#_"
            class="text-sm flex items-center gap-2 font-medium text-gray-500 duration-200 hover:text-blue-600"
            aria-current="false"
          ></a>
          <li>
            <a
              href="#_"
              class="text-sm flex items-center gap-2 font-medium text-gray-500 duration-200 hover:text-blue-600"
              aria-current="false"
            ></a
            ><a
              href="#_"
              class="text-sm font-medium text-blue-500 hover:text-blue-600"
              aria-current="page"
              >Oxbow UI</a
            >
          </li>
        </ol>
      </nav>
    </div>
  </div>
</section>