JSFiddle - React, Tailwind, and code Playground

by John Pepp

HTML

<form action="" method="post">
  <input type="radio" id="radio1" name="color" value="red" checked>
  <label class="red" for="radio1">Red</label>
  <input type="radio" id="radio2" name="color" value="green">
  <label class="green" for="radio2">Green</label>
  <input type="radio" id="radio3" name="color" value="blue">
  <label class="blue" for="radio3">Blue</label>
</form>

CSS

/*
  Hide radio button (the round disc)
  we will use just the label to create pushbutton effect
*/

input[type=radio] {
  display: none;
  margin: 10px;
}


/*
  Change the look'n'feel of labels (which are adjacent to radiobuttons).
  Add some margin, padding to label
*/

input[type=radio] + label {
  display: inline-block;
  border-radius: 50%;
  cursor: pointer;
  width: 200px;
  height: 200px;
  margin: 10px;
  padding: 12px;
  text-align: center;
  vertical-align: bottom;
  color: #fff;
  border-color: #ddd;
}


/*
 Change background color for label next to checked radio button
 to make it look like highlighted button
*/

input[type=radio]:checked + label {
  background-image: none;
  color: #000;
}

.red { background-color: red; }
.green { background-color: green; }
.blue { background-color: blue; }