JSFiddle - React, Tailwind, and code Playground

by Rodrigo Portillo

HTML

<div class="select-float">
  <select>
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="mercedes">Mercedes</option>
    <option value="audi">Audi</option>
  </select>
</div>

CSS

.select-float input:focus{
  
}
.select-float datalist{
  position: fixed;
  top: 12.5%;
  left: 12.5%;
  right: 12.5%;
  bottom: 12.5%;
  background-color: white;
  box-shadow: 0 2px 40px rgba(0,0,0,.5);
  display: block;
  visibility: all;
}

.select-float datalist *{
  display: block;
  visibility: all;
}