Divider

<hr class="my-8 h-px border-0 bg-gray-300" />

<div
  class="my-8 flex items-center gap-4 before:h-px before:flex-1 before:bg-gray-300  before:content-[''] after:h-px after:flex-1 after:bg-gray-300  after:content-['']"
>
  More
</div>

<div class="my-8 flex items-center gap-4 after:h-px after:flex-1 after:bg-gray-300  after:content-['']">More</div>

<div class="my-8 flex items-center gap-4 before:h-px before:flex-1 before:bg-gray-300  before:content-['']">More</div>

<div
  class="fter:h-px my-8 flex items-center before:h-px before:flex-1  before:bg-gray-300 before:content-[''] after:h-px after:flex-1 after:bg-gray-300  after:content-['']"
>
  <button
    type="button"
    class="flex items-center rounded-full border border-gray-300 bg-secondary-50 px-3 py-2 text-center text-sm font-medium text-gray-900 hover:bg-gray-100"
  >
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="mr-1 h-4 w-4">
      <path
        fill-rule="evenodd"
        d="M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z"
        clip-rule="evenodd"
      />
    </svg>
    More button
  </button>
</div>

<hr class="mx-auto my-8 h-1 w-60 border-0 bg-gray-100" />