JSFiddle - React, Tailwind, and code Playground

HTML

<input type="radio" name="hello" value="1" id="hello1" checked="checked" />
<label for="hello1">One</label>

<input type="radio" name="hello" value="2" id="hello2" />
<label for="hello2">Two</label>

<input type="radio" name="hello" value="3" id="hello3" />
<label for="hello3">Three</label>

<p id="result"></p>

CSS

input[type=radio] {
    display: none;
}
label {
    display: inline-block;
    margin: 5px;
    background: white;
    color: royalblue;
    border: 2px solid royalblue;
    font-size: 16px;
    width: 50px;
    text-align: center;
}
input[type=radio]:checked + label {
    background: royalblue;
    color: white;
}

p {
    border: 1px solid black;
}

JavaScript

$("#result").text("123")
$("input").click(function () {
    $("#result").text($(this).val());
});