JSFiddle - React, Tailwind, and code Playground
HTML
<div class="header">
<nav>
<ul>
<li><a id="flip" href="#">Home</a></li>
<li><a id="flip2" href="#">Agenda</a></li>
<li><a id="flip3" href="#">Media</a></li>
<li><a id="flip4" href="#">Contact</a></li>
</ul>
</nav>
<div id="Container">
<div id="layer">
<div id="panel">
<div id="content">Anatomy</div>
</div>
<div id="panel2">
<div id="content">Anatomy is</div>
</div>
<div id="panel3">
<div id="content">Anatomy is destiny.</div>
</div>
<div id="panel4">
<div id="content">Anatomy is destiny555.</div>
</div>
</div>
</div>
</div>
CSS
body
{
margin:0;
background-color: black;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
color:white;
font-family: 'Open Sans',arial,sans-serif;
text-align:center;
}
#panel,#flip,#flip2,#flip3,#flip4,#panel2,#panel3,#panel4
{
text-align:left;
width:100%;
}
#panel,#panel2,#panel3,#panel4
{
padding-bottom:50px;
display:none;
border-right-width:1px;
border-style:solid;
border-width:1px;
border-color: #727272;
}
#content{
padding:50px;
color:white;
font-family: 'Open Sans',arial,sans-serif;
}
.header
{
margin:100px auto;
color: #333;
background-color: #CCCCCC;
text-align: left;
height: 20px;
width:60%;
min-width: 600px;
border-width: 0;
border-style: solid;
border-color: #CCCCCC;
border-right-width: 2px;
}
nav
{
display: inline-block;
}
nav ul
{
list-style-type: none;
margin:0;
padding:0;
}
nav li
{
display: inline-block;
}
nav a
{
font-size: 15px;
font-family: 'Open Sans',arial,sans-serif;
color: #181818;
text-decoration: none;
padding-right:10px;
padding-left:8px;
text-transform: uppercase;
opacity: 0.6;
transition: opacity 0.2s linear 0s ;
}
nav a:hover
{
/* background-color: #F0F0F0; */
opacity:1;
}
nav a:active
{
/* background-color: #F0F0F0; */
}
JavaScript
$(document).ready(function(){
$("#flip").click(function(){
$("#panel").slideToggle("fast");
});
$("#flip2").click(function(){
$("#panel2").slideToggle("fast");
});
$("#flip3").click(function(){
$("#panel3").slideToggle("fast");
});
$("#flip4").click(function(){
$("#panel4").slideToggle("fast");
});
});