Basecoat UI MCP

<!-- Tab Navigation with Panels --> <div class="tabs w-full" id="demo-tabs"> <nav role="tablist" aria-orientation="horizontal" class="border-b"> <button type="button" role="tab" aria-selected="true" aria-controls="panel-1" class="px-4 py-2 border-b-2 border-primary text-primary"> Account </button> <button type="button" role="tab" aria-selected="false" aria-controls="panel-2" class="px-4 py-2 border-b-2 border-transparent hover:border-muted"> Password </button> <button type="button" role="tab" aria-selected="false" aria-controls="panel-3" class="px-4 py-2 border-b-2 border-transparent hover:border-muted"> Settings </button> </nav> <div role="tabpanel" id="panel-1" aria-selected="true" class="p-4"> <h3 class="text-lg font-medium">Account Settings</h3> <p>Manage your account information here.</p> </div> <div role="tabpanel" id="panel-2" aria-selected="false" class="p-4" hidden> <h3 class="text-lg font-medium">Password Settings</h3> <p>Change your password here.</p> </div> <div role="tabpanel" id="panel-3" aria-selected="false" class="p-4" hidden> <h3 class="text-lg font-medium">App Settings</h3> <p>Configure application preferences.</p> </div> </div>