Basic Dividers - Tailwind Component

<section class="mt-24 bg-white py-24">
  <h3 class="flex items-center my-8">
    <span aria-hidden="true" class="flex-grow bg-gray-200 rounded h-0.5"></span>
    <span class="mx-3 text-lg font-medium">Divider Heading</span>
    <span aria-hidden="true" class="flex-grow bg-gray-200 rounded h-0.5"></span>
  </h3>
  <h3 class="flex items-center my-8">
    <span aria-hidden="true" class="flex-grow bg-gray-200 rounded h-0.5"></span>
    <button type="button"
      class="px-4 py-1 text-sm font-medium text-center text-gray-900 bg-white border border-gray-200 rounded-md shadow-sm hover:bg-gray-50 focus:outline-black">
      Divider Button
    </button>
    <span aria-hidden="true" class="flex-grow bg-gray-200 rounded h-0.5"></span>
  </h3>
  <h3 class="flex items-center my-8">
    <span aria-hidden="true" class="flex-grow bg-gray-200 rounded h-0.5"></span>
    <span class="inline-block px-4 py-1 text-sm font-medium text-center text-gray-500 bg-gray-200 rounded-full">
      Divider Badge
    </span>
    <span aria-hidden="true" class="flex-grow bg-gray-200 rounded h-0.5"></span>
  </h3>
</section>
<style>
  @import url('https://fonts.googleapis.com/css2?family=Space+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap');

  body {
    font-family: 'Space Mono', monospace;
  }
</style>