Tailwind CSS Tab style example
tailwindHere 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.
Other Article on Tag tailwind
- - Tailwind add padding in t-head and body
- - Tailwind Breadcrumb style example
- - Tailwind button group style example
- - Tailwind button style example
- - Tailwind card component example
- - Tailwind create component in an Angular project
- - Tailwind CSS accordion style example
- - Tailwind CSS advantages and disadvantages
- - Tailwind CSS dropdown style example
- - Tailwind CSS install to angular