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>
Your Bookmark Folders
You can organize your bookmarks into folders to help you find them easier.
<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>
Your Bookmark Folders
You can organize your bookmarks into folders to help you find them easier.