JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
    <h1>Menu Dropdown With Checkbox</h1>
    <div class="dropdown">
        <input type="checkbox" id="checkbox-toggle">
            <label for="checkbox-toggle">Menu Dropdown</label>
            <ul>
                <li><a href="#">Menu 1</a></li>
                <li><a href="#">Menu 2</a></li>
                <li><a href="#">Menu 3</a></li>
                <li><a href="#">Menu 4</a></li>
            </ul>
            </div>
    </div>

CSS

/*CSS Demo*/
*{
	margin:0;
	padding:0;
}

html{
    background-color: #ECEFF1;
}

body{
    text-align: center;
    font:normal 16px 'Open Sans', Arial, Helvetica, sans-serif;
}


.container {
	margin-top: 100px;
}

.container h1 {
	margin-bottom: 50px;
}

.dropdown{
    position: relative;
    display: inline-block;
    font-size: 16px;
    color: #FFF;
}


/**
    Style Checkbox
*/

input[type=checkbox]{
    display: none;
}

label{
    box-sizing: border-box;
    display: inline-block;
    width: 100%;
    background-color: #FE9829;
    padding: 15px 20px;

    cursor: pointer;
    text-align: center;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);

    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}


/*  The ul will have display:none by default */

ul{
    position: absolute;
    list-style: none;
    text-align: left;
    width: 100%;
    z-index: 1;
    box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.2);

    display: none;
}


ul li{
    padding: 15px;
    background-color: #fff;
    color: #303030;
    margin-bottom: 1px;
    cursor: pointer;
}

ul li:hover{
    background-color: #327CCB;
    color: #FFF;
}

ul li a{
    color: inherit;
    text-decoration: none;
}


/**

    By using the Following-sibling selector (~),
    we can target elements positioned after our checkbox in the DOM tree.

    With the state pseudo selector (:checked),
    we can make changes depending on the state of the checkbox.

    Using this combination of selectors
    allows to change the color of the label
    and show the list of items
    only when the checkbox is checked.

*/

input[type=checkbox]:checked ~ label {
    background-color: #EC6523;
}


input[type=checkbox]:checked ~ ul {
    display: block;
}