Tab navigation buttons

This tailwind example is contributed by Simon Scheffer, on 20-Dec-2022. Component is made with Tailwind v3.4. It is responsive.

Tabs Button Group

Author Simon Scheffer

Tailwind v3.4 18.2k 15

Fork Fullscreen

<div class="flex w-full md:max-w-xl mx-4 rounded shadow">
    <a href="#" aria-current="false"
        class="w-full flex justify-center font-medium rounded-l px-5 py-2 border bg-white text-gray-800 border-gray-200 hover:bg-gray-100">
        Recent
    </a>

<a href="#" aria-current="page"
        class="w-full flex justify-center font-medium px-5 py-2 border-t border-b bg-gray-900 text-white  border-gray-900 hover:bg-gray-800">
        Popular
    </a>

<a href="#" aria-current="false"
        class="w-full flex items-center gap-x-2 justify-center font-medium rounded-r px-5 py-2 border bg-white text-gray-800 border-gray-200 hover:bg-gray-100">
        Trending
        <svg class="w-5 h-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
            stroke="currentColor" aria-hidden="true">
            <path stroke-linecap="round" stroke-linejoin="round"
                d="M15.362 5.214A8.252 8.252 0 0112 21 8.25 8.25 0 016.038 7.048 8.287 8.287 0 009 9.6a8.983 8.983 0 013.361-6.867 8.21 8.21 0 003 2.48z">
            </path>
            <path stroke-linecap="round" stroke-linejoin="round"
                d="M12 18a3.75 3.75 0 00.495-7.467 5.99 5.99 0 00-1.925 3.546 5.974 5.974 0 01-2.133-1A3.75 3.75 0 0012 18z">
            </path>
        </svg>
    </a>
</div>