JSFiddle - React, Tailwind, and code Playground

HTML

<form id="accessible-poll">
  <fieldset>
    <legend>Pick your favorite programming language</legend>
    <div class="language-radio">
      <input id="go" type="radio" name="language" value="go" />
      <label for="go" class="language-label">Go</label>
    </div>
    <div class="language-radio">
      <input id="javascript" type="radio" name="language" value="javascript" />
      <label for="javascript" class="language-label">JavaScript</label>
    </div> 
    <div class="language-radio">
      <input id="ruby" type="radio" name="language" value="ruby" />
      <label for="ruby" class="language-label">Ruby</label>
    </div>
  </fieldset>
  <button>Vote</button>
</form>

CSS

fieldset {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  column-gap: 20px;
  margin-bottom: 20px;
  border-width: 0;
}

legend {
  font-family: sans-serif;
  font-size:   18px;
}

.language-radio {
  padding: 20px;
}
label{
  display: block;
}

input[type="radio"]{
  opacity: 0;
  display: inline-block;
}
input[type="radio"]:focus + .language-label{
  box-shadow: 0 0 0 2px #333, 0 0 0 7px #fff, 0 0 0 12px #111;
}


#go:checked + label {
  border: 4px solid #555;
  background-color: cyan;
}

#javascript:checked + label {
  background-color: rgb(250, 244, 72);
  border: 4px solid #555;
}

#ruby:checked + label {
  border: 4px solid #555;  
  background-color: rgb(255, 21, 21);
}

.language-label {
  font-family:   sans-serif;
  font-size:     20px;
  text-align:    center;
  font-weight:   bolder;
  border-radius: 20px;
  padding:       20px;
  border: 4px solid #fff;
  box-shadow: 0 0 0 2px #333;
  transition: box-shadow 0.3s 0s ease; 
}