##### Recently Browses

- Apps Api
- Dashboard Marketing

##### Memebers

- Ethan Smith Backend Developer
- Isabella Garcia Digital Marketer
- Noah Walker Full Stack Developer

##### Filters

- customers:
  All customers list
- products:
  Bestselling products
- events:
  All upcoming events

## Tabbed content

1. Home
3. Components
5. Tabbed content

##### Card with tab

##### Card Title

##### $493,892

Revenue generated

##### 8948

Sales Done

##### $293,158

Profit earned

    <!--:Card:-->
    <div
        class="rounded-xl bg-white dark:bg-zinc-900 shadow-card mb-4">
        <div class="px-4 pt-4 flex items-center justify-between">
            <h5 class="text-lg">Card Title</h5>
            <!-- Nav tabs -->
            <div class="inline-flex items-center gap-1" id="myTab" role="tablist">
        <button
            class="flex items-center text-sm cursor-pointer px-2 py-1 rounded hover:bg-primary-subtle hover:text-primary active [.active]:bg-primary-subtle [.active]:text-primary"
            id="revenue-tab" data-bs-toggle="tab" data-bs-target="#revenue" type="button" role="tab" aria-controls="revenue"
            aria-selected="true">Revenue</button>
        <button
            class="flex items-center text-sm cursor-pointer px-2 py-1 rounded hover:bg-primary-subtle hover:text-primary [.active]:bg-primary-subtle [.active]:text-primary"
            id="sales-tab" data-bs-toggle="tab" data-bs-target="#sales" type="button" role="tab" aria-controls="sales"
            aria-selected="false">Sales</button>
        <button
            class="flex items-center text-sm cursor-pointer px-2 py-1 rounded hover:bg-primary-subtle hover:text-primary [.active]:bg-primary-subtle [.active]:text-primary"
            id="profit-tab" data-bs-toggle="tab" data-bs-target="#profit" type="button" role="tab" aria-controls="profit"
            aria-selected="false">Profit</button>
    </div>
        </div>
        <!-- Tab panes -->
        <div class="tab-content p-4">
            <div class="tab-pane fade show active" id="revenue" role="tabpanel" aria-labelledby="revenue-tab" tabindex="0">
                <h5 class="text-xl mb-1">$493,892</h5>
                Revenue generated
            </div>
            <div class="tab-pane fade" id="sales" role="tabpanel" aria-labelledby="sales-tab" tabindex="0">
                <h5 class="text-xl mb-1">8948</h5>
                Sales Done
            </div>
            <div class="tab-pane fade" id="profit" role="tabpanel" aria-labelledby="profit-tab" tabindex="0">
                <h5 class="text-xl mb-1">$293,158</h5>
                Profit earned
            </div>
        </div>
    </div>

##### Card with tab 2 - horizontal tabs auto scroll to active

Large menu icons? - keep `.nav-horizontal`

##### Card Title

##### $493,892

Revenue generated

##### 8948

Sales Done

##### $293,158

Profit earned

##### Another tab

##### One more tab

    <!--:Card:-->
    <div
        class="rounded-xl bg-white dark:bg-zinc-900 shadow-card">
        <div class="px-4 py-4 flex items-center justify-between border-b border-zinc-200 dark:border-zinc-800">
            <h5 class="text-lg">Card Title</h5>
        </div>
        <!-- Nav tabs -->
        <div class="flex items-center px-4 nav-underline nav-horizontal" id="myTab1" role="tablist">
            <button
                class="nav-link active"
                id="revenue1-tab" data-bs-toggle="tab" data-bs-target="#revenue1" type="button" role="tab"
                aria-controls="revenue1" aria-selected="true">Revenue</button>
            <button
                class="nav-link"
                id="sales1-tab" data-bs-toggle="tab" data-bs-target="#sales1" type="button" role="tab"
                aria-controls="sales1" aria-selected="false">Sales</button>
            <button
                class="nav-link"
                id="profit1-tab" data-bs-toggle="tab" data-bs-target="#profit1" type="button" role="tab"
                aria-controls="profit1" aria-selected="false">Profit</button>
        </div>
        <!-- Tab panes -->
        <div class="tab-content p-4">
            <div class="tab-pane fade show active" id="revenue1" role="tabpanel" aria-labelledby="revenue1-tab"
                tabindex="0">
                <h5 class="text-xl mb-1">$493,892</h5>
                Revenue generated
            </div>
            <div class="tab-pane fade" id="sales1" role="tabpanel" aria-labelledby="sales1-tab" tabindex="0">
                <h5 class="text-xl mb-1">8948</h5>
                Sales Done
            </div>
            <div class="tab-pane fade" id="profit1" role="tabpanel" aria-labelledby="profit1-tab" tabindex="0">
                <h5 class="text-xl mb-1">$293,158</h5>
                Profit earned
            </div>
        </div>
    </div>