JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="menu-sanfona">
    <li tabindex="0"> <span>Item 1</span>
        <ul>
            <li><span>Item 1.1</span>
            </li>
            <li><span>Item 2.2</span>
            </li>
        </ul>
    </li>
    <li tabindex="1"> <span>Item 2</span>
        <ul>
            <li><span>Item 2.1</span>
            </li>
            <li><span>Item 2.2</span>
            </li>
        </ul>
    </li>
    <li tabindex="2"> <span>Item 3</span>
        <ul>
            <li><span>Item 3.1</span>
            </li>
            <li><span>Item 3.2</span>
            </li>
        </ul>
    </li>
</ul>

CSS

*:focus {
    outline:none
}
ul {
    list-style:none;
    padding:0;
    margin:0;
}
.menu-sanfona {
    border:1px solid #ccc;
    border-bottom:none;
    background:#eee;
}
.menu-sanfona span {
    padding:10px;
    display:block;
}
.menu-sanfona > li {
    border-bottom:1px solid #ccc;
}
.menu-sanfona li ul {
    background:#fff;
    border-top:1px solid #ccc;
    display:none;
}

/* a mágica acontece aqui */
.menu-sanfona li:focus ul {
    display:block;
}