JSFiddle - React, Tailwind, and code Playground

by PrabuB

HTML

<p>
<input type="radio" name="r1" value="a" checked="checked" class="big" id="r1" />
<label for="r1">Closed</label>
<input type="radio" name="r1" value="b" class="big"  id="r2"/>
<label for="r2">Pending</label>
</p>

CSS

.big{ width: 2.5em; height: 1.5em; }

.big+label{
  font-size:25px;
}

.big ,.big+label{
  vertical-align:middle;
}

/* COMMON RADIO AND CHECKBOX STYLES  */

input[type=radio]{
  /* hide original inputs */
  visibility: hidden;
  position: absolute;
}
input[type=radio] + label{
  cursor:pointer;
}
input[type=radio] + label:before{
  height:16px;
  margin-right: 4px;
  content: " ";
  display:inline-block;
  vertical-align: baseline;
  transition: 0.3s;
  border:1px solid #ccc;
  border-radius:10px;
  box-shadow: inset 0 -3px 6px #e4e4e4;
  transition: 0.3s;
}

/* CUSTOM RADIO AND CHECKBOX STYLES */
/* DEFAULT */
input[type=radio] + label:before{
  border-radius:50%;
  width:16px;
}

/* CHECKED */
input[type=radio]:checked + label:before{
  box-shadow: inset 0 -1px 3px #e4e4e4, inset 0 0 1px #222, inset 0 0 0 3px yellow;
  background:#000;
}