<ul class="flex gap-1 items-center">
  <li><a href="index.html">Home </a></li>
  <li>/</li>
  <li><a href="#">Components </a></li>
  <li>/</li>
  <li><span class="text-primary-300 font-medium"> Breadcrumbs </span></li>
</ul>
                  

<ul class="flex flex-wrap gap-1 items-center">
  <li>
    <a class="flex items-center gap-2" href="index.html"> <i class="las la-home text-2xl shrink-0"></i> <span>Home</span></a>
  </li>
  <li>/</li>
  <li>
    <a class="flex items-center gap-2" href="#"> <i class="las la-layer-group text-2xl shrink-0"></i> <span>Components</span></a>
  </li>
  <li>/</li>
  <li>
    <span class="text-primary-300 flex items-center gap-2 font-medium"> <i class="las la-bell text-2xl shrink-0"></i> <span>Breadcrumbs</span></span>
  </li>
</ul>
                  

<ul class="flex flex-wrap gap-2 items-center">
  <li>
    <a class="flex items-center gap-2" href="index.html"> <i class="las la-home text-2xl shrink-0"></i> <span>Home</span></a>
  </li>
  <li class="text-sm text-neutral-100">•</li>
  <li>
    <a class="flex items-center gap-2" href="#"> <i class="las la-layer-group text-2xl shrink-0"></i> <span>Link 1</span></a>
  </li>
  <li class="text-sm text-neutral-100">•</li>
  <li>
    <a class="flex items-center gap-2" href="#"> <i class="las la-layer-group text-2xl shrink-0"></i> <span>Link 2</span></a>
  </li>
  <li class="text-sm text-neutral-100">•</li>
  <li>
    <a class="flex items-center gap-2" href="#"> <i class="las la-layer-group text-2xl shrink-0"></i> <span>Link 3</span></a>
  </li>
  <li class="text-sm text-neutral-100">•</li>
  <li>
    <span class="flex items-center gap-2 text-primary-300 font-medium"> <i class="las la-layer-group text-2xl shrink-0"></i> <span>Link 4</span></span>
  </li>
</ul>
                  

<div class="flex flex-wrap gap-4 justify-between items-center">
  <ul class="flex flex-wrap gap-2 items-center">
    <li>
      <a class="flex items-center gap-2" href="index.html"> <i class="las la-home text-2xl shrink-0"></i> <span>Home</span></a>
    </li>
    <li class="text-sm text-neutral-100">•</li>
    <li>
      <a class="flex items-center gap-2" href="#"> <i class="las la-layer-group text-2xl shrink-0"></i> <span>Link 1</span></a>
    </li>
    <li class="text-sm text-neutral-100">•</li>
    <li>
      <a class="flex items-center gap-2" href="#"> <i class="las la-layer-group text-2xl shrink-0"></i> <span>Link 2</span></a>
    </li>
    <li class="text-sm text-neutral-100">•</li>
    <li>
      <a class="flex items-center gap-2" href="#"> <i class="las la-layer-group text-2xl shrink-0"></i> <span>Link 3</span></a>
    </li>
    <li class="text-sm text-neutral-100">•</li>
    <li>
      <span class="flex items-center gap-2 text-primary-300 font-medium"> <i class="las la-layer-group text-2xl shrink-0"></i> <span>Link 4</span></span>
    </li>
  </ul>
  <button class="btn-primary">
    <i class="las la-plus-circle text-lg"></i>
    <span>Add New</span>
  </button>
</div>