JSFiddle - React, Tailwind, and code Playground

HTML

<body>
<div id="obsah">
<span id="logo">logoooooo</span>
<div id="menu">
<ul>	
	<li><span id="about">About</span></li>
	<li><span id="work">Work</span></li>
	<li><span id="gallery">Gallery</span></li>
	<li><span id="contact">Contact</span></li>
</ul>
</div>
<div id="sliding-content">
 
    <div class="contentbox-wrapper">
 
        <div id="about" class="contentbox">
            <h3>O nás</h3>

            <p>sit amet, consectetuer adipiscing elit. Suspendisse et turpis sed metus fermentum pellentesque. Vestibulum auctor neque ac nunc elementum malesuada. Praesent non est sed libero vestibulum consectetuer. Sed vehicula. Vivamus quis tellus sit amet erat ultrices luctus. Fusce a ligula. Fusce viverra libLorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse et turpis sed metus fermentum pellentesque. Vestibulum auctor neque ac nunc elementum malesuada. Praesent non est sed libero vestibulum consectetuer. Sed vehicula. Vivamus quis tellus sit amet erat ultrices luctus. Fusce a ligula. Fusce viverra libero vitae velit. Aenean bibendum nibh non lorem. Suspendisse quis velit. Integer sit amet lacus. Curabitur tristique. Morbi eu lectus. Vestibulum tristique aliquam quam. Sed neque.</p>

            <p>sit amet, consectetuer adipiscing elit. Suspendisse et turpis sed metus fermentum pellentesque. Vestibulum auctor neque ac nunc elementum malesuada. Praesent non est sed libero vestibulum consectetuer. Sed vehicula. Vivamus quis tellus sit amet erat ultrices luctus. Fusce a ligula. Fusce viverra libLorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse et turpis sed metus fermentum pellentesque. Vestibulum auctor neque ac nunc elementum malesuada. Praesent non est sed libero vestibulum consectetuer. Sed vehicula. Vivamus quis tellus sit amet erat ultrices luctus. Fusce a ligula. Fusce viverra libero vitae velit. Aenean bibendum nibh non lorem. Suspendisse quis velit. Integer sit amet lacus. Curabitur tristique. Morbi eu lectus. Vestibulum...

CSS

* {
	margin: 0;
}
html {
	height: 100%;
}

body {
	margin:0px auto;
	padding:0px;
	background-color: lightblue;
	font-family: 'Dosis', sans-serif;
	height: 100%;
}

a {
	text-decoration:none;
	color: #000;
}

#obsah {	
	margin:0px auto;
	position:relative;
	width:900px;
	padding:0px;
	
	min-height: 100%;
	height: auto !important;
	height: 100%;
	margin: 0 auto -30px;
}
#content {
	width:900px;
	overflow:hidden;
}
#sliding-content {
	height:auto;
	margin:0px auto;
	overflow:hidden;
	position:relative;
}
.contentbox-wrapper{
    position:relative;
    left:0;
    height:auto;
	background-color: #fff;
}
 
.contentbox{
	/*background-color: #fff;*/
    width:880px;
    float:left;
    padding:10px;
	position:relative;
}
#menu {
	margin:0px auto;
	height:35px;
	position:relative;
}

#menu ul {
	padding: 5px;
	list-style-type: none; 
	list-style-image: none;
	font-family: 'Dosis', sans-serif;
	font-size: 17px;
	font-weight: 500;
	margin:0 auto;
}

#menu li {
	display: inline; 
}

#menu ul li span {
	text-decoration:none;  
	margin: 4px;
	padding: 5px 20px 5px 20px; 
	color: #777;
}

#menu ul li span:hover {
	color: #555;
	cursor: pointer;
	cursor: hand;
}

#logo {	
	width:250px;
	height:60px;
	box-sizing: border-box;
}

.toggle {
    text-align: left;	
	width: 900px;
	float: left;
	background: transparent;
	border-bottom: 1px solid #e0e0e0;
	cursor: pointer;
	display:inline;
}
	
.toggleContent {
    margin-left: 0px;
    text-align: left;
	float: left;
	background: #f0f0f0;
	display: none;
	font-weight: 500;
	font-size: 14px;
}

.wrapper {
}

.push {
	height:30px;
}

#footer{ 
	position: relative;
	margin:0 auto;
	margin-bottom:20px;
	font-family: "Segoe UI", Frutiger, Tahoma, "Helvetica", "Helvetica Neue", Arial, sans-serif;
	font-weight: 300;
	font-size:11px;
	width:200px;
	height:30px;
	text-align:center;
	/*padding:10px;*/
	background-color:white;	
}

JavaScript

$(document).ready(function () {
function goto(id){
    $('.contentbox-wrapper').animate({'left': -($(id).position().left)}, {"queue": false, "duration": 600})
							.animate({'height' : ($(id).outerHeight(true))}, 600);
	$('#sliding-content').animate({'height' : ($((id)).outerHeight(true))}, 600);
}

$('#menu ul li span#about').click(function(){
goto('#about.contentbox', this); 
return false
});

$('#menu ul li span#work').click(function(){
goto('#work.contentbox', this); 
return false
});

$('#menu ul li span#gallery').click(function(){
goto('#gallery.contentbox', this); 
return false
});

$('#menu ul li span#contact').click(function(){
goto('#contact.contentbox', this); 
return false
});

	$('.toggle').click(function() {
		$('.toggle').removeClass('on');
	 	$('.toggleContent').slideUp('normal');

		
		if($(this).next().is(':hidden') == true) {
			$(this).addClass('on');
			$(this).next().slideDown('normal', function(){
			});
		} 
	});
	 
	$('.toggleContent').hide();
$(".contentbox-wrapper").width($('#about.contentbox').outerWidth(true) + $('#work.contentbox').outerWidth(true) + $('#gallery.contentbox').outerWidth(true) + $('#contact.contentbox').outerWidth(true))

$('.contentbox-wrapper').height($('#about.contentbox').outerHeight(true)-11);
//$('#content').width($('.contentbox').outerWidth(true))
});