JSFiddle - React, Tailwind, and code Playground

by ruhul105

HTML

<div class="input-radio"><input type="radio" id="male" name="gender" value="male" checked> <label for="male">male</label></div>
<div class="input-radio"><input type="radio" id="female" name="gender" value="female"> <label for="female">Icecrea</label></div>
<div class="input-radio"><input type="radio" name="gender" id="other" value="other"> <label for="other">Vanilla</label></div>

CSS

.input-radio{
  display: inline-block;
  margin-right: 10px;
  margin-top: 30px;
}
input[type=radio] {
    display: none;
  }
  input[type=radio] + label {
    padding: 20px;
    border-radius: 40px;
    border: 1px solid #ddd;
 
  }
  input[type=radio]:checked + label,   input[type=radio]:hover + label {
    border: 1px solid red;
  }
  input[type=radio] + label:hover {
    border: 1px solid red;
  }