Tab

Individual view/navigation control.

html

<div class="tabatom-wrap">
  <div class="tabatom tabatom--md" role="tablist" aria-label="Sections" style="--accent:#BFD9F2;">
    <button id="tabatom-1" class="tabatom__tab is-selected" role="tab" aria-selected="true" aria-controls="tabatom-panel-1" type="button">Overview</button>
    <button id="tabatom-2" class="tabatom__tab" role="tab" aria-selected="false" aria-controls="tabatom-panel-2" tabindex="-1" type="button">Updates</button>
    <button id="tabatom-3" class="tabatom__tab" role="tab" aria-selected="false" aria-controls="tabatom-panel-3" tabindex="-1" disabled type="button">Archived</button>
  </div>
  <div id="tabatom-panel-1" class="tabatom__panel" role="tabpanel" aria-labelledby="tabatom-1">Overview content goes here.</div>
</div>
<style>
.tabatom-wrap { font: 14px system-ui, sans-serif; color: #241430; width: fit-content; }
.tabatom { display: flex; gap: 2px; background: #FAF7F2; padding: 4px; border-radius: 10px; }
.tabatom__tab { border: none; background: none; font: 500 14px system-ui, sans-serif; color: #241430; padding: 8px 14px; border-radius: 8px; opacity: .6; cursor: pointer; }
.tabatom__tab.is-selected { opacity: 1; background: #fff; box-shadow: 0 1px 2px rgba(36,20,48,.12); }
.tabatom__tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.tabatom__tab:disabled { opacity: .3; cursor: not-allowed; }
.tabatom--sm .tabatom__tab { padding: 5px 10px; font-size: 12px; }
.tabatom--lg .tabatom__tab { padding: 11px 18px; font-size: 16px; }
.tabatom__panel { margin-top: 10px; padding: 12px 14px; border-radius: 10px; background: #fff; border: 1px solid rgba(36,20,48,.1); font-size: 13px; opacity: .75; }
</style>

tailwind

<div class="font-sans text-sm text-[#241430] w-fit">
  <div id="tabatom-tw-1" class="tabatom-tw tabatom-tw--md flex gap-0.5 bg-[#FAF7F2] p-1 rounded-xl" role="tablist" aria-label="Sections" style="--accent:#BFD9F2;">
    <button class="tabatom-tw__tab tabatom-tw__tab--selected border-0 bg-white shadow-sm font-medium text-[#241430] px-3.5 py-2 rounded-lg cursor-pointer" role="tab" aria-selected="true" aria-controls="tabatom-tw-panel-1" type="button">Overview</button>
    <button class="tabatom-tw__tab border-0 bg-transparent font-medium text-[#241430]/60 px-3.5 py-2 rounded-lg cursor-pointer" role="tab" aria-selected="false" aria-controls="tabatom-tw-panel-2" tabindex="-1" type="button">Updates</button>
    <button class="tabatom-tw__tab border-0 bg-transparent font-medium text-[#241430]/30 px-3.5 py-2 rounded-lg cursor-not-allowed" role="tab" aria-selected="false" aria-controls="tabatom-tw-panel-3" tabindex="-1" disabled type="button">Archived</button>
  </div>
  <div id="tabatom-tw-panel-1" class="mt-2.5 px-3.5 py-3 rounded-xl bg-white border border-[#241430]/10 text-[13px] opacity-75" role="tabpanel" aria-labelledby="tabatom-tw-1">Overview content goes here.</div>
</div>
<style>
.tabatom-tw__tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.tabatom-tw--sm .tabatom-tw__tab { padding: 5px 10px; font-size: 12px; }
.tabatom-tw--lg .tabatom-tw__tab { padding: 11px 18px; font-size: 16px; }
</style>

react

export function Tab({
  selectedLabel = "Overview",
  disabledLabel = "Archived",
  accent = "#BFD9F2",
  size = "md",
}) {
  const pad = { sm: "5px 10px", md: "8px 14px", lg: "11px 18px" }[size] ?? "8px 14px";
  const fontSize = { sm: 12, md: 14, lg: 16 }[size] ?? 14;
  const base = { border: "none", background: "none", fontFamily: "system-ui, sans-serif", fontWeight: 500, fontSize, color: "#241430", padding: pad, borderRadius: 8, cursor: "pointer" };
  return (
    <div style={{ fontFamily: "system-ui, sans-serif", fontSize: 14, color: "#241430", width: "fit-content" }}>
      <div role="tablist" aria-label="Sections" style={{ display: "flex", gap: 2, background: "#FAF7F2", padding: 4, borderRadius: 10 }}>
        <button id="tab-1" role="tab" aria-selected="true" aria-controls="tab-panel-1" type="button" style={{ ...base, opacity: 1, background: "#fff", boxShadow: "0 1px 2px rgba(36,20,48,.12)" }}>{selectedLabel}</button>
        <button id="tab-2" role="tab" aria-selected="false" aria-controls="tab-panel-2" tabIndex={-1} type="button" style={{ ...base, opacity: .6 }}>Updates</button>
        <button id="tab-3" role="tab" aria-selected="false" aria-controls="tab-panel-3" tabIndex={-1} disabled type="button" style={{ ...base, opacity: .3, cursor: "not-allowed" }}>{disabledLabel}</button>
      </div>
      <div id="tab-panel-1" role="tabpanel" aria-labelledby="tab-1" style={{ marginTop: 10, padding: "12px 14px", borderRadius: 10, background: "#fff", border: "1px solid rgba(36,20,48,.1)", fontSize: 13, opacity: .75 }}>{selectedLabel} content goes here.</div>
    </div>
  );
}