JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<!DOCTYPE html>
    <body>
        <div class="body-wrapper">
            <div class="header">
            </div>
            <div class="sidebar">
                <div class="menu">
                        <ul>
                            <li class="menuLink" data-id="one">FIRST</li>
                            <li class="menuLink" data-id="two">SECOND</li>
                            <li class="menuLink" data-id="three">THIRD</li>
                            <li class="menuLink" data-id="four">FOURTH</li>
                        </ul>
                </div>
            </div>
            
            <div class="content">
                <div id="one" class="page">
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ac turpis ullamcorper odio tempor hendrerit eget luctus metus. Aenean volutpat tellus porta, elementum purus eu, gravida est. Curabitur nec ligula ac mauris aliquam egestas. Cras non sem ipsum. Morbi id ultricies est, non sodales nisi. Ut adipiscing hendrerit mollis. Maecenas sollicitudin lacus sed faucibus aliquet.</p><p>
Ut vitae vehicula augue. Morbi elit velit, sagittis quis erat et, molestie dignissim tortor. Nunc posuere, purus ut pharetra varius, metus ipsum imperdiet ante, in mattis diam ante nec ligula. Praesent euismod est odio, ac lacinia lacus dapibus quis. Fusce in ante id leo lobortis rutrum non ut quam. Maecenas non mauris id ante hendrerit semper id non velit. Cras nec tortor mattis, faucibus purus id, ullamcorper tellus. Maecenas egestas faucibus sapien, vel aliquet diam rutrum id. Nulla sed faucibus turpis. In erat leo, laoreet id consectetur id, scelerisque id augue. Fusce consectetur urna non risus dignissim tincidunt eu ac urna. Sed semper venenatis ullamcorper. Fusce imperdiet libero eu feugiat dapibus. Nulla dui odio, volutpat eu diam ut, pharetra pharetra enim.</p>
                </div>
                <div...

CSS

html {
    background-color:#e88a44;
    background-repeat:no-repeat;
    background-position:center center;
    background-attachment: fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    padding:0;
    margin:0;
    font-family:'Inconsolata';
    height:100%;
}
::selection {
    color:#000;
    background:rgba(255, 146, 0, 0.7);
}
p {
    font-size:18px;
    margin-top:0px;
}
body{
    height:100%;
    margin:0;
    padding:0;
}
.body-wrapper {
    height:100%;
    padding:0 10px;
    margin: 0 auto;
    max-width: 980px;
    min-width:205px;
    font-size: 14px;
    line-height: 1.5em;
    color: #333333;

}
.header {
    height:160px;
    background-repeat:no-repeat;
    background-position:10px center;
    background-color:rgba(255, 255, 255, 0.6);
    box-shadow:0px 0px 50px rgba(255, 255, 255, 0.4);
    border-radius:5px;
    margin-bottom:10px;
}
.content {
    float:right;
    width:80%;
    border-radius:5px;
    background-repeat:no-repeat;
    background-position:bottom right;
    background-color:rgba(255, 255, 255, 0.6);
    box-shadow:0px 0px 50px rgba(255, 255, 255, 0.4);
}
.footer {
    float:left;
    width:100%;
    min-height:30px;
    margin-top:10px;
    margin-bottom:10px;
    border-radius:5px;
    background-color:rgba(255, 255, 255, 0.6);
    box-shadow:0px 0px 50px rgba(255, 255, 255, 0.4);
}
.footer li {
    list-style:none; 
    float:left;
    margin-right:30px;
    color:rgba(0, 0, 0, 0.5);
}
.footer ul {
    width:500px;
    margin:auto;
    margin-top:5px;
}
.menu{

    width:185px;
    height:590px;   
    float:left;
    border-radius:5px;
    background-color:rgba(255, 255, 255, 0.6);
    box-shadow:0px 0px 50px rgba(255, 255, 255, 0.4);
}
.menu ul{
    width:160px;
    padding:0;
    margin:0;
}
.menu li {
    padding:0;
    list-style:none;
    height:40px;
    width:185px;
    margin: 10px 0px;
    cursor:pointer;
    background-repeat:no-repeat;
    background-position:...

JavaScript

var responsive = function() {
    
    var winH =(($(window).height()));
    var winW =(($(window).width()));
    var contentH =(($('.content').height()));
    var htmlH =(($(document).height()));
    var menuW =(($('.menu').width()));
    var bwrapW =(($('.body-wrapper').width()));
    var headW =(($('.header').width()));
    $('.backtotop').css({'margin-top':(winH-48) +'px'});
    var ua = navigator.userAgent.toLowerCase();
    var isAndroid = ua.indexOf("android") > -1; //&& ua.indexOf("mobile");
    if(isAndroid) {
       
    } else {
      
    }
    
    if (bwrapW <= 700){
        $('.menu').css({'height':220 +'px'});
        $('.menu').css({'margin-bottom':10 +'px'});
        $('.menu').css({'width':bwrapW +'px'});
        $('.menu ul').css({'margin-top':5 +'px'});
        $('.menu li').css({'height':35 +'px'});
        $('.menu li').css({'margin':0 +'px'});
        $('.menu li').css({'width':bwrapW +'px'});
        $('.menu li').css({'background-position':'center center'});
        $('.body-wrapper').css({'min-height': winH +'px'});
        $('body').css({'min-height':winH +'px'});
        $('.menu').css({'float':+'none'});
        $('.content').css({'float':+'none'});
        $('.fb-like-box').css({'display':'none'});
        $('.footer ul').css({'display':'none'});
        $('.foot-fb').css({'display':'block'});
        var footW =(($('.footer').width()));
        $('.foot-fb').attr('data-width' , (footW-20));
        $('.footer').css({'padding-bottom':'15px'});
        $('.content').css({'width':bwrapW +'px'});
        $('#backtotop').css({'right':(winW/2 + 40) + 'px'});
        $('.header').css({'background-image':'url(' + 'files/header2.png' + ')'});
        $('.header').css({'background-position':'center center'});
        if (bwrapW <= 450){
            $('.header').css({'background-size':(headW-10) +'px ' + ((headW-10)/1.5857142857142857142857142857143) +'px '});
            $('.header').css({'height':((headW)/1.5857142857142857142857142857143)...