Pure CSS Radio Tab Switcher

<!--
  Author: @codepeek
  License: MIT
  Tags: #buttons #css #interface #opensource #codepeek
-->
<div class="tab-sw">
  <input type="radio" id="t1" name="tab-group" checked />
  <label for="t1">HTML</label>
  <input type="radio" id="t2" name="tab-group" />
  <label for="t2">React</label>
  <input type="radio" id="t3" name="tab-group" />
  <label for="t3">Vue</label>
  <div class="tab-slider"></div>
</div>

/*
 * Author: @codepeek
 * License: MIT
 * Tags: #buttons #css #interface #opensource #codepeek
 */

.tab-sw { position: relative; display: flex; background: #e4e4e7; padding: 4px; border-radius: 10px; width: 220px; font-family: system-ui, sans-serif; }
.tab-sw input { display: none; }
.tab-sw label { flex: 1; text-align: center; padding: 6px 0; font-size: 12px; font-weight: 600; color: #71717a; cursor: pointer; z-index: 2; transition: color 0.2s; }
.tab-slider { position: absolute; top: 4px; bottom: 4px; width: 31%; background: #ffffff; border-radius: 7px; box-shadow: 0 2px 6px rgba(0,0,0,0.1); transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); z-index: 1; }
#t1:checked ~ label[for="t1"], #t2:checked ~ label[for="t2"], #t3:checked ~ label[for="t3"] { color: #09090b; }
#t1:checked ~ .tab-slider { transform: translateX(0%); }
#t2:checked ~ .tab-slider { transform: translateX(108%); }
#t3:checked ~ .tab-slider { transform: translateX(216%); }