JSFiddle - React, Tailwind, and code Playground

by ChaseWest

HTML

<header>
    <ul>
        <li><a href="#home" data-link="home" class="active">Home</a>

        </li>
        <li><a href="#about" data-link="about">About</a>

        </li>
        <li><a href="#gallery" data-link="gallery">Gallery</a>

        </li>
        <li><a href="#contact" data-link="contact">Contact</a>

        </li>
    </ul>
</header>
<div id="container">
    <div id="home" class="box active">
        <div class="section">
            <p>This is the home section.</p>
        </div>
    </div>
    <div id="about" class="box">
        <div class="section">
            <p>This is the about section.</p>
        </div>
    </div>
    <div id="gallery" class="box">
        <div class="section">
            <p>This is the gallary section.</p>
        </div>
    </div>
    <div id="contact" class="box">
        <div class="section">
            <form>
                <input placeholder="Name" title="Your Name" required />
                <input placeholder="Email" type="email" title="Your Email Address" required />
                <input placeholder="Date Requested" title="The date you would like to book" type="date" required />
                <input type="submit" value="Send" />
            </form>
        </div>
    </div>
</div>

CSS

body {
    padding: 0px;
    font-family: helvetica;
}
header {
    z-index: 3;
    position: fixed;
    padding: 15px;
    background: rgba(0, 0, 0, 0.2);
    width: 100%;
    box-shadow: 0px .5px 0px 0px;
}
ul {
    list-style: none;
}
li {
    display: inline;
}
a {
    text-decoration: none;
    padding: 15px;
    color: pink;
    font-size: 20px;
}
header a:hover {
    color: gray;
    background: pink;
    transition: all .2s ease-in-out;
}
#container {
    position: absolute;
    margin: 0px;
    padding: 0px;
    width: 100%;
    height: 100%;
}
.box {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
}
#home, #about, #gallery, #contact {
    display: table;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}
.section {
    display: table-cell;
    vertical-align: middle;
    background: rgba(0, 0, 0, 0.4);
    color: white;
    text-align: center;
}
div.active {
    z-index: 2;
    transition: all 0s linear;
}
a.active {
    color: gray;
    background: pink;
}
#home {
    background: url(https://fbcdn-sphotos-c-a.akamaihd.net/hphotos-ak-xfa1/t31.0-8/10633990_10102213024577930_5510969667862903406_o.jpg) no-repeat center center fixed;
    background-size: 100%;
}
#about {
    background: url(https://scontent-a-dfw.xx.fbcdn.net/hphotos-xpa1/t31.0-8/1531899_10102212952966440_5810905570070080770_o.jpg) no-repeat center center fixed;
    background-size: 100%;
}
#gallery {
    background: url(https://fbcdn-sphotos-g-a.akamaihd.net/hphotos-ak-xpf1/t31.0-8/p960x960/10470267_10102253403992260_4491166039345883547_o.jpg) no-repeat center center fixed;
    background-size: 100%;
}
#contact {
    background: url(https://fbcdn-sphotos-a-a.akamaihd.net/hphotos-ak-xaf1/t31.0-8/p960x960/1911972_10102253401058140_5451743774625491451_o.jpg) no-repeat center center fixed;
    background-size: 100%;
}
form {
    width: 200px;
    margin: 0 auto;
}
input {
    display: block;
 ...

JavaScript

$('a').click(function (e) {
    e.preventDefault();

    var $this = $(this),
        $div = $("#" + $this.data("link")),
        $activeDiv = $("div.active"),
        $activeLink = $("a.active");


    $activeLink.removeClass("active");
    $this.addClass("active");

    $activeDiv.removeClass("active");
    $div.addClass("active");
});