JSFiddle - React, Tailwind, and code Playground

by Ben

HTML

<div id="radio-group">
    <input type="radio" id="radio-1" name="radios" value="1" checked="checked" />
    <input type="radio" id="radio-2" name="radios" value="2" />
    <input type="radio" id="radio-3" name="radios" value="3" />
</div>
<div id="old"></div>
<div id="new"></div>

CSS

:focus
{
    outline: none;
}

JavaScript

$(document).ready(function(){
    $('input:radio[value="1"]').focus();
    
    $('input:radio').on("blur", function(){
       $("#old").html($(this).val() + " is off");
    });
    
    $('input:radio').on("focus", function(){
       $("#new").html($(this).val() + " is on");
    });
})