Working tabs switch

This tailwind example is contributed by Fagundo67, on 27-Feb-2023. Component is made with Tailwind v3.4. It is responsive.

Tabs

Author Fagundo67

Tailwind v3.4 15.7k 13

Fork Fullscreen

<div class="w-full max-w-md mx-auto">
    <div class="flex border-b border-gray-300">
        <button
            class="w-1/2 py-4 text-center font-medium text-gray-700 bg-gray-100 rounded-tl-lg focus:outline-none active:bg-gray-200"
            onclick="openTab(event, 'tab1')">Tab 1</button>
        <button class="w-1/2 py-4 text-center font-medium text-gray-700 bg-gray-100 rounded-tr-lg focus:outline-none"
            onclick="openTab(event, 'tab2')">Tab 2</button>
    </div>
    <div id="tab1" class="tabcontent p-4">
        <h2 class="text-lg font-bold text-gray-800">Tab 1 Content</h2>
        <p class="mt-2 text-gray-700">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam vel enim euismod,
            imperdiet felis vel, ultrices risus. Sed nec quam id elit fringilla blandit a a risus.</p>
    </div>
    <div id="tab2" class="tabcontent p-4 hidden">
        <h2 class="text-lg font-bold text-gray-800">Tab 2 Content</h2>
        <p class="mt-2 text-gray-700">Duis lobortis velit tellus, eget luctus tellus facilisis eget. Maecenas non massa
            varius, molestie lorem eget, molestie nisi. Suspendisse potenti.</p>
    </div>
</div>

Related Examples

Tab navigation with alpine JS

Mr Robot

4 years ago

18k
Tab Switch
tab-switching example with tailwind and vanilla JS

Prajwal Hallale

3 years ago

7.9k
Tab navigation buttons

Simon Scheffer

3 years ago

18.2k
Tabs section

Simon Scheffer

3 years ago

14.7k
Switch tabs button

gmer33

3 years ago

17.2k
Icon group

Conan Hilton

3 years ago

10.3k
Tab Menu
Tab menu

$$@(\/)(\/)¥$ $@(\/)(\/)¥

2 years ago

7.1k
Tabs - Htmlwind
Tabs with underline

Htmlwind

1 year ago

1.5k
Order Management Data Table
A responsive order management table built with Tailwind CSS and DataTables. It includes a navigation bar, sortable data table, order progress indicators, file upload controls, and a footer. The component is suitable for admin dashboards, production workflows, and project tracking interfaces. Tags: Table, Data Table, Dashboard, Admin Panel, File Upload, Progress Bar, Responsive, Tailwind CSS

Alla Telegina

4 weeks ago

37
Rwanda-Canada Transport Services | Safe & Reliable Shipping
Attractive color scheme inspired by Rwanda's landscapes

Code Master(Mfuranziza Dusabe Hamza)

1 year ago

1.1k
Adminpanel
Three tabs, switch between each other, change color when clicked. Tables with filter, search, with a drop-down form to fill.

Alla Telegina

1 year ago

2k
Basic Tabs
Trying to simplify tabs while making them accessible and responsive.

Sherry Lynne

1 month ago

249