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

14.8k

9

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

11.6k
Tab navigation buttons

Author:
Simon Scheffer

2 years ago

14.9k
Working tabs switch

Author:
Fagundo67

1 year ago

13.1k
Switch tabs button

Author:
gmer33

1 year ago

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

Author:
Prajwal Hallale

1 year ago

7.1k
Navigation multimenu
navigation menu, multimenu

Author:
Anonymous

1 year ago

9.5k
Icon group

Author:
Conan Hilton

1 year ago

8.9k
cards
cards with background animation

Author:
Anonymous

1 year ago

9.6k
Navbar compoent

Author:
Amit Pachange

1 year ago

13.3k
Button Group

Author:
Prem..

2 years ago

8.6k
Tab Menu
Tab menu

Author:
Samuel Abera

8 months ago

4.3k
Steps for complex forms

Author:
Ron Hicks

2 years ago

9.9k
boxed layout
boxed layout- navigaiton

Author:
Anonymous

1 year ago

7.7k

Explore components by Tags

Didn't find component you were looking for?

Search from 1800+ 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

© 2024 TailwindFlex. All Rights Reserved.

v1.9