JSFiddle - React, Tailwind, and code Playground

by Stas Orekhovskiy

HTML

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">	
	<title>Document</title>
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
	<div class="wrapper">
		<div class="header">
			<div class="click"></div>
		</div>
		<div class="container clear">
			<div class="content">
				Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et, facilis enim molestias voluptatum possimus praesentium impedit in similique dicta aliquam eveniet fuga ex velit. Ipsa minima aperiam commodi? Alias possimus, error libero pariatur ea sed dolorem, nostrum ratione nesciunt dignissimos ut. Culpa dignissimos asperiores soluta maiores, voluptas adipisci nihil. Asperiores iure pariatur, delectus repellendus iusto neque sed facere, natus soluta inventore fugit velit laboriosam dolorum minima quasi accusamus voluptas necessitatibus blanditiis, at fuga similique odit animi illum. Id, consequatur eum illum repellat, vero libero accusamus beatae dolorum, eos sequi expedita natus esse cum ratione? Quam, atque eius quidem rerum at.
			</div>
			<div class="sidebar">
				Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos blanditiis laborum odio, maxime natus voluptatum omnis, impedit saepe aliquam in cumque ad tempora magnam illo, consequatur vero, quisquam veritatis animi sequi deserunt expedita consequuntur! Beatae ullam nemo doloribus eos. Suscipit eveniet quas odio amet distinctio nulla velit cum quam porro, dolores quod explicabo quibusdam pariatur deleniti facere! Nemo itaque commodi quidem officiis, labore quod mollitia asperiores iusto quam voluptatibus cupiditate.
              Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos blanditiis laborum odio, maxime natus voluptatum omnis, impedit saepe aliquam in cumque ad tempora magnam illo, consequatur vero, quisquam veritatis animi sequi deserunt expedita consequuntur! Beatae ullam nemo doloribus eos. Suscipit eveniet quas odio amet...

CSS

*{
	margin: 0;
	padding: 0;
}
* html .wrapper{
	height: 1px;
  min-height: 100%;
}
body{
	height: 100%;
	font-size: 16px;
	background: #eee;
}
ul{
  list-style:none;
}
.clear:after{
	content:'.';
	display:block;
	clear:both;
	visibility:hidden;
	height:0;
}
.clear{
	*min-height:1px
}
.wrapper{
	max-width: 800px;
	width: 100%;
}
.header{
	height: 60px;
	background: red;
}
.container{
	clear: both;
}
.content{
	float: left;
	padding: 10px;
	width: 600px;
	background: blue;
}
.sidebar{
	padding: 10px;
	float: right;
	width: 200px;
	background: #555;
}
.footer{
	background: #fff;
	padding: 20px;
}
.click{
	background: #000;
	height: 25px;
	width: 25px;
	cursor: pointer;
}
.block{
	width: 200px;
	display: none;
	position: absolute;
	height: 100%;
	right: 0;
	top: 0;
	z-index: 9;
	background: #f5f5f5;
	/* background: #fff; */
}
.block li{
	height: 25px;
	line-height: 25px;
	margin: 1px 0;
	background: #fff;
}
.block a{
	text-align: center;
	display: block;
}
.open{
	display: block;
}

JavaScript

$(document).ready(function(){
	$('.click').click(function() {
		$('.block').fadeIn('fast', function() {});
		$('.block').addClass('open');
	});
// 	$('.click').click(function() {
// 		$('.block').fadeOut('fast', function() {});
// 		$('.block').removeClass('open');
// 	});
});