JSFiddle - React, Tailwind, and code Playground

by Ansel Santosa

HTML

<div id="select">
    <div id="selected" value="-1">Select One</div>
    <ul id="options">
        <li value="1">One</li>
        <li value="2">Two</li>
        <li value="3">Three</li>
        <li value="4">Four</li>
    </ul>
</div>

<input type="button" id="get" value="Get Value"/>

CSS

#select {
    position: relative;
}

#selected {
    background-color: #fafafa;
    border: 1px solid #ddd;
    cursor: pointer;
    font-size: 14px;
    margin: 20px;
    position: relative;
    -webkit-transition-property: background, border, box-shadow, text-shadow;
    -webkit-transition-duration: .15s;
    -moz-transition-property: background, border, box-shadow, text-shadow;
    -moz-transition-duration: .15s;
    -o-transition-property: background, border, box-shadow, text-shadow;
    -o-transition-duration: .15s;
    -ms-transition-property: background, border, box-shadow, text-shadow;
    -ms-transition-duration: .15s;
    transition-property: background, border, box-shadow, text-shadow;
    transition-duration: .15s;
    padding: 5px;
    z-index: 99;
    width: 200px;
}

#selected::after {
    border: 6px solid transparent;
    border-top-color: rgba(0,0,0,.35);
    content: "";
    display: block;
    position: absolute;
    top: 11px;
    -webkit-transition-property: border;
    -webkit-transition-duration: .15s;
    -moz-transition-property: border;
    -moz-transition-duration: .15s;
    -o-transition-property: border;
    -o-transition-duration: .15s;
    -ms-transition-property: border;
    -ms-transition-duration: .15s;
    transition-property: border;
    transition-duration: .15s;
    right: 7px;
    width: 0;
}

#selected:hover,
.selecting {
    background-color: #fff;
    background-image: -moz-linear-gradient(top, transparent 0%, rgba(0,0,0,0.2) 100%);
    background-image: -webkit-linear-gradient(top, transparent 0%, rgba(0,0,0,0.2) 100%);
    background-image: -o-linear-gradient(top, transparent 0%, rgba(0,0,0,0.2) 100%);
    background-image: -ms-linear-gradient(top, transparent 0%, rgba(0,0,0,0.2) 100%);
    background-image: linear-gradient(top, transparent 0%, rgba(0,0,0,0.2) 100%);
    border-color: #666;
    box-shadow: 0 1px 3px rgba(0,0,0,.35);
    text-shadow: 1px 1px 1px rgba(255,255,255,1);
}

#selected:hover::after {
   ...

JavaScript

$(document).ready(function() {
    $('#selected').on('click', function() {
        if ($(this).hasClass('selecting')) {
            $(this).removeClass('selecting');
            $('#options').slideUp(150); 
        } else {
            $(this).addClass('selecting');
            $('#options').slideDown(150);
        }
    });
    
    $('#options li').on('click', function() {
        $('#options').slideUp(150);
        $('#selected')
            .text($(this).text())
            .attr('value', $(this).attr('value'))
            .removeClass('selecting')
        ;
    });
    
    $('#get').on('click', function() {
        $(this).val('value is: ' + $('#selected').attr('value'));
    });
});