JSFiddle - React, Tailwind, and code Playground

by Ayyappan Sakthivadivel

HTML

<div class="radiobtn-ig ml-0">
  <label>
    <input name="roles" type="radio" name="radio1">
    <i class="input-helper"></i>
    <div class="chckbx-txt">Admin</div>
  </label>
</div>

<div class="radiobtn-ig ml-0">
    <label>
    <input name="roles" type="radio" name="radio1">
    <i class="input-helper"></i>
    <div class="chckbx-txt">Admin</div>
  </label>
</div>

CSS

.radiobtn-ig {
	 position: relative;
	 margin-top: 15px;
	 margin-bottom: 20px;
	 margin-left: 15px;
}
 .radiobtn-ig label {
	 height: 20px;
	 padding-left: 20px;
	 display: block;
	 margin-top: -3px;
	 position: unset !important;
	 pointer-events: unset !important;
}
 .radiobtn-ig span {
	 cursor: pointer;
}
 .radiobtn-ig input {
	 top: 0;
	 left: 0;
	 z-index: 1;
	 cursor: pointer;
	 opacity: 0;
	 position: absolute;
}
 .radiobtn-ig input:checked + .input-helper:before {
	 border-color: #999;
}
 .radiobtn-ig .input-helper:before, .radiobtn-ig .input-helper:after {
	 position: absolute;
	 content: "";
	 transition: all 200ms;
}
 .radiobtn-ig .input-helper:before {
	 left: 0;
	 border: 1px solid #999;
	 border-radius: 2px;
}
 .radiobtn-ig input {
	 width: 15px;
	 height: 15px;
}
 .radiobtn-ig input:checked + .input-helper:before {
	 background-color: white;
	 border: 1px solid black;
	 box-shadow: none;
}
 .radiobtn-ig input:checked + .input-helper:after {
	 color: black;
	 transform: scale(1);
	 opacity: 1;
}
 .radiobtn-ig .input-helper:before {
	 top: 0;
	 width: 15px;
	 height: 15px;
	 border-radius: 50%;
	 color: white;
	 border: 1px solid #999;
	 box-shadow: inset 0px 0px 5px rgba(0, 0, 0, 0.4);
}
 .radiobtn-ig .input-helper:after {
	 font-family: 'FontAwesome';
	 content: '\f111';
	 font-size: 1rem;
	 left: 0.37rem;
	 top: 0.2rem;
	 color: #999;
	 transform: scale(0);
	 opacity: 0;
}
 .radiobtn-ig .chckbx-txt {
	 font-size: 16px;
	 float: left;
	 margin-top: -1rem;
	 cursor: pointer;
	 line-height: 3.6rem;
}