JSFiddle - React, Tailwind, and code Playground

by mrKhatter

HTML

<!DOCTYPE html>
<html lang="ru">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
	<title></title>
	<style>
		html,body{padding: 0; margin: 0;}
		.active{display: inherit;}
		.overlay{background: rgba(0,0,0,.6);position: absolute;z-index: 1;width: 100%;height: 100%;}
		.menu,.searchBox,.cabinetBox,.cartBox{ width: auto; background: #fff;position: relative;z-index: 2;}
		.menu{position: absolute;}
		.hide{display: none;}
	</style>
</head>
<body>
	<div class="overlay hide"></div>
	<nav>
		<a href="#burger">burger</a>
		<ul class="menu hide">
			<li><a href="#" class="subMenuOpen">1 +</a>
				<ul class="subMenu hide">
					<li><a href="#">1.1</a></li>
					<li><a href="#">1.2</a></li>
					<li><a href="#">1.3</a></li>
				</ul>
			</li>
			<li><a href="#">2</a></li>
			<li><a href="#">3</a></li>
			<li><a href="#">4</a></li>
			<li><a href="#" class="subMenuOpen">5 +</a>
				<ul class="subMenu hide">
					<li><a href="#">1.1</a></li>
					<li><a href="#">1.2</a></li>
					<li><a href="#">1.3</a></li>
				</ul>
			</li>
			<li><a href="#">6</a></li>
			<li><a href="#">7</a></li>
			<li><a href="#">8</a></li>
		</ul>
		<a href="#search">search</a>
		<a href="#cabinet">cabinet</a>
		<a href="#cart">cart</a>
		<div class="searchBox hide">
			<input type="text" name="search" placeholder="Поиск..."><button name="btnSearch" id="btnSearch" type="submit">Искать</button>
		</div>
		<div class="cabinetBox hide">
			<input type="text" name="name" placeholder="имя">
			<input type="password" name="pass" placeholder="pass"><a href="#viewPass">viewPass</a>
			<button name="btnSignIn" type="submit">Войти</button>
			<button name="btnSignUp" class="hide" type="submit">Зарегистрироваться</button>
			<a href="#signUp">Зарегистрироваться</a>
			<a href="#signIn" class="hide">Войти</a>
		</div>
		<div class="cartBox hide">
			CARTBOX
		</div>
	</nav>
	<section...