Tabs components

Use these responsive tabs components to create a secondary navigational hierarchy for your website or toggle content inside a container.

Default tabs
Use the following default tabs component example to show a list of links that the user can navigate from on your website. 
 <ul class="nav nav-tabs">
    <li class="nav-item">
        <a href="#" class="nav-link active">Profile</a>
    </li>
    <li class="nav-item">
        <a href="#" class="nav-link">Dashboard</a>
    </li>
    <li class="nav-item">
        <a href="#" class="nav-link">Settings</a>
    </li>
    <li class="nav-item">
        <a href="#" class="nav-link">Contacts</a>
    </li>
    <li class="nav-item">
        <a href="#" class="nav-link disabled">Disabled</a>
    </li>
</ul>
Tabs with underline
Use this alternative tabs component style with an underline instead of a background when hovering and being active on a certain page.
To use underlined tabs, you just have to add a .underlined claass to your .nav-link item like the example below: 
 <ul class="nav nav-tabs">
    <li class="nav-item">
        <a href="#" class="nav-link underlined">Profile</a>
    </li>
    <li class="nav-item">
        <a href="#" class="nav-link underlined">Dashboard</a>
    </li>
    <li class="nav-item">
        <a href="#" class="nav-link underlined active">Settings</a>
    </li>
    <li class="nav-item">
        <a href="#" class="nav-link underlined">Contacts</a>
    </li>
    <li class="nav-item">
        <a href="#" class="nav-link underlined disabled">Disabled</a>
    </li>
</ul>
Tabs with icons
this is just an example of the underlined tab which also included ionic icons.
You can also use your beloved icon font or even SVG. 
 <ul class="nav nav-tabs">
    <li class="nav-item">
        <a href="#" class="nav-link underlined">
            <ion-icon name="person-outline"></ion-icon>
            Profile
        </a>
    </li>
    <li class="nav-item">
        <a href="#" class="nav-link underlined">
            <ion-icon name="planet-outline"></ion-icon>
            Dashboard
        </a>
    </li>
    <li class="nav-item">
        <a href="#" class="nav-link underlined active">
            <ion-icon name="settings-outline"></ion-icon>
            Settings
        </a>
    </li>
    <li class="nav-item">
        <a href="#" class="nav-link underlined">
            <ion-icon name="people-outline"></ion-icon>
            Contacts
        </a>
    </li>
    <li class="nav-item">
        <a href="#" class="nav-link underlined disabled">
            <ion-icon name="alert-circle-outline"></ion-icon>
            Disabled
        </a>
    </li>
</ul>
Pill tabs
Take that same HTML as basic navbar, but use .nav-pills instead: 
 <ul class="nav nav-pills">
    <li class="nav-item">
        <a href="#" class="nav-link active">Profile</a>
    </li>
    <li class="nav-item">
        <a href="#" class="nav-link">Dashboard</a>
    </li>
    <li class="nav-item">
        <a href="#" class="nav-link">Settings</a>
    </li>
    <li class="nav-item">
        <a href="#" class="nav-link">Contacts</a>
    </li>
    <li class="nav-item">
        <a href="#" class="nav-link disabled">Disabled</a>
    </li>
</ul>
Pill & full-width tabs
Again, take that same HTML from pill tabs and add .nav-fill to it. 
 <ul class="nav nav-pills">
    <li class="nav-item">
        <a href="#" class="nav-link active">Profile</a>
    </li>
    <li class="nav-item">
        <a href="#" class="nav-link">Dashboard</a>
    </li>
    <li class="nav-item">
        <a href="#" class="nav-link">Settings</a>
    </li>
    <li class="nav-item">
        <a href="#" class="nav-link">Contacts</a>
    </li>
    <li class="nav-item">
        <a href="#" class="nav-link disabled">Disabled</a>
    </li>
</ul>

Interactive tabs

Take any of the examples you see above and add the following AlpineJS codes to make fully interactive tabs.

This could be your dashboard.
Interactive tabs
This was just a basic example of creating interactive tabs using AlpineJS.
Note that you can make this more advanced by using Alpine transitions. 
 <div x-data="{tab: 'help'}" class="card">
    <ul class="nav nav-tabs mb-4">
        <li @click="tab = 'dashboard'" class="nav-item">
            <button class="nav-link underlined" :class="tab == 'dashboard' ? 'active' : ''">Dashboard</button>
        </li>
        <li @click="tab = 'settings'" class="nav-item">
            <button class="nav-link underlined" :class="tab == 'settings' ? 'active' : ''">Settings</button>
        </li>
        <li @click="tab = 'help'" class="nav-item">
            <button class="nav-link underlined" :class="tab == 'help' ? 'active' : ''">More help</button>
        </li>
    </ul>
    
    <div x-show="tab == 'dashboard'" class="card-body"> ... </div>
    <div x-show="tab == 'settings'" class="card-body"> ... </div>
    <div x-show="tab == 'help'" class="card-body"> ... </div>
</div>