JSFiddle - React, Tailwind, and code Playground

HTML

<div class="dropdown">
    <input type="checkbox" id="checkbox_toggle">
    <label for="checkbox_toggle">Click to Expand</label>
    <ul>
        <li><a href="#">Link One</a></li>
        <li><a href="#">Link Two</a></li>
        <li><a href="#">Link Three</a></li>
        <li><a href="#">Link Four</a></li>
    </ul>
</div>
    <p>Yo!</p>

CSS

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

ul{
    max-height:0;
    overflow: hidden;
    background: black;
    transition: 1s;
}

input[type=checkbox]:checked ~ ul {
    max-height: 300px;
}