Button Groups
Ready to use Tailwind CSS Button Group Components with production-ready, copy-paste HTML code. Use them as they are, or as a starting point to build beautiful websites.
Simple
Free
<span class="inline-flex -space-x-px rounded-lg shadow-sm">
<button type="button" class="rounded-l-lg bg-white px-4 py-2.5 text-sm font-semibold text-gray-900 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-10">Day</button>
<button type="button" class="bg-white px-4 py-2.5 text-sm font-semibold text-gray-900 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-10">Week</button>
<button type="button" class="bg-white px-4 py-2.5 text-sm font-semibold text-gray-900 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-10">Month</button>
<button type="button" class="rounded-r-lg bg-white px-4 py-2.5 text-sm font-semibold text-gray-900 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-10">Year</button>
</span>