Back to CSS Tags & Chips Linked Group Pure CSS
Share 
.ctc-linked { display: inline-flex; background: #1f1f2e; border: 1px solid rgba(255,255,255,0.1); border-radius: 999px; overflow: hidden; }

.ctc-linked-seg { display: inline-flex; align-items: center; padding: 8px 16px; color: #c4b5fd; font: 600 12px/1 system-ui, sans-serif; text-decoration: none; border-right: 1px solid rgba(255,255,255,0.08); transition: background 0.15s, color 0.15s; }

.ctc-linked-seg:last-child { border-right: 0; }

.ctc-linked-seg:hover { background: rgba(124,108,255,0.18); color: #fff; }
<div class="ctc-linked">
  <a href="#" class="ctc-linked-seg">Components</a>
  <a href="#" class="ctc-linked-seg">CSS</a>
  <a href="#" class="ctc-linked-seg">Buttons</a>
</div>
Live preview Edit any tab — preview updates live Ready