JSFiddle - React, Tailwind, and code Playground

by termitkin

HTML

<fieldset>
  <legend>Размер</legend>
  <input class="visually-hidden" name="c" id="a" type="radio">
  <label for="a">10</label>
  <input class="visually-hidden" name="c" id="b" type="radio">
  <label for="b">20</label>
</fieldset>

CSS

fieldset {
  border: none;
  padding: 0;
  margin: 0;
}

legend {
  float: left;
  margin-right: 10px;
}

input + label {
  border: 1px solid #333;
  cursor: pointer;
  padding: 3px 7px;
}

input:checked + label {
  border: 1px solid red;
  cursor: pointer;
  padding: 3px 7px;
}
.visually-hidden {
  position: absolute;
  overflow: hidden;
  clip: rect(0 0 0 0);
  height: 1px;
  width: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
}