JSFiddle - React, Tailwind, and code Playground

by wrxsti85

HTML

<div id="wrapper">

<div id="header">Header</div>
<div id="navigation">
    <ul>
        <li class="goHome"><a>Home</a></li>
        <li class="goAbout"><a>About Us</a></li>
        <li class="goContact"><a>Contact Us</a></li>
        <li class="goNews"><a>News</a></li>
    </ul>
</div>

<div id="content">
    <div id="home">
        <br /><br />
        
        <h1>Home</h1>
    
        <br /><br />
        When Josh Hamilton hit four home runs against the Orioles on Tuesday, he became just the 16th man in baseball history to accomplish the feat. More men (21) have thrown perfect games. Hamilton's performance was even more impressive than that, however. When you factor in the fact that Hamilton went 5-for-5 on the night, mixing a double in among his four homers, it could be argued that his was one of the handful of best single-game hitting performances in major league history.
The two most important things a hitter can do, independent of his teammates, is avoid outs and hit for extra bases. Four home runs add up to 16 total bases. Since 1918, just five men have totaled 16 total bases in a game. Hamilton is one of them. Nineteenth-century four-homer men Bobby Lowe and Ed Delahanty can be added to that list, but both fell short of Hamilton at 17 total bases. Only one man has ever hit for more total bases in a single game than Hamilton's 18. That was Shawn Green, who collected 19 for the Dodgers in 2002. Meanwhile, of the 17 men to have produced 16 or more total bases in a single game since 1918, plus Lowe and Delahanty, just eight did so without making an out. Hamilton is one of those eight as well.
        <br /><br />
        
    </div>
    
    
    <div id="about"><br /><br /><h1>About Us</h1></div>
    <div id="contact"><br /><br /><h1>Contact Us</h1></div>
    <div id="news"><br /><br /><h1>News</h1></div>
    
</div>
    
    <div id="footer">Footer</div>
    
</div>

<script src="http://code.jquery.com/jquery-latest.js"></script>

CSS

#wrapper {
    width:400px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 20px;
}

#header {
    background-color:#bca;
    width:400px;
    height: 40px;
    border:1px solid green;
    font-size: 16px;
    text-align: center;
}

#navigation ul li {
    display: inline-block;
    margin-left:10px;
    margin-right:10px;
}

#navigation {
    background-color:#bca;
    width:400px;
    height: 20px;
    border:1px solid green;
    font-size: 16px;
    text-align: center;
    border-top: 0px;
}

#content {
    position: relative;
    top:-1px;
}

#home {
    background-color:#bca;
    width:400px;
    height: 400px;
    border:1px solid green;
    font-size: 1em;
    text-align: center;
    position: absolute;
    overflow: auto;
}

#about {
    background-color:#bca;
    width:400px;
    height: 0px;
    border:1px solid green;
    font-size: 0px;
    text-align: center;
    position: absolute;
    overflow: auto;
}

#contact {
    background-color:#bca;
    width:400px;
    height: 0px;
    border:1px solid green;
    font-size: 0px;
    text-align: center;
    position: absolute;
    overflow: auto;
}

#news {
    background-color:#bca;
    width:400px;
    height: 0px;
    border:1px solid green;
    font-size: 0px;
    text-align: center;
    position: absolute;
    overflow: auto;
}

#footer {
    background-color:#bca;
    width:400px;
    height: 20px;
    border:1px solid green;
    font-size: 16px;
    text-align: center;
    position: relative;
    top: 400px;
}

h1 {
    font-size: 20px;
    font-weight: 600;
}

JavaScript

$(".goHome").click(function() {
    $("#home").delay(850).animate({
        height: "400px",
        opacity: 1.0,
        fontSize: "1em",
        borderWidth: "1px"
    }, 850);

    $("#contact").animate({
        height: "0px",
        opacity: 0,
        fontSize: "0em",
        borderWidth: "1px"
    }, 850);

    $("#news").animate({
        height: "0px",
        opacity: 0,
        fontSize: "0em",
        borderWidth: "1px"
    }, 850);

    $("#about").animate({
        height: "0px",
        opacity: 0,
        fontSize: "0em",
        borderWidth: "1px"
    }, 850);
});

$(".goAbout").click(function() {
    $("#home").animate({
        height: "0px",
        opacity: 0,
        fontSize: "0em",
        borderWidth: "1px"
    }, 850);

    $("#contact").animate({
        height: "0px",
        opacity: 0,
        fontSize: "0em",
        borderWidth: "1px"
    }, 850);

    $("#news").animate({
        height: "0px",
        opacity: 0,
        fontSize: "0em",
        borderWidth: "1px"
    }, 850);

    $("#about").delay(850).animate({
        height: "400px",
        opacity: 1.0,
        fontSize: "1em",
        borderWidth: "1px"
    }, 850);
});

$(".goContact").click(function() {
    $("#home").animate({
        height: "0px",
        opacity: 0,
        fontSize: "0em",
        borderWidth: "1px"
    }, 850);

    $("#contact").delay(850).animate({
        height: "400px",
        opacity: 1.0,
        fontSize: "1em",
        borderWidth: "1px"
    }, 850);

    $("#news").animate({
        height: "0px",
        opacity: 0,
        fontSize: "0em",
        borderWidth: "1px"
    }, 850);

    $("#about").animate({
        height: "0px",
        opacity: 0,
        fontSize: "0em",
        borderWidth: "1px"
    }, 850);
});


$(".goNews").click(function() {
    $("#home").animate({
        height: "0px",
        opacity: 0,
        fontSize: "0em",
        borderWidth: "1px"
    }, 850);

    $("#contact").animate({
        height: "0px",
  ...