Home
Mr Robot
Tab navigation with alpine JS

Tab navigation with alpine JS

This tailwind example is contributed by Mr Robot, on 15-Aug-2022. Component is made with Tailwind CSS v3. It is responsive.

Tabs Navigations

Author Mr Robot

16.4k

11

Fork Fullscreen

<script src="//unpkg.com/alpinejs"></script>
<div x-data="{ 
            openTab: 1,
            activeClasses: 'border-l border-t border-r rounded-t text-blue-700',
            inactiveClasses: 'text-blue-500 hover:text-blue-700'
        }" class="p-6">
    <ul class="flex border-b">
        <li @click="openTab = 1" :class="{ '-mb-px': openTab === 1 }" class="-mb-px mr-1">
            <a href="#" :class="openTab === 1 ? activeClasses : inactiveClasses"
                class="bg-white inline-block py-2 px-4 font-semibold">
                Active
            </a>
        </li>
        <li @click="openTab = 2" :class="{ '-mb-px': openTab === 2 }" class="mr-1">
            
            <a href="#" :class="openTab === 2 ? activeClasses : inactiveClasses"
                class="bg-white inline-block py-2 px-4 font-semibold">
                Tab
            </a>
        </li>
        <li @click="openTab = 3" :class="{ '-mb-px': openTab === 3 }" class="mr-1">
            <a href="#" :class="openTab === 3 ? activeClasses : inactiveClasses"
                class="bg-white inline-block py-2 px-4 font-semibold">
                Tab
            </a>
        </li>
    </ul>
    <div class="w-full">
        <div x-show="openTab === 1">Tab #1</div>
        <div x-show="openTab === 2">Tab #2</div>
        <div x-show="openTab === 3">Tab #3</div>
    </div>
</div>

Related Examples

Tabs section

Author:
Simon Scheffer

2 years ago

12.9k
Tab navigation buttons

Author:
Simon Scheffer

2 years ago

16.8k
Working tabs switch

Author:
Fagundo67

2 years ago

14.4k
Switch tabs button

Author:
gmer33

2 years ago

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

Author:
Prajwal Hallale

1 year ago

7.5k
Navigation multimenu
navigation menu, multimenu

Author:
Anonymous

1 year ago

10.9k
Icon group

Author:
Conan Hilton

2 years ago

9.4k
cards
cards with background animation

Author:
Anonymous

1 year ago

10.6k
Navbar compoent

Author:
Amit Pachange

2 years ago

15.1k
Button Group

Author:
Prem..

2 years ago

9.2k
Tab Menu
Tab menu

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

1 year ago

5.5k
Steps for complex forms

Author:
Ron Hicks

2 years ago

10.8k
boxed layout
boxed layout- navigaiton

Author:
Anonymous

1 year ago

8.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