Tabs

<x-aura::tab active="overview">
    <x-aura::tab.tab name="overview">
        Overview
    </x-aura::tab.tab>

    <x-aura::tab.tab name="analytics">
        Analytics
    </x-aura::tab.tab>

    <x-aura::tab.tab name="reports">
        Reports
    </x-aura::tab.tab>

    <x-aura::tab.tab name="settings">
        Settings
    </x-aura::tab.tab>
</x-aura::tab>

<x-aura::tab active="general">
    <x-aura::tab.tab name="general">
        <x-slot:icon>
            <x-aura::icon name="settings" size="xs" />
        </x-slot:icon>
        General
    </x-aura::tab.tab>

    <x-aura::tab.tab name="security">
        <x-slot:icon>
            <x-aura::icon name="shield" size="xs" />
        </x-slot:icon>
        Security
    </x-aura::tab.tab>

    <x-aura::tab.tab name="billing">
        <x-slot:icon>
            <x-aura::icon name="credit-card" size="xs" />
        </x-slot:icon>
        Billing
    </x-aura::tab.tab>
</x-aura::tab>

<x-aura::card size="2xl" padding="xl" gap="6">
    <x-aura::heading level="2" size="lg">
        Project Workspace Settings
    </x-aura::heading>

    <x-aura::tab active="general">
        <x-aura::tab.tab name="general">
            General
        </x-aura::tab.tab>

        <x-aura::tab.tab name="collaborators">
            Collaborators
        </x-aura::tab.tab>

        <x-aura::tab.tab name="integrations">
            Integrations
        </x-aura::tab.tab>
    </x-aura::tab>
</x-aura::card>