JSFiddle - React, Tailwind, and code Playground

by Zeaklous

HTML

<div id="top-bg" class="bg"></div>
<div id="top" class="bg">
    <div id="triangolo"></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(){

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

});