JSFiddle - React, Tailwind, and code Playground

by Satheesh Kumar

HTML

<div>

<input type="radio" name="radio" id="sample">
<label for="sample">One</label>
</div>
<div>
<input type="radio" name="radio"  id="sampleTwo">
<label for="sampleTwo">Two</label>
</div>
<div>
<input type="radio" name="radio" id="sampleThree">
<label for="sampleThree">Three</label>
</div>

<div>
<input type="radio" name="radio" id="sampleThree">
<label for="sampleThree">Three</label>
</div>

<div>
<input type="radio" name="radio" id="sampleThree">
<label for="sampleThree">Three</label>
</div>

<div>
<input type="radio" name="radio" id="sampleThree">
<label for="sampleThree">Three</label>
</div>

<div>
<input type="radio" name="radio" id="sampleThree">
<label for="sampleThree">Three</label>
</div>

<div>
<input type="radio" name="radio" id="sampleThree">
<label for="sampleThree">Three</label>
</div>

<div>
<input type="radio" name="radio" id="sampleThree">
<label for="sampleThree">Three</label>
</div>

<div>
<input type="radio" name="radio" id="sampleThree">
<label for="sampleThree">Three</label>
</div>
<div>
<input type="radio" name="radio" id="sampleThree">
<label for="sampleThree">Three</label>
</div>

<div>
<input type="radio" name="radio" id="sampleThree">
<label for="sampleThree">Three</label>
</div>

<div>
<input type="radio" name="radio" id="sampleThree">
<label for="sampleThree">Three</label>
</div>
<div>
<input type="radio" name="radio" id="sampleThree">
<label for="sampleThree">Three</label>
</div>

<div>
<input type="radio" name="radio" id="sampleThree">
<label for="sampleThree">Three</label>
</div>

CSS

input[type="radio"]{
  display: none;
}

input[type="radio"] + label{
border: 1px solid green;
color: green;
padding: 10px;
margin-right: 10px;
display: inline-block;
}


input[type="radio"]:Checked + label{
color: #ffffff;
background: green;
}
div{
  display: inline-block;
}