JSFiddle - React, Tailwind, and code Playground

by Lalji Tadhani

HTML

<!DOCTYPE html>
<html lang="pt-br">
<head>

	<title></title>

	<meta charset="utf-8">

	<link rel="stylesheet" type="text/css" href="css/style.css">

	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

</head>
<body>

	<header>

		<button class="abre-menu">Abrir</button>

		<nav>

			<button class="fecha-menu">Fechar</button>

			<h1>MENU</h1>
			<a href="#c1" class="page-scroll"><h4>home</h4></a>
			<a href="#c2" class="page-scroll"><h4>sobre</h4></a>
			<a href="#c3" class="page-scroll"><h4>trabalhos</h4></a>
			<a href="#c8" class="page-scroll"><h4>cursos</h4></a>
			<a href="#c9" class="page-scroll"><h4>contato</h4></a>
		</nav>
	</header>

	<div id="teste"></div>


<script type="text/javascript" src="js/main.js"></script>
<!--<script type="text/javascript" src="js/scroll.js"></script>-->
</body>
</html>

CSS

*{
	padding: 0;
	margin: 0;
	max-width: 100vw;
	overflow-x: hidden;
}

body, html{
	height: 100%;
	width: 100%;
}

header{
	height: 100%;
	width: 10vw;

	position: fixed;

	top: 0;
	left: 0;

	background: rgba(255,0,0,0.5);
}

.abre-menu, .fecha-menu{
		display: none;
	}



@media (max-width: 768px){
	.abre-menu, .fecha-menu{
		display: block;
	}
}



#teste{
	min-height: 5000px;
}