Dcode Design System

Tabs

No notes defined.

<!-- Tabs -->
<div>
    <div class="sm:hidden">
        <label for="tabs" class="sr-only">Select a tab</label>
        <!-- Use an "onChange" listener to redirect the user to the selected tab URL. -->
        <select id="tabs" name="tabs" class="block w-full rounded-md border-tertiary-300 py-smSpace pl-mdSpace pr-lgspace text-base focus:border-primary-500 focus:outline-none focus:ring-primary-500 sm:text-sm">
            <option>My Account</option>

            <option>Company</option>

            <option selected>Team Members</option>

            <option>Billing</option>
        </select>
    </div>
    <div class="hidden sm:block">
        <div class="border-b border-tertiary-200">
            <nav class="-mb-px flex space-x-xlSpace" aria-label="Tabs">
                <!-- Current: "border-primary-500 text-primary-600", Default: "border-transparent text-tertiary-500 hover:border-tertiary-300 hover:text-tertiary-700" -->
                <a href="#" class="border-transparent text-tertiary-500 hover:border-tertiary-300 hover:text-tertiary-700 whitespace-nowrap border-b-2 py-mdSpace px-2xsSpace text-sm font-medium">My Account</a>

                <a href="#" class="border-transparent text-tertiary-500 hover:border-tertiary-300 hover:text-tertiary-700 whitespace-nowrap border-b-2 py-mdSpace px-2xsSpace text-sm font-medium">Company</a>

                <a href="#" class="border-primary-500 text-primary-600 whitespace-nowrap border-b-2 py-mdSpace px-2xsSpace text-sm font-medium" aria-current="page">Team Members</a>

                <a href="#" class="border-transparent text-tertiary-500 hover:border-tertiary-300 hover:text-tertiary-700 whitespace-nowrap border-b-2 py-mdSpace px-2xsSpace text-sm font-medium">Billing</a>
            </nav>
        </div>
    </div>
</div>