Button Groups
<div class="relative z-0 flex -space-x-px">
<button
type="button"
class="inline-flex w-auto cursor-pointer select-none appearance-none items-center justify-center rounded-l border border-gray-200 bg-white px-3 py-2 text-xs font-medium text-gray-800 transition hover:border-gray-300 hover:bg-gray-100 focus:z-10 focus:border-gray-300 focus:outline-none focus:ring-2 focus:ring-gray-300">
Prev
</button>
<button
type="button"
class="inline-flex w-auto cursor-pointer select-none appearance-none items-center justify-center rounded-r border border-gray-200 bg-white px-3 py-2 text-xs font-medium text-gray-800 transition hover:border-gray-300 hover:bg-gray-100 focus:z-10 focus:border-gray-300 focus:outline-none focus:ring-2 focus:ring-gray-300">
Next
</button>
</div>
<div class="relative z-0 flex -space-x-px">
<button
type="button"
class="inline-flex w-auto cursor-pointer select-none appearance-none items-center justify-center rounded-l border border-gray-200 bg-white px-3 py-2 text-xs font-medium text-gray-800 transition hover:border-gray-300 hover:bg-gray-100 focus:z-10 focus:border-gray-300 focus:outline-none focus:ring-2 focus:ring-gray-300">
Prev
</button>
<button
type="button"
class="inline-flex w-auto cursor-pointer select-none appearance-none items-center justify-center border border-gray-200 bg-white px-3 py-2 text-xs font-medium text-gray-800 transition hover:border-gray-300 hover:bg-gray-100 focus:z-10 focus:border-gray-300 focus:outline-none focus:ring-2 focus:ring-gray-300">
Now
</button>
<button
type="button"
class="inline-flex w-auto cursor-pointer select-none appearance-none items-center justify-center rounded-r border border-gray-200 bg-white px-3 py-2 text-xs font-medium text-gray-800 transition hover:border-gray-300 hover:bg-gray-100 focus:z-10 focus:border-gray-300 focus:outline-none focus:ring-2 focus:ring-gray-300">
Next
</button>
</div>
<div class="flex space-x-2">
<button
type="button"
class="inline-flex w-auto cursor-pointer select-none appearance-none items-center justify-center space-x-1 rounded border border-gray-200 bg-white px-3 py-2 text-xs 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">
<span>Type</span>
<svg class="h-3 w-3 stroke-gray-400" viewBox="0 0 256 256">
<polyline
points="208 96 128 176 48 96"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="32"></polyline>
</svg>
</button>
<button
type="button"
class="inline-flex w-auto cursor-pointer select-none appearance-none items-center justify-center space-x-1 rounded border border-gray-200 bg-white px-3 py-2 text-xs 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">
<span>Language</span>
<svg class="h-3 w-3 stroke-gray-400" viewBox="0 0 256 256">
<polyline
points="208 96 128 176 48 96"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="32"></polyline>
</svg>
</button>
<button
type="button"
class="inline-flex w-auto cursor-pointer select-none appearance-none items-center justify-center space-x-1 rounded border border-gray-200 bg-white px-3 py-2 text-xs 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">
<span>Sort</span>
<svg class="h-3 w-3 stroke-gray-400" viewBox="0 0 256 256">
<polyline
points="208 96 128 176 48 96"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="32"></polyline>
</svg>
</button>
</div>
<div class="relative z-0 flex">
<button
type="button"
class="inline-flex w-auto cursor-pointer select-none appearance-none items-center justify-center rounded-l border border-blue-700 bg-blue-700 px-3 py-2 text-xs font-medium text-white transition hover:border-blue-800 hover:bg-blue-800 focus:z-10 focus:border-blue-300 focus:outline-none focus:ring-2 focus:ring-blue-300">
Save Task
</button>
<div aria-hidden="true" class="w-px bg-blue-800"></div>
<button
type="button"
class="inline-flex w-auto cursor-pointer select-none appearance-none items-center justify-center rounded-r border border-blue-700 bg-blue-700 px-2 py-2 text-xs font-medium text-white transition hover:border-blue-800 hover:bg-blue-800 focus:z-10 focus:border-blue-300 focus:outline-none focus:ring-2 focus:ring-blue-300">
<svg class="h-3 w-3 stroke-white" viewBox="0 0 256 256">
<polyline
points="208 96 128 176 48 96"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="28"></polyline>
</svg>
</button>
</div>
<div class="relative z-0 flex space-x-0.5 rounded border border-gray-200 p-0.5">
<button
type="button"
class="inline-flex w-auto cursor-pointer select-none appearance-none items-center justify-center 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-4 w-4 shrink-0" viewBox="0 0 256 256">
<polyline
points="160 208 80 128 160 48"
fill="none"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="24"></polyline>
</svg>
</button>
<button
type="button"
class="inline-flex w-auto cursor-pointer select-none appearance-none items-center justify-center rounded border border-white bg-white px-3 py-2 text-sm font-medium text-gray-800 transition hover:border-white hover:bg-gray-100 focus:z-10 focus:border-gray-300 focus:outline-none focus:ring-2 focus:ring-gray-300">
<svg class="h-4 w-4 shrink-0" viewBox="0 0 256 256">
<polyline
points="96 48 176 128 96 208"
fill="none"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="24"></polyline>
</svg>
</button>
</div>
<div class="relative z-0 flex space-x-0.5 rounded border border-gray-200 p-0.5">
<button
type="button"
class="inline-flex w-auto cursor-pointer select-none appearance-none items-center justify-center 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-4 w-4 shrink-0" viewBox="0 0 256 256">
<rect width="256" height="256" fill="none"></rect>
<line
x1="40"
y1="68"
x2="216"
y2="68"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="24"></line>
<line
x1="40"
y1="108"
x2="168"
y2="108"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="24"></line>
<line
x1="40"
y1="148"
x2="216"
y2="148"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="24"></line>
<line
x1="40"
y1="188"
x2="168"
y2="188"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="24"></line>
</svg>
</button>
<button
type="button"
class="inline-flex w-auto cursor-pointer select-none appearance-none items-center justify-center rounded border border-white bg-white px-3 py-2 text-sm font-medium text-gray-800 transition hover:border-white hover:bg-gray-100 focus:z-10 focus:border-gray-300 focus:outline-none focus:ring-2 focus:ring-gray-300">
<svg class="h-4 w-4 shrink-0" viewBox="0 0 256 256">
<line
x1="40"
y1="68"
x2="216"
y2="68"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="24"></line>
<line
x1="64"
y1="108"
x2="192"
y2="108"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="24"></line>
<line
x1="40"
y1="148"
x2="216"
y2="148"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="24"></line>
<line
x1="64"
y1="188"
x2="192"
y2="188"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="24"></line>
</svg>
</button>
<button
type="button"
class="inline-flex w-auto cursor-pointer select-none appearance-none items-center justify-center rounded border border-white bg-white px-3 py-2 text-sm font-medium text-gray-800 transition hover:border-white hover:bg-gray-100 focus:z-10 focus:border-gray-300 focus:outline-none focus:ring-2 focus:ring-gray-300">
<svg class="h-4 w-4 shrink-0" viewBox="0 0 256 256">
<line
x1="40"
y1="68"
x2="216"
y2="68"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="24"></line>
<line
x1="88"
y1="108"
x2="216"
y2="108"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="24"></line>
<line
x1="40"
y1="148"
x2="216"
y2="148"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="24"></line>
<line
x1="88"
y1="188"
x2="216"
y2="188"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="24"></line>
</svg>
</button>
</div>
<div class="relative z-0 flex -space-x-px">
<button
type="button"
class="inline-flex w-auto cursor-pointer select-none appearance-none items-center justify-center rounded-l 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:z-10 focus:border-gray-300 focus:outline-none focus:ring-2 focus:ring-gray-300">
<svg class="h-4 w-4 shrink-0" viewBox="0 0 256 256">
<polyline
points="160 208 80 128 160 48"
fill="none"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="24"></polyline>
</svg>
</button>
<button
type="button"
class="inline-flex w-auto cursor-pointer select-none appearance-none items-center justify-center rounded-r 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:z-10 focus:border-gray-300 focus:outline-none focus:ring-2 focus:ring-gray-300">
<svg class="h-4 w-4 shrink-0" viewBox="0 0 256 256">
<polyline
points="96 48 176 128 96 208"
fill="none"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="24"></polyline>
</svg>
</button>
</div>
<div class="relative z-0 flex -space-x-px">
<button
type="button"
class="inline-flex w-auto cursor-pointer select-none appearance-none items-center justify-center rounded-l 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:z-10 focus:border-gray-300 focus:outline-none focus:ring-2 focus:ring-gray-300">
<svg class="h-4 w-4 shrink-0" viewBox="0 0 256 256">
<rect width="256" height="256" fill="none"></rect>
<line
x1="40"
y1="68"
x2="216"
y2="68"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="24"></line>
<line
x1="40"
y1="108"
x2="168"
y2="108"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="24"></line>
<line
x1="40"
y1="148"
x2="216"
y2="148"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="24"></line>
<line
x1="40"
y1="188"
x2="168"
y2="188"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="24"></line>
</svg>
</button>
<button
type="button"
class="inline-flex w-auto cursor-pointer select-none appearance-none items-center justify-center 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:z-10 focus:border-gray-300 focus:outline-none focus:ring-2 focus:ring-gray-300">
<svg class="h-4 w-4 shrink-0" viewBox="0 0 256 256">
<line
x1="40"
y1="68"
x2="216"
y2="68"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="24"></line>
<line
x1="64"
y1="108"
x2="192"
y2="108"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="24"></line>
<line
x1="40"
y1="148"
x2="216"
y2="148"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="24"></line>
<line
x1="64"
y1="188"
x2="192"
y2="188"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="24"></line>
</svg>
</button>
<button
type="button"
class="inline-flex w-auto cursor-pointer select-none appearance-none items-center justify-center rounded-r 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:z-10 focus:border-gray-300 focus:outline-none focus:ring-2 focus:ring-gray-300">
<svg class="h-4 w-4 shrink-0" viewBox="0 0 256 256">
<line
x1="40"
y1="68"
x2="216"
y2="68"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="24"></line>
<line
x1="88"
y1="108"
x2="216"
y2="108"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="24"></line>
<line
x1="40"
y1="148"
x2="216"
y2="148"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="24"></line>
<line
x1="88"
y1="188"
x2="216"
y2="188"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="24"></line>
</svg>
</button>
</div>