JSFiddle - React, Tailwind, and code Playground

by huuzoo

HTML

<input type="radio" name="trip" value="hokkaido" id="radio_1" class="radiobutton"><label for="radio_1"><span class="radio-fontas"></span>北海道</label>
<input type="radio" name="trip" value="okinawa" id="radio_2" class="radiobutton"><label for="radio_2"><span class="radio-fontas"></span>沖縄</label>
<input type="radio" name="trip" value="tokyo" id="radio_3" class="radiobutton"><label for="radio_3"><span class="radio-fontas"></span>東京</label>
<p id="target"></p>

CSS

label {
  padding: 10px;
}
input:checked + label {
  background-color: #CEF6F5;
}
.radiobutton {
  display: none;
}
.radio-fontas {
  vertical-align: middle;
  font-size: 22px;
}
.radio-fontas:before {
  font-weight: 900;
  font-family: "Font Awesome 5 Free";
  color: #ccc;
  content: '\f192';
}
.radiobutton:checked + label > .radio-fontas:before {
  color: #2db29c;
}