JSFiddle - React, Tailwind, and code Playground

by BandonRandon

HTML

<div id="top-menu">
    <ul>
        <li class="about"><a href="#">About</a>
        </li>
        <li><a href="#">The App</a>
        </li>
        <li><a href="#">test 3</a>
        </li>
    </ul>
</div>
<div id="menu">
    <ul>
        <li><a href="#">test 1</a>
        </li>
        <li><a href="#">test 2</a>
        </li>
        <li><a href="#">test 3</a>
        </li>
    </ul>
</div>
<div id="content-1"> <a href="#" id="close"> X</a>

    <p>some content</p>
</div>

CSS

#content-1 {
    display:none;
    width:10em;
    height:10em;
    background-color:#eeeeee;
    border: solid 3px #999;
}
.selected {
    color:#FF0000;
}
body {
    -webkit-transition: background 300ms ease-in 200ms;
    /* property duration timing-function delay */
    -moz-transition: background 300ms ease-in 200ms;
    -o-transition: background 300ms ease-in 200ms;
    transition: background 300ms ease-in 200ms;
}
}

JavaScript

$('#menu ul li a').on('click', function (e) {
    $('#menu').fadeOut();
    $('#content-1').delay(500).fadeIn();

});
$('#top-menu ul li.about a').on('click', function (e) {
    $('body').css('background-color', '#444').fadeIn();
$(this).addClass("selected");

});
$('#close').on('click', function (e) {
    $('#content-1').fadeOut();
    $('#menu').delay(500).fadeIn();

});