JSFiddle - React, Tailwind, and code Playground

by justinwinter

HTML

<input type="checkbox" name="nav" id="nav_button">

<div class="body">
		<br>
		<h1 align="center">American Paving Co.</h1>
		<label for="nav_button" class="on">Continue</label>
		<p align="center">Policy Portal</p>
		<!-- 	br tag to check scrolling -->
		<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</div>

<div class="side_nav">
		<label for="nav_button" class="off">&Cross;</label>
	<div class="nav_link">
		<a href="#"><li>Employee Handbook</li></a>
		<a href="#"><li>Dispute Resolution Policy</li></a>
		<a href="#"><li>Drug Free Workplace Policy</li></a>
		<a href="#"><li>Company Cellphone Policy</li></a>
    <a href="#"><li>Company Vehicle Fleet Policy</li></a>
    <a href="#"><li>Guide for Determining Accident Preventability</li></a>
    <a href="#"><li>Employee Expense Reimbursement Guidelines</li></a>
    <a href="#"><li>Personal Vehicle Mileage Reimbursement Policy</li></a>
	</div>
</div>

CSS

@import url('https://fonts.googleapis.com/css?family=Muli');
body,html{
	margin: 0 ;
	width: 100%;
	height: 100%;
	background: Black;
}

*{
	font-family: Muli, serif;
}

#nav_button{
	display: none;
}

.body{
	margin: 0 ;
	width: 100%;
	height: 100%;
	background: white;
	float:right;
	transform: matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1);
	left: 0%;
	transition: 0.75s;
	position: relative;
	overflow: auto;
}

.on{
	display:block ;
	width: 100px ;
	padding: 15px;
	background: #4CAF50;
	font-size: 22px;
	font-weight: 600;
	color: #fff;
	text-align: center;
	border-radius: 50px;
	position: absolute;
	top: 300px;
	left: 50%;
	transform: translate(-50%, -50%);
	user-select: none;
	box-shadow: 0px 0px 25px 0px rgba(0,0,0,.75);
	transition: .1s;
}

.on:active{
		box-shadow: 0px 0px 0px 0px rgba(0,0,0,.75);
		transition: .1s;
}

.side_nav{
	position: fixed;
	width: 400px;
	height: 100%;
	background:#f5fcae;
	border-right: solid 8px #fff600; 
	z-index:999;
	left:-400px;
	float: left;
	transition:.75s;
	overflow-y: auto;
	overflow-x: hidden;
}



.nav_link{
	display:block;
	list-style: none;
	text-align: left;
	text-decoration: none;
	font-size: 16px;
	transition: .2s;
}
.nav_link a li{
	padding: 9px;
}
.nav_link a{
	width:100%;
	text-decoration: none;
	color: #000;
	font-weight: 600;
	transition: .3s;
}
.nav_link a li:hover{
	background:#000;
}
.nav_link a:hover{
	color: #fff600;
}

#nav_button:checked ~ .side_nav{
	left: 0;
}

#nav_button:checked ~ .body{
	transform: matrix3d(0.62,0,0.00,-.0002,0.00,0.7,0.00,0,0,0,1,0,0,0,0,1);
	left: 5%;
}

/* this is just to edit scrollbar */
::-webkit-scrollbar{
	background: #fff600;
}