JSFiddle - React, Tailwind, and code Playground

by glee

HTML

<div class = "select">
    <div class = "curVal">Gender</div><div class = "arrow">V</div>
    <div class = "choices">
        <div class = "choice">Male</div>
        <div class = "choice">Female</div>
        <div class = "choice">Refuse to answer</div>
    </div>
</div>

CSS

body {
    font-family: 'Arial', Helvetica, Sans-Serif;        
}
.select div {
    display: inline-block;
}
.curVal {
    height: 30px;
    width: 150px;
    line-height: 30px;
    vertical-align: middle;
    background-color: rgb(0, 162, 232);
    color: white;
}
.arrow {
    color: white;
    background-color: rgb(0, 140, 200); /* this can be an image */
    cursor: pointer;
    height: 30px;
    line-height: 30px;
    vertical-align: middle;
    position: absolute;
    top: 0px;
}
.choices {
    position: absolute;
    left: 0px;
    top: 30px;
    background-color: rgb(255, 127, 39);
    color: white;
    width: 150px;
}
.choices div {
    display: block;
    cursor: pointer;        
}

JavaScript

$(".choices").hide();
$(".arrow").click(function(event) {
   $(".choices").slideToggle("fast"); 
   event.stopPropagation();
});
$(".choice").click(function() {
   $(".curVal").html($(this).html());
   $(".choices").slideToggle("fast");
   event.stopPropagation();
});
$("html").click(function() {
   $(".choices").slideUp("fast"); 
});