Section Headers

<section class="mx-auto max-w-7xl px-4">
  <div
    class="flex flex-col justify-between space-y-4 border-b border-gray-200 py-6 md:flex-row md:items-center md:space-x-10 md:space-y-0">
    <div class="max-w-lg space-y-0.5">
      <h2 class="text-sm font-medium text-gray-900">Your Bookmark Folders</h2>
      <p class="text-sm text-gray-500">You can organize your bookmarks into folders to help you find them easier.</p>
    </div>
    <div class="flex items-center space-x-2 md:flex-row-reverse md:space-x-reverse">
      <button
        type="button"
        class="inline-flex w-auto shrink-0 cursor-pointer select-none appearance-none items-center justify-center space-x-2 rounded border border-blue-700 bg-blue-700 px-3 py-2 text-sm font-medium text-white transition hover:border-blue-800 hover:bg-blue-800 focus:border-blue-300 focus:outline-none focus:ring-2 focus:ring-blue-300">
        <svg class="h-5 w-5 shrink-0 stroke-white" viewBox="0 0 256 256">
          <path
            d="M216.9,208H39.4a7.4,7.4,0,0,1-7.4-7.4V80H216a8,8,0,0,1,8,8V200.9A7.1,7.1,0,0,1,216.9,208Z"
            fill="none"
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="24"></path>
          <path
            d="M32,80V52a8,8,0,0,1,8-8H92.4a8,8,0,0,1,6,2.7L128,80"
            fill="none"
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="24"></path>
          <line
            x1="104"
            y1="144"
            x2="152"
            y2="144"
            fill="none"
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="24"></line>
          <line
            x1="128"
            y1="120"
            x2="128"
            y2="168"
            fill="none"
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="24"></line>
        </svg>
        <span class="shrink-0">Add Folder</span>
      </button>
      <button
        type="button"
        class="inline-flex w-auto shrink-0 cursor-pointer select-none appearance-none items-center justify-center space-x-2 rounded border border-gray-200 bg-white px-3 py-2 text-sm font-medium text-gray-800 transition hover:border-gray-300 hover:bg-gray-100 focus:border-gray-300 focus:outline-none focus:ring-2 focus:ring-gray-300">
        <svg class="h-5 w-5 shrink-0 stroke-gray-800" viewBox="0 0 256 256">
          <path
            d="M32,208V64a8,8,0,0,1,8-8H93.3a8.1,8.1,0,0,1,4.8,1.6l27.8,20.8a8.1,8.1,0,0,0,4.8,1.6H200a8,8,0,0,1,8,8v24"
            fill="none"
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="24"></path>
          <path
            d="M32,208l30.1-86.6a8.2,8.2,0,0,1,7.6-5.4h159a8,8,0,0,1,7.6,10.6L208,208Z"
            fill="none"
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="24"></path>
        </svg>
        <span class="shrink-0">Manage Folders</span>
      </button>
    </div>
  </div>
</section>

<section class="mx-auto max-w-7xl px-4">
  <div class="border-b border-gray-200">
    <div class="max-w-lg space-y-0.5 py-6">
      <h2 class="text-sm font-medium text-gray-900">Your Bookmark Folders</h2>
      <p class="text-sm text-gray-500">You can organize your bookmarks into folders to help you find them easier.</p>
    </div>
  </div>
</section>