JSFiddle - React, Tailwind, and code Playground

HTML

<div class="radiogroup">
  <div class="label">Choose Your Number</div>
    <ul class="radio">
        <li><input type="radio" id="p1" name="pi" /><label for="p1">3</label></li>
<li><input type="radio" id="p2" name="pi" /><label for="p2">2</label></li>
<li><input type="radio" id="p3" name="pi" /><label for="p3">1</label></li>
<li><input type="radio" id="p4" name="pi" checked="checked" /><label for="p4">0</label></li>
<li><input type="radio" id="p5" name="pi" /><label for="p5">1</label></li>
<li><input type="radio" id="p6" name="pi" /><label for="p6">2</label></li>
<li><input type="radio" id="p7" name="pi" /><label for="p7">3</label></li>
    </ul>        
</div>

CSS

div.radiogroup div.label { 
  margin: 0; 
  padding: 0; 
  margin-left: 20px; 
  font-weight: bold; 
} 

ul.radio  { 
  margin: 0; 
  padding: 0; 
  margin-left: 20px; 
  list-style: none; 
} 


ul.radio li { 
  border: 1px transparent solid; 
  color: crimson;
    float: left;
} 

ul.radio li:hover, 
ul.radio li.focus  { 
  background-color: lightyellow; 
  border: 1px gray solid; 
  width: 10em; 
}

JavaScript

$(document).ready( function() {

  // Add the "focus" value to class attribute 
  $('ul.radio li').focusin( function() {
    $(this).addClass('focus');
  }
  );

  // Remove the "focus" value to class attribute 
  $('ul.radio li').focusout( function() {
    $(this).removeClass('focus');
  }
  );

}
);