Industrial Block Tabs

HTML_STRUCTURE

<div class='bh-nav-v2-tabs'><button class='bh-nav-v2-t-item active'>SOURCE</button><button class='bh-nav-v2-t-item'>PREVIEW</button><button class='bh-nav-v2-t-item'>DOCS</button></div>

CSS_STYLING

.bh-nav-v2-tabs { display: flex; gap: 0; background: #000; border: 2px solid #1a1a1a; width: fit-content; } .bh-nav-v2-t-item { background: transparent; border: none; color: #444; padding: 12px 25px; font-weight: 900; font-size: 11px; cursor: pointer; transition: 0.2s; border-right: 1px solid #1a1a1a; } .bh-nav-v2-t-item.active { background: #fff; color: #000; } .bh-nav-v2-t-item:hover:not(.active) { color: #fff; background: #080808; }

// DESIGN_NOTES: Komponen ini menggunakan CSS variabel untuk memudahkan kustomisasi warna dan transisi.