JSFiddle - React, Tailwind, and code Playground

HTML

<input type = "checkbox" name = "one" id = "one">
<label for = "one">
    <span>Menu 1</span>
    <ul class = "submenu">
        <li>Submenu 1</li>
        <li>Submenu 2</li>
        <li>Submenu 3</li>
    </ul>
</label>
<input type = "checkbox" name = "two" id = "two">
<label for = "two">
    <span>Menu 2</span>
    <ul class = "submenu">
        <li>Submenu 1</li>
        <li>Submenu 2</li>
        <li>Submenu 3</li>
    </ul>
</label>
<input type = "checkbox" name = "three" id = "three">
<label for = "three">
    <span>Menu 3</span>
    <ul class = "submenu">
        <li>Submenu 1</li>
        <li>Submenu 2</li>
        <li>Submenu 3</li>
    </ul>
</label>

CSS

label {
    cursor:pointer;
    position:relative;
    padding:0 10px 0 0;
}
input {
    position:absolute;
    left:-9999px;
}
label .submenu {
    display:none;
    margin:0;
    padding:0;
    position:absolute;
    top:20px;
    left:0;
    width:100px;
    list-style:none;
    border:1px #ccc solid;
    padding:20px;
}
input:checked + label .submenu {
    display:block;
}
input:checked + label {
    color:red;
}
}