<!--:Card:-->
<div
    class="rounded-xl bg-white dark:bg-stone-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:-->
<div
    class="rounded-xl bg-white dark:bg-stone-900 shadow-card">
    <div class="px-4 py-4 flex items-center justify-between border-b border-stone-200 dark:border-stone-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>