Home
Fagundo67
Working tabs switch

Working tabs switch

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

Tabs

Author Fagundo67

14.6k

10

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>

<script>
    function openTab(evt, tabName) {
        var i, tabcontent, tablinks;
        tabcontent = document.getElementsByClassName("tabcontent");
        for (i = 0; i < tabcontent.length; i++) {
            tabcontent[i].classList.add("hidden");
        }
        tablinks = document.getElementsByTagName("button");
        for (i = 0; i < tablinks.length; i++) {
            tablinks[i].classList.remove("active:bg-gray-200");
        }
        document.getElementById(tabName).classList.remove("hidden");
        evt.currentTarget.classList.add("active:bg-gray-200");
    }
</script>

Related Examples

Tab navigation with alpine JS

Author:
Mr Robot

3 years ago

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

Author:
Prajwal Hallale

2 years ago

7.7k
Tab navigation buttons

Author:
Simon Scheffer

2 years ago

17.3k
Tabs section

Author:
Simon Scheffer

2 years ago

13.1k
Switch tabs button

Author:
gmer33

2 years ago

15.8k
Icon group

Author:
Conan Hilton

2 years ago

9.8k
Tab Menu
Tab menu

$$@(\/)(\/)¥$ Author:
$@(\/)(\/)¥

1 year ago

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

Author:
Code Master(Mfuranziza Dusabe Hamza)

3 months ago

217
cards
cards with background animation

Author:
Anonymous

2 years ago

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

Author:
Алла Телегина

7 months ago

1.3k
chat bar
live chat

Author:
gidy

4 months ago

592
cards
cards with background animation

Author:
Anonymous

1 year ago

2.7k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components

TailwindFlex.com

Tailwindflex.com is a free Tailwind CSS examples library. It's a one-stop destination for ready-made Tailwind CSS components and templates.

Contact

Email: admin@tailwindflex.com

Resources

Tailwind CSS Gradient Generator Free Bootstrap CSS Components Free CSS Components

© 2025 TailwindFlex. All Rights Reserved.

v1.1