Animated tabs

Original version was created by Shahir Hossaini, but I upgraded it to make it semantically correct, and get rid of JavaScript. https://dev.to/shahirhossaini/learn-how-to-make-animated-tab-layout-using-html-css-and-pure-js-24pj

by Jozsef Polgar

HTML

<div class="radio-wrapper">
  <input type="radio" id="daily" name="groupName" value="Daily" checked="checked">
  <label for="daily">Daily</label><br>
  <input type="radio" id="monthly" name="groupName" value="Monthly">
  <label for="monthly">Monthly</label><br>
  <input type="radio" id="yearly" name="groupName" value="Yearly">
  <label for="yearly">Yearly</label>
  <span class="marker"></span>
</div>

CSS

* {
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
  font-family: "Google Sans";
}

body {
  height: 100vh;
  width: 100%;
  display: grid;
  place-items: center;
}

.radio-wrapper {
  height: 50px;
  width: 360px;
  display: flex;
  background: #f2f2f2;
  border-radius: 40px;
  position: relative;
  padding: 2.5px;
}

.marker {
  height: 45px;
  width: calc(100% / 3);
  background: #fff;
  position: absolute;
  border-radius: 40px;
  box-shadow: 0px 8px 20px 0px rgba(0, 0, 0, 0.15);
  transition: transform 0.5s cubic-bezier(0.15, 0.88, 0.15, 0.97);
}

#daily:checked ~ .marker {
  transform: translateX(0);
}

#monthly:checked ~ .marker {
  transform: translateX(117px);
}
#yearly:checked ~ .marker{
  transform: translateX(235px);
}

.radio-wrapper label {
  height: 100%;
  width: 100%;
  text-align: center;
  display: grid;
  place-items: center;
  font-size: 14px;
  position: relative;
  z-index: 1;
  cursor: pointer;
}

.radio-wrapper label:focus {
    outline-width: 2px;
    outline-color: lightblue;
    outline-style: solid;
}

.radio-wrapper input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}