JSFiddle - React, Tailwind, and code Playground

HTML

<center style="margin-top:20px;">

<div>      
    <input name="radio-group1" id="box1" type="radio" />
    <label class="big" for="box1">
    This is a box 1</label>   
</div>


<div >    
    <input name="radio-group1" id="box2" type="radio" class='sex' /> 
    <label class="big" for="box2" >
    This is a box 2</label>
</div>

    
</center>

CSS

.big {
    display:block;
    width:100px;
    height:100px;
    background-color:gainsboro;
    cursor:pointer;
    margin: 10px;
}

.big:hover {

    border:1px solid blue;
}
div input:checked+label  {
    border: 1px solid red;   
}
div {
    position: relative;   
}
input {
    position: absolute;
    top: 45px;
    left: 50%;   
}