JSFiddle - React, Tailwind, and code Playground

HTML

<div id="top-bg" class="bg"></div>
       <div id="top" class="bg">
       <div id="triangolo"><a href="#" class="bottone"></a>
           </div>
       </div>

CSS

#top{background-color:#0699A9; height:15px;background-repeat:repeat-x; width:100%; margin:0; padding:0; z-index:1; position:relative;}
#triangolo{width: 0; height: 0; line-height: 0px; border-top: 40px solid #0699A9; border-left: 40px solid transparent; border-right: 0; float:right;}
.bottone{margin-right:0; padding:0; float:right;}
#top-bg{background-color: #0CADBE; height: 50px; border-bottom:7px solid #0699A9;background-repeat:repeat-x; width:100%; margin:0; padding:0; display:none; position:relative;}
.bg{position:fixed; top:0; left:0; width:100%; height:100%;}

JavaScript

$(document).ready(function(){

$(".bottone").click(function(){
$("#top-bg").slideToggle("slow");
$(this).toggleClass("active"); return false;
});

});