JSFiddle - React, Tailwind, and code Playground

HTML

<input type="checkbox" id="toggle-1">
<ul id='dropDown'>
    <li>Content</li>
    <li>Content</li>
    <li>Content</li>
    <li>Second to last one</li>
    <label for="toggle-1"><li>Last one</li></label>        
</ul>
<div>Other content</div>

CSS

ul {
    background:red;
    -webkit-transform:translateY(-90px);
    transform:translateY(-90px);
    transition: 1s;
}
ul li {
    transition: 1s;
}
input[type=checkbox] {
   position: absolute;
   top: -999px;
   left: -999px;
}
input[type=checkbox]:checked ~ ul {
    -webkit-transform:translateY(0px);
    transform:translateY(0px);
}
label {
    display:block;
    width:100%;
    height:20px;
}