JSFiddle - React, Tailwind, and code Playground

by murb83

HTML

<body id="body">
    <div id="wrap">
        <div id="baseLeftBg">
        </div>
        <div id="baseContent">
        </div>
        <div id="baseRightBg">
        </div>
    </div>
</body>

CSS

#body {
    text-align: center;
    height: 100%;
    margin: 0 auto;
    padding: 0px;
    background: #ffffff;
    -moz-background-size: cover;
    background-size: cover;
    float: inherit;
}

#wrap { 
    margin-top: 5%;
    position: absolute;
    left: 50%;
    margin-left: -250px;
    width: 500px;
    height: 300px;
}

#baseLeftBg {
    background: #CDCDCD;
    width: 100px;
    height: 300px;
    float: left;
}

#baseContent {
    background: #A7A7A7;
    width: 300px;
    height: 300px;
    float: left;
}

#baseRightBg {
    background: #CDCDCD;
    width: 100px;
    height: 300px;
    float: left;
}

JavaScript

/*
$(window).resize(function(){
  $('#wrap').css({
    position:'absolute',
    left: ($(window).width() - $('#wrap').outerWidth())/2,
    top: ($(window).height() - $('#wrap').outerHeight())/2
  });
});



// To initially run the function:
$(window).resize();


var $scrollingDiv = $("#wrap");
     $(window).scroll(function(){            
        $scrollingDiv.stop().animate({"marginTop": ($(window).scrollTop() + 0) + "px"}, 500, 'easeInOutSine' );            
     });
*/