JSFiddle - React, Tailwind, and code Playground

HTML

<center style="margin-top:20px;">
    
<label class="container">
    This is a box 1
    <input name="radio-group1" type="radio" />
    <div class="big"></div>
</label >

<br/>

<label class="container">
    This is a box 2
    <input name="radio-group1" type="radio" />
    <div class="big"></div>
</label >
    
</center>

CSS

.container {
    position: relative;
    width:100px;
    height:100px;
    display:block;
}

.big {
    background-color:gainsboro;
    position: absolute;
    width: inherit;
    height: inherit;
    top: 0;
    left: 0;
    z-index: -1;
}

.container:hover > .big {
    border:1px solid blue;
}

input[type="radio"] {
    position: absolute;
    top: 20px;
    left: 50%;
}

input[type="radio"]:checked + .big {
    border: red 1px solid;
}