Tailwind CSS 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" />