JSFiddle - React, Tailwind, and code Playground

by Alex Baumgertner

HTML

<div class="select" >
    
    <div class='select__value' style="text-align: center;">options</div>

    <ul class="options">
        <li class="options__item">option 1</li>
        <li class="options__item">option 2</li>
        <li class="options__item">option 3</li>
    </ul>   
    
</div>

CSS

.select {
    position: relative; 
    height: 30px;
    margin: 20px;
    background: #EFEFEF;
    width: 70px;
    cursor:pointer;
}

.options {
    position: absolute;
    display: none;
    margin: 10px 0 0 15px;
}

.options__item {
    height: 30px;
    cursor:pointer;
    border: 1px dotted;
}

JavaScript

$(function() {

    $('.select').toggle(

    function() {
        $(this).children('.options').slideDown('fast');;
    },

    function() {
        $(this).children('.options').slideUp('fast');
    }

    );

});