Application Breadcrumbs Slash divider

<nav aria-label="Breadcrumb">
      <ol class="flex items-center gap-1 text-sm text-gray-700">
        <li>
          <a href="#" class="block transition-colors hover:text-gray-900"> Home </a>
        </li>

        <li class="rtl:rotate-180">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            fill="none"
            viewBox="0 0 24 24"
            stroke-width="1.5"
            stroke="currentColor"
            class="size-4"
          >
            <path stroke-linecap="round" stroke-linejoin="round" d="m9 20.247 6-16.5" />
          </svg>
        </li>

        <li>
          <a href="#" class="block transition-colors hover:text-gray-900"> Category </a>
        </li>

        <li class="rtl:rotate-180">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            fill="none"
            viewBox="0 0 24 24"
            stroke-width="1.5"
            stroke="currentColor"
            class="size-4"
          >
            <path stroke-linecap="round" stroke-linejoin="round" d="m9 20.247 6-16.5" />
          </svg>
        </li>

        <li>
          <a href="#" class="block transition-colors hover:text-gray-900"> Product </a>
        </li>
      </ol>
    </nav>