JSFiddle - React, Tailwind, and code Playground

by stofke

HTML

<div id="top"></div>
    <!-- if you rename the div id's be sure to also adapt the jquery code accordingly in the sroll.js file -->
    <div id="div1">
<a href="#" class="show_hide">Show/hide</a>
<div id="slickbox">
Fill this space with really interesting content. 
    <a href="#" class="show_hide">hide</a></div>
    </div>
    <div id="div2">
    </div>
    <div id="div3">
        
        </div>
    <div id="div4">
        
        </div>
    <div id="footer">
        <ul>
            <li><a class="scroll" href="#div1">Nav item 1</a></li>
            <li><a class="scroll" href="#div2">Nav item 2</a></li>
            <li><a class="scroll" href="#div3">Nav item 3</a></li>
            <li><a class="scroll" href="#div4">Nav item 4</a></li>
        </ul>
    </div>

CSS

body {
    min-width: 960px;
    width: auto;
    padding: 0;
    margin: 0;
    font-family: "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
    
}

#div1, #div2, #div3, #div4 {
    min-height: 600px;
    width: 100%;
    height: 100%;
    text-align: left;
     margin-top:50px;
}

#div1 {
    background-color: green;
   
}

#div2 {
    background-color: blue;
    height: 1200px; /* set height to the required height for div 2*/
}

#div3 {
    background-color: red;
}

#div4 {
    background-color: lightblue;
}
/* set the nav fixed at the bottom */
#top{
    position: fixed;
    width: 100%;
    top: 0px;
    left: 0px;
    height: 50px;  /*set the height of the nav*/
    background-color: black;
}
#footer{
    position: fixed;
    width: 100%;
    bottom: 0px;
    left: 0px;
    height: 50px;  /*set the height of the nav*/
    background-color: orange;
}

ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

li {
    float: left;
    padding:10px;
}

nav a {
    display: block;
    width: 100px;
    padding-left: 10px;
    color: black;
    text-decoration: none;
    line-height: 50px;
}
#slickbox {
    height:300px;
    background-color: #99CCFF;
    padding:20px;
    border-bottom:5px solid #3399FF;
    display:none;
}
 
.show_hide {
    display:block;
    padding:50px;
}

JavaScript

$('.show_hide').click(function() {
    $('#slickbox').toggle(400);
    return false;
});