JSFiddle - React, Tailwind, and code Playground

HTML

<div class="selectListParent">
    <div class="selectList">
        <input type="radio" value="" name="[select]" id="value0" checked="checked" />
        <label for="value0">Select a value</label>
        <input type="radio" value="Value 1" name="[select]" id="value1" />
            <label for="value1">Value 1</label>
        <input type="radio" value="Value 2" name="[select]" id="value2" />
            <label for="value2">Value 2</label>
        <input type="radio" value="Value 3" name="[select]" id="value3" />
            <label for="value3">Value 3</label>
        <input type="radio" value="Value 4" name="[select]" id="value4" />
            <label for="value4">Value 4</label>
    </div>
</div>

CSS

.selectListParent{
    position:relative
}

.selectList{
    position:absolute;
    top:0;
    left:0;
    display:inline-block;
    overflow:auto;    
    background-color:white;
    border: 1px solid lightgrey;
    padding: 2px 5px;
}

.selectList input[type=radio],
.selectList label{
    cursor:pointer;
    display:none;
}

.selectList input:checked+label{
    display:block;
}

.selectList:hover label{
    display:block;
}

.selectList label:hover{
    background-color:lightgrey
}