<!DOCTYPE html>
<html>
<head>
<title>Tabbed buttons demo</title>
</head>
<body>

<div class="eyebrow">INTERACTIVE COMPONENT</div>
    <h1>Segmented Control</h1>
    <p class="intro">
      A tactile tab control with a fluid selection indicator.
    </p>

<button class="segment active" data-index="0">
        <span class="icon">◉</span>
        Overview
      </button>

<button class="segment" data-index="1">
        <span class="icon">↗</span>
        Analytics
      </button>

<button class="segment" data-index="2">
        <span class="icon">✦</span>
        Activity
      </button>

<button class="segment" data-index="3">
        <span class="icon">⚙</span>
        Settings
      </button>

</div>

<div class="content active">
        <div class="content-icon">◉</div>
        <div>
          <h2>Overview</h2>
          <p>
            See the most important information at a glance.
          </p>
        </div>
      </div>

<div class="content">
        <div class="content-icon">↗</div>
        <div>
          <h2>Analytics</h2>
          <p>
            Explore trends, performance and key metrics.
          </p>
        </div>
      </div>

<div class="content">
        <div class="content-icon">✦</div>
        <div>
          <h2>Activity</h2>
          <p>
            Review recent actions and what's happening now.
          </p>
        </div>
      </div>

<div class="content">
        <div class="content-icon">⚙</div>
        <div>
          <h2>Settings</h2>
          <p>
            Customize your experience and preferences.
          </p>
        </div>
      </div>

</div>

<div class="hint">
      Try clicking the tabs
    </div>

</div>

</div>

</body>
</html>

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  width: 100%;
  height: 100%;
}

body {
  font-family:
    Inter,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;

background:
    radial-gradient(
      circle at 50% 15%,
      #ffffff,
      #f5f5f3 48%,
      #e9e9e6 100%
    );

color: #20211f;
}

button {
  font: inherit;
}

.page {
  min-height: 100vh;

display: flex;
  align-items: center;
  justify-content: center;

padding: 30px;
}

.demo {
  width: min(620px, 100%);

text-align: center;
}

.eyebrow {
  font-size: 9px;
  font-weight: 700;

letter-spacing: 3px;

color: #a0a19c;
}

h1 {
  margin: 8px 0 7px;

font-size: 42px;
  line-height: 1;

letter-spacing: -2px;

font-weight: 700;
}

.intro {
  margin: 0 auto 30px;

max-width: 430px;

font-size: 13px;

line-height: 1.6;

color: #8b8c87;
}

/* ---------------------------------- */
/* Segmented control */
/* ---------------------------------- */

.segmented {
  position: relative;

display: grid;

grid-template-columns:
    repeat(4, 1fr);

gap: 4px;

width: 100%;

padding: 5px;

border-radius: 14px;

background:
    rgba(30,32,29,.075);

border:
    1px solid rgba(0,0,0,.045);

box-shadow:
    inset 0 1px 2px rgba(0,0,0,.04);
}

.slider {
  position: absolute;

top: 5px;
  left: 5px;

width: calc(
    25% - 5px
  );

height: calc(
    100% - 10px
  );

border-radius: 10px;

background: #ffffff;

box-shadow:
    0 3px 9px rgba(0,0,0,.11),
    0 1px 2px rgba(0,0,0,.07);

transition:
    transform .42s
    cubic-bezier(.22,.85,.28,1);

pointer-events: none;
}

.segment {
  position: relative;

z-index: 2;

min-height: 52px;

border: 0;

background: transparent;

color: #92938e;

border-radius: 10px;

font-size: 11px;

font-weight: 600;

cursor: pointer;

transition:
    color .25s ease,
    transform .2s ease;
}

.segment:hover {
  color: #4c4e49;
}

.segment.active {
  color: #222420;
}

.segment:active {
  transform: scale(.97);
}

.icon {
  display: inline-block;

margin-right: 5px;

font-size: 11px;

opacity: .65;
}

/* ---------------------------------- */
/* Content */
/* ---------------------------------- */

.content-window {
  position: relative;

margin-top: 22px;

min-height: 155px;

overflow: hidden;

border-radius: 17px;

background:
    rgba(255,255,255,.76);

border:
    1px solid rgba(0,0,0,.065);

box-shadow:
    0 15px 45px rgba(40,40,35,.08);
}

.content {
  position: absolute;

inset: 0;

display: flex;

align-items: center;

text-align: left;

gap: 18px;

padding: 28px 32px;

opacity: 0;

transform:
    translateY(12px)
    scale(.985);

pointer-events: none;

transition:
    opacity .28s ease,
    transform .42s
    cubic-bezier(.22,.8,.3,1);
}

.content.active {
  opacity: 1;

transform:
    translateY(0)
    scale(1);

pointer-events: auto;
}

.content-icon {
  flex: 0 0 auto;

width: 54px;
  height: 54px;

display: flex;

align-items: center;
  justify-content: center;

border-radius: 15px;

background:
    linear-gradient(
      145deg,
      #f3f3f0,
      #e7e7e2
    );

border:
    1px solid rgba(0,0,0,.055);

color: #60625c;

font-size: 18px;

box-shadow:
    inset 0 1px rgba(255,255,255,.9),
    0 5px 12px rgba(0,0,0,.05);
}

.content h2 {
  margin: 0 0 6px;

font-size: 18px;

letter-spacing: -.4px;
}

.content p {
  margin: 0;

max-width: 400px;

color: #92938d;

font-size: 12px;

line-height: 1.5;
}

.hint {
  margin-top: 16px;

font-size: 9px;

color: #abab a5;
  letter-spacing: 1.5px;
}

@media (max-width: 560px) {

.page {
    padding: 18px;
  }

h1 {
    font-size: 34px;
  }

.segment {
    font-size: 0;
  }

.icon {
    margin: 0;
    font-size: 14px;
  }

.content {
    padding: 22px;
  }
}

Liveweave: Generative AI Web Editor & HTML/CSS/JS Playground