JSFiddle - React, Tailwind, and code Playground
HTML
<div class="divSelect">
<select multiple class="form-control">
</select>
</div>
CSS
select {
overflow-y:scroll;
height: 100%;
border: none;
width: 100%;
}
select:not([disabled]):hover,
select:not([disabled]):focus {
border-color: #ff7900;
}
select[disabled] {
opacity: 0.5;
}
.divSelect{
padding: 10px;
height: 200px;
position: relative;
display: block;
float: left;
line-height: 1.6;
border: 1px solid #c4c7cc;
background-color: white;
border-radius: 20px;
margin: 0;
padding: 10px;
color: #323232;
width: 60%;
transition: border-color 0.25s ease;
font-size: 12px;
}