JSFiddle - React, Tailwind, and code Playground

by Thiago Diniz

HTML

<div id="container">
       container
</div>

<div class="header">
    <div id="menu-usuario-conteudo">
        <p>Conteúdo 1</p>
    </div>
    <h3 id="menu-usuario"><a href="#">Aba</a></h3>
    header
</div>

CSS

*{margin:0px; auto; padding:0px; text-align:center; color:white;}
#container{
    height:200px;
    width:100%;
    background:red;
    float:left;
    margin-top:60px;
    position:relative;
}

.header{
    padding-bottom:40px;
    height:auto;
    width:100%;
    float:left;
    background:blue;
    position:absolute;
}

#menu-usuario {
    width:100%;
    height:25px;
    cursor: pointer;
    position: absolute;
    background:green;
}

#menu-usuario a{text-decoration:none;}

#menu-usuario-conteudo {
    height:200px;
    background:gray;
    overflow:hidden;
    padding:20px 0;
    display: none;
}

.force-margin{
	margin-top: 300px !important;
}

JavaScript

$("#menu-usuario").click(function(){
    $("#menu-usuario-conteudo").slideToggle("slow");
    $("#container").toggleClass("force-margin")
});