JSFiddle - React, Tailwind, and code Playground

by HemalathaThanigaivel

HTML

<label><input type="radio" name="radio"> Checkbox 1</label>
<label><input type="radio" name="radio"> Checkbox 2</label>
<br/>

<input id="i1" class="hidden" type="radio"/><label for="i1" class="test"></label>

CSS

input[type="radio"] {
    -webkit-appearance: checkbox;
    -moz-appearance: checkbox;
    -ms-appearance: checkbox;
    -o-appearance: checkbox;
}

.hidden {
  opacity: 0;
}

label.test::before {
  content: "";
    display: inline-block;
    position: absolute;
    width: 22px;
    height: 22px;
    border: 1px solid #D3CFC8;
    border-radius: 0px;
}