JSFiddle - React, Tailwind, and code Playground

HTML

<div class="new alternate_image">
    <ul>
        <li>
            <img src="http://lorempixel.com/100/50/sports/1/" />
            <label>
                <input type="radio" name="item1" value="Sports" />Sports</label>
        </li>
        <li>
            <img src="http://lorempixel.com/100/50/fashion/1/" />
            <label>
                <input type="radio" name="item1" value="Fashion" />Fashion</label>
        </li>
        <li class="selected">
            <img src="http://lorempixel.com/100/50/city/1/" />
            <label>
                <input type="radio" name="item1" value="City" />City</label>
        </li>
    </ul>
</div>

CSS

.new {
    position:absolute;
}
.new ul {
    height:72px;
    width: 155px;
    padding: 10px;
    /* Was - height:87px; width: 140px; */
   
}
.alternate_image ul {
    width: 165px;
    list-style-type:none!important;
}
.new li img {
    height:65px;
    width:60px;
    margin: 10px;
    /* Was - height:85px; width:75px; top:12px; */
    top:15px;
    left:0px;
    position:absolute;
    border: 1px solid #d3d3d3;
   
}
.new li.selected img {
    z-index:2;
    opacity:1;
    background-color:white;
}
.new:hover li.selected img {
    z-index:0;
    background-color:#d0d0d0;
}
.new li:hover img {
    z-index:2;
    opacity:1;
}
.new label {
    width:60px;
    left:69px;
    line-height:9px;
    font-size:7.5pt;
    position:relative;
    display:inline-block;
}
/* Was- left:45px; line-height:8px; */
 .alternate_image label {
    line-height:12px;
}
.new li label input {
    margin-left:0px;
    margin-top:-4px;
    padding-top:0px;
    float:left;
    width:10px;
    border:none;
    font-size: 5px;
}
.alternate_image li label input {
    margin-top:0px;
}
.position_label {
    position: relative;
    top:-2.5px;
}