JSFiddle - React, Tailwind, and code Playground

HTML

<div id="colourlist">red</div>
<ul id="colours">
<li value="red">red</li>
<li value="blue">blue</li>   
<li value="green">green</li>   
<li value="orange">orange</li>       
</ul>
<div id="preview"></div>

CSS

body{
    margin: 0;
    padding: 50px;
}
#colourlist{
    position: absolute;
    border: 1px solid #B5B0AC;
    width: 200px;
    height: 21px;
    background: url('http://www.thermaxindia.com/images/dropdown_arrow.JPG') 180px 0 no-repeat;    
}
.hilight{
    background-color: #3399FF;
}
#colours{
   display: none;
   position: relative;
   top: 22px;
   left: 0;
   width: 200px;
   position: relative;
   border: 1px solid #B5B0AC;
   overflow: hidden;    
}
#preview{
   display: none;
   position: relative;
   background-color: #fff;
   border: 1px solid #ccc;
   padding: 10px;
   width: 250px;
   height: 30px;  
}

JavaScript

$("#colours li").on('mouseenter', function(){
    $("#colours li").removeClass("hilight");
    $(this).addClass("hilight");
    var O = $(this).offset();
    var CO = $("#colours").offset();
    $("#preview").css("top", O.top-150).show();
    $("#preview").css("left", CO.left+160);
}).on('click', function(){
    var text = $(this).text();
    $("#colourlist").text(text);
    $("#colours").hide();
    $("#preview").hide(); 
});
$("#colourlist").on('click', function(e){
    e.preventDefault();
    $("#colours").toggle();   
});