<div class="v-tabs-container">
<div class="v-tab-menu">
<button class="v-btn active" onclick="openVTab(event, 'profile')">Profile</button>
<button class="v-btn" onclick="openVTab(event, 'security')">Security</button>
<button class="v-btn" onclick="openVTab(event, 'notifications')">Notifications</button>
<button class="v-btn" onclick="openVTab(event, 'billing')">Billing</button>
</div>
<div class="v-tab-content">
<div id="profile" class="v-content active">
<h2>Public Profile</h2>
<p>Manage your public information and bio.</p>
</div>
<div id="security" class="v-content">
<h2>Security Settings</h2>
<p>Update your password and 2FA methods.</p>
</div>
<div id="notifications" class="v-content">
<h2>Email Notifications</h2>
<p>Choose what updates you want to receive.</p>
</div>
<div id="billing" class="v-content">
<h2>Payment Methods</h2>
<p>Review your invoices and billing history.</p>
</div>
</div>
</div>
.v-tabs-container {
font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
display: flex;
background: #fff;
border: 1px solid #e5e7eb;
border-radius: 12px;
overflow: hidden;
max-width: 700px;
margin: 0 auto;
min-height: 300px;
}
.v-tab-menu {
width: 200px;
background: #f9fafb;
border-right: 1px solid #e5e7eb;
padding: 20px 0;
}
.v-btn {
display: block;
width: 100%;
padding: 15px 25px;
text-align: left;
border: none;
background: none;
color: #4b5563;
font-weight: 600;
cursor: pointer;
transition: all 0.2s;
border-left: 3px solid transparent;
}
.v-btn:hover {
background: #e5e7eb;
color: #1f2937;
}
.v-btn.active {
background: #fff;
color: #2563eb;
border-left-color: #2563eb;
}
.v-tab-content {
flex: 1;
padding: 30px;
}
.v-content {
display: none;
animation: fadeIn 0.4s ease;
}
.v-content.active {
display: block;
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(5px); }
to { opacity: 1; transform: translateY(0); }
}
h2 {
margin-top: 0;
color: #1f2937;
}
p {
color: #6b7280;
line-height: 1.6;
}
function openVTab(evt, tabName) {
const contents = document.querySelectorAll(".v-content");
const buttons = document.querySelectorAll(".v-btn");
contents.forEach(content => content.classList.remove("active"));
buttons.forEach(btn => btn.classList.remove("active"));
document.getElementById(tabName).classList.add("active");
evt.currentTarget.classList.add("active");
}