Build a tab switcher with three tabs and a content panel that follows the active tab.
Render three <button> elements, each with the class tab and a data-tab attribute:
data-tab="home"labeledHomedata-tab="profile"labeledProfiledata-tab="settings"labeledSettings
The currently active tab button must also carry the class active (its class attribute is tab active); the other two buttons have only tab. Below the buttons, render a <div> with the class panel whose text is exactly Home content, Profile content, or Settings content, matching the active tab.
The default active tab is home. Clicking any tab button makes it the active tab: the active class moves to that button and the panel text updates.
Examples:
Initial render:
<button class="tab active" data-tab="home">Home</button>
<button class="tab" data-tab="profile">Profile</button>
<button class="tab" data-tab="settings">Settings</button>
<div class="panel">Home content</div>
Click Profile -> Profile button gets "tab active", panel shows "Profile content"
Click Settings -> Settings button gets "tab active", Home and Profile are just "tab",
panel shows "Settings content"