JSFiddle - React, Tailwind, and code Playground

HTML

<select id="colours">
<option value="red">red</option>
<option value="blue">blue</option>   
<option value="green">green</option>   
<option value="orange">orange</option>       
</select>
<div id="preview"></div>

CSS

body{
    margin: 0;
    padding: 50px;
}
#colours{
   position: relative;            
}
#preview{
   display: none;
   position: absolute;
   background-color: #fff;
   border: 1px solid #ccc;
   padding: 10px;
   width: 250px;
   height: 30px;    
}

JavaScript

var C = $("#colours option");
C.on('mouseenter', function(){
    var V = $(this).val();
    var O = $(this).offset();
    var CO = $("#colours").offset();
    var W = $("#colours").width()+5;
    $("#preview").css("top", O.top-20).show();
    $("#preview").css("left", CO.left+W);
    $("#preview").css("background-color", V);
}).on('click', function(){
    $("#preview").hide();
});
$("#colours").on('blur', function(){
    $("#preview").hide();
});