Tailwind CSS Tab style example

tailwind

Here is an example of how you might create a tabbed interface using Tailwind CSS:


<div class="relative flex-grow rounded-md shadow-md">
    <div class="px-4 py-3 bg-white rounded-md shadow-xs sm:px-6">
        <div class="relative z-0 inline-flex shadow-sm">
            <button type="button"
                    class="relative inline-flex items-center px-4 py-2 -ml-px rounded-l-md border border-gray-300 bg-white text-sm leading-5 font-medium text-gray-500 hover:text-gray-700 hover:bg-gray-100 focus:outline-none focus:shadow-outline-blue focus:border-blue-300 active:bg-gray-100 active:text-gray-500 transition duration-150 ease-in-out"
                    aria-selected="true" aria-controls="panel-1" id="tab-1">
                Tab 1
            </button>
            <button type="button"
                    class="relative inline-flex items-center px-4 py-2 -ml-px border border-gray-300 bg-white text-sm leading-5 font-medium text-gray-500 hover:text-gray-700 hover:bg-gray-100 focus:outline-none focus:shadow-outline-blue focus:border-blue-300 active:bg-gray-100 active:text-gray-500 transition duration-150 ease-in-out"
                    aria-controls="panel-2" id="tab-2">
                Tab 2
            </button>
            <button type="button"
                    class="relative inline-flex items-center px-4 py-2 -ml-px rounded-r-md border border-gray-300 bg-white text-sm leading-5 font-medium text-gray-500 hover:text-gray-700 hover:bg-gray-100 focus:outline-none focus:shadow-outline-blue focus:border-blue-300 active:bg-gray-100 active:text-gray-500 transition duration-150 ease-in-out"
                    aria-controls="panel-3" id="tab-3">
                Tab 3
            </button>
        </div>
    </div>
    <div class="relative flex-auto bg-gray-50 px-4 py-3 sm:px-6" role="tabpanel" aria-labelledby="tab-1" id="panel-1">
        <p>Tab 1 content goes here</p>
    </div>
    <div class="hidden relative flex-auto bg-gray-50 px-4 py-3 sm:px-6" role="tabpanel" aria-labelledby="tab-2"
         id="panel-2">
        <p>Tab 2 content goes here</p>
    </div>
    <div class="hidden relative flex-auto bg-gray-50 px-4 py-3 sm:px-6" role="tabpanel" aria-labelledby="tab-3"
         id="panel-3">
        <p>Tab 3 content goes here</p>
    </div>
</div>

This will create a tabbed interface with three tabs (“Tab 1”, “Tab 2”, and “Tab 3”) and three corresponding panels of content.