JSFiddle - React, Tailwind, and code Playground

by swoogie

HTML

<div>
    <button type="button" class="traffic-dropdown-button">list</button>
    <div class="traffic-dropdown">
        <label class="traffic-dropdown-row"> 
             <input class="traffic-check" type="checkbox" />
            <span class="traffic-data">Approved</span>
        </label>
        <label class="traffic-dropdown-row"> 
             <input class="traffic-check" type="checkbox" />
            <span class="traffic-data">Completed </span>
        </label>
        <label class="traffic-dropdown-row"> 
           <input class="traffic-check" type="checkbox" />
            <span class="traffic-data">Created</span>
        </label>
    </div>
</div>

CSS

.traffic-dropdown {
    background-color: #8FBC8F;
    max-width: 150px;
    min-width:100px;
    font-family: sans-serif;
    box-shadow: 5px 5px 5px #888888;

}
.traffic-dropdown > label {
    display:block;
    padding: 5px;
    border-bottom: 1px solid #AFDCAF;
}
.traffic-dropdown > label:hover {
    background-color: #AFDCAF;
    cursor: pointer;
}

.traffic-dropdown > div > input.traffic-check {
    margin: 0px 20px 0px 10px;
}

JavaScript

$(document).ready(function(){
    $(".traffic-dropdown-button").on('click', function(){
       $(this).siblings(".traffic-dropdown").toggle();
    });
    $(".traffic-dropdown-row").on('click', function(){
        $(".traffic-check:checked").map(function(i, e){
            console.log($(e).text());
        });
    });
});