JSFiddle - React, Tailwind, and code Playground

by OlsonDev

HTML

<a href="#slide-up">Slide up</div>
<div id="content"> 
    <ul class="menu"> 
        <li class="item" id="nav"><a href="#nav"><span>Click Here</span></a> <br>
            <p>
                Cum enim magna parturient ac elementum, tincidunt tempor ac lectus platea placerat.
                Eros dis lectus. Ut aliquam. Porttitor risus mattis mauris lacus a, aliquam augue.
                Cras elementum adipiscing, vel ridiculus diam pellentesque sociis habitasse pellentesque.
                Augue parturient sed elementum aenean. Tincidunt tristique.
            </p> 
        </li>  
    </ul> 
    <div>Below menu</div>
</div>
<div>Below content</div>

CSS

.menu{
    background: #ddd;
}
.item {
    overflow: hidden;
    position: relative;
}
.item p {
    -webkit-transition: all .5s;
    transition: all .5s;
    background: #fff;
    line-height: 0;
    overflow: hidden;
 }
:target > p {
    line-height: 1.2em;
}