JSFiddle - React, Tailwind, and code Playground

by moob

HTML

<div id=wrapper>
	<input type=checkbox> 
	<div id=menu>
		<ul>
			<li>A</li>
			<li>LIST</li>
			<li>OF</li>
			<li>MENU</li>
			<li>ITEMS</li>
			<li>WILL</li>
			<li>GO</li>
			<li>HERE</li>
		</ul>
	</div>
	<div id=page><h2>This is my page</h2><h2>This is my page</h2><h2>This is my page</h2><h2>This is my page</h2><h2>This is my page</h2><h2>This is my page</h2><h2>This is my page</h2><h2>This is my page</h2><h2>This is my page</h2><h2>This is my page</h2><h2>This is my page</h2><h2>This is my page</h2><h2>This is my page</h2><h2>This is my page</h2><h2>This is my page</h2><h2>This is my page</h2></div>
</div>

CSS

/* Hide checkbox and reset styles */
input[type="checkbox"] {
	appearance: initial; 
	-webkit-appearance: initial; 
	-moz-appearance:initial;
	border-top-left-radius: 10px; 
	border:0; margin: 0; outline: none; 
	width: 30px; height: 30px; 
	z-index: 1; 
}

* {box-sizing:border-box;}

/* Menu icon */
input::after { 
	border-top-left-radius: 10px;
	content: '\2255'; 
	display: block; 
	font: 25pt/30px 'georgia'; 
	text-indent: 10px; 	
	transition-delay: .25s;
	width: 100%; height: 100%;
}

#page{
	background: url('photo-1504274066651-8d31a536b11a?w=668&q=80') #ebebeb center/cover; 
	padding: 40px;
	transform-origin: left top;
	transform: rotateY(0deg) translateX(0px);
	transition: all 0.9s ease;
	width: 100%;
  min-height: 100%;
	
}


/* When menu is open, transform the page */
input:checked ~ #page { 
transform: rotateY(45deg) translateX(500px) translateZ(00px) scale(1.25);
	
	transition: all .9s ease; 
	-webkit-mask-image: -webkit-gradient(linear, left top, 
    right top, from(rgba(0,0,0,1)), to(rgba(0,0,0,0.2)));
} 

input:checked::after {
	background: #1e3232;
	content: '\00d7';
	color: #ebebeb;
	transition-delay: -0.3s;
} 

#menu, #pge, input{ position: absolute; }

html, body {height: 100%; margin: 0; min-height: 100%;}
#wrapper {
	
	-webkit-perspective: 500px;
          perspective: 1000px;
	background: linear-gradient(45deg, black, darkslategrey);
	display:block;
	position:relative;
}

ul {
	background: linear-gradient(orange 20%, powderblue);
	background-clip: text; 
	-webkit-background-clip: text; 
	color: transparent; 
	font: bold 15pt/30pt sans-serif;
	margin-top: 50px;
}

li:hover {color:magenta}

JavaScript

document.querySelector("#page").addEventListener('click', (e, checkbox = document.querySelector('input'))=>{ 
			if(checkbox.checked) { checkbox.checked = false; e.stopPropagation(); }
		});