Preview Code
Style: Shadcn
Default
Account Password Account Make changes to your account here. Click save when you're done.
Name
Username
Save changes Password Change your password here. After saving, you'll be logged out.
Current password
New password
Save password 
<vanilla-tabs class="w-[400px] block" default-value="account">
    <tabs-list class="grid w-full grid-cols-2">
        <tabs-trigger value="account">Account</tabs-trigger>
        <tabs-trigger value="password">Password</tabs-trigger>
    </tabs-list>

    <tabs-content value="account">
        <vanilla-card>
            <card-header>
                <card-title>Account</card-title>
                <card-description>
                    Make changes to your account here. Click save when you're
                    done.
                </card-description>
            </card-header>
            <card-content class="space-y-2">
                <div class="space-y-1">
                    <vanilla-label for="name">Name</vanilla-label>
                    <vanilla-input id="name" value="Pedro Duarte"
                    ></vanilla-input>
                </div>
                <div class="space-y-1">
                    <vanilla-label for="username">Username</vanilla-label>
                    <vanilla-input id="username" value="@peduarte"
                    ></vanilla-input>
                </div>
            </card-content>
            <card-footer>
                <vanilla-button>Save changes</vanilla-button>
            </card-footer>
        </vanilla-card>
    </tabs-content>

    <tabs-content value="password">
        <vanilla-card>
            <card-header>
                <card-title>Password</card-title>
                <card-description>
                    Change your password here. After saving, you'll be logged
                    out.
                </card-description>
            </card-header>
            <card-content class="space-y-2">
                <div class="space-y-1">
                    <vanilla-label for="current">Current password</vanilla-label
                    >
                    <vanilla-input id="current" type="password"></vanilla-input>
                </div>
                <div class="space-y-1">
                    <vanilla-label for="new">New password</vanilla-label>
                    <vanilla-input id="new" type="password"></vanilla-input>
                </div>
            </card-content>
            <card-footer>
                <vanilla-button>Save password</vanilla-button>
            </card-footer>
        </vanilla-card>
    </tabs-content>
</vanilla-tabs>
Introduction