JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<div class="col-lg-8 mx-auto">
<h4>Gloomhaven</h4>
<h5>Select the version</h5>
<div class="rich-select custom-select">
<div class="rich-select-dropdown">
<div class="rich-select-option">
<input type="radio" name="game" id="game-174430-268248" checked="">
<div class="rich-select-option-body">
<label tabindex="-1">
<img src="https://cf.geekdo-images.com/thumb/img/e7GyV4PaNtwmalU-EQAGecwoBSI=/fit-in/200x150/pic2437871.jpg" alt="">English miniatures edition (2017)
</label>
</div>
</div>
<div class="rich-select-option">
<input type="radio" name="game" id="game-174430-331119">
<div class="rich-select-option-body">
<label tabindex="-1">
<img src="https://cf.geekdo-images.com/thumb/img/e7GyV4PaNtwmalU-EQAGecwoBSI=/fit-in/200x150/pic2437871.jpg" alt="">English standees edition (2017)
</label>
</div>
</div>
<div class="rich-select-option">
<input type="radio" name="game" id="game-174430-331120">
<div class="rich-select-option-body">
<label tabindex="-1">
<img...
CSS
.rich-select {
height: 81px; /* 75px + 6 */
position: relative;
border: none;
margin: 5px 0;
padding: 0;
background: none;
}
.rich-select-dropdown {
border: solid 1px #DDD;
border-radius: .25rem;
}
.rich-select-dropdown:focus-within {
border-color: #80bdff;
outline: 0;
box-shadow: 0 0 0 0.2rem rgba(0,123,255,.25);
}
.rich-select-dropdown-button {
opacity: 0;
width: 0;
height: 0;
margin: 0;
padding: 0;
}
.rich-select-dropdown-button + label,
.rich-select-option > input[type=radio] {
position: absolute;
display: block;
right: .5rem;
width: 2rem;
height: 1rem;
outline: none;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
.rich-select-dropdown-button + label {
top: .5rem;
padding: 25px 10px;
}
.rich-select-dropdown-button + label::before {
position: absolute;
top: 50%;
width: 1rem;
height: 1rem;
content: "";
pointer-events: none;
background-repeat: no-repeat;
background-position: center center;
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3e%3cpath fill='%23343a40' d='M2 5L0 3h4z'/%3e%3c/svg%3e");
}
.rich-select-dropdown > .rich-select-option > .rich-select-option-body {
display: none;
}
.rich-select-dropdown > .rich-select-option input[type=radio]:checked + .rich-select-option-body {
display: inline-block;
width: 100%;
}
.rich-select-options {
display: none;
position: absolute;
background-color: #fff;
border: solid 1px #DDD;
border-top: none;
border-radius: .25rem;
width: 100%;
max-height: 75vh;
overflow-y: auto;
z-index: 1000;
box-shadow: rgba(0,0,0,0.4) 5px 8px 15px;
}
.rich-select-option {
padding: 0 8px;
}
.rich-select-options >...