JSFiddle - React, Tailwind, and code Playground

by AmaiSaeta

HTML

<header>
	<span class="hamburger-menu">
		<label>
			<input type="checkbox" id="check">
			<span class="button">[BUTTON]</span>
			<div class="backdrop"></div>
			<ul class="menu">
				<li><a href="http://www.google.com/" target="_blank">menu1</a></li>
				<li>menu2</li>
				<li>menu3</li>
			</ul>
		</label>
	</span>
	<span class="title">[TITLE]</span>
</header>

<p>abcdefghijklmnopqrstuvwxyz</p>
<p>abcdefghijklmnopqrstuvwxyz</p>
<p>abcdefghijklmnopqrstuvwxyz</p>
<p>abcdefghijklmnopqrstuvwxyz</p>
<p>abcdefghijklmnopqrstuvwxyz</p>
<p>abcdefghijklmnopqrstuvwxyz</p>
<p>abcdefghijklmnopqrstuvwxyz</p>
<p>abcdefghijklmnopqrstuvwxyz</p>
<p>abcdefghijklmnopqrstuvwxyz</p>
<p>abcdefghijklmnopqrstuvwxyz</p>
<p>abcdefghijklmnopqrstuvwxyz</p>
<p>abcdefghijklmnopqrstuvwxyz</p>
<p>abcdefghijklmnopqrstuvwxyz</p>
<p>abcdefghijklmnopqrstuvwxyz</p>
<p>abcdefghijklmnopqrstuvwxyz</p>
<p>abcdefghijklmnopqrstuvwxyz</p>
<p>abcdefghijklmnopqrstuvwxyz</p>
<p>abcdefghijklmnopqrstuvwxyz</p>
<p>abcdefghijklmnopqrstuvwxyz</p>

CSS

header {
	background-color: silver;
	border: 1px solid black;
	display: block;
	margin: 0;
	width: 100%;
}

.hamburger-menu,
.title {
	display: inline-block;
}

#check {
	position: absolute;
	visibility: hidden;
	z-index: 99999; /* topmost */
}

.menu {
	background-color: white;
	border: 1px solid black;
	display: none;
	left: 0;
	margin: 0;
	position: absolute;
	top: 0;
}

#check:checked ~ .button ~ .backdrop ~ .menu {
	display: block;
}
.backdrop {
	display: none;
	height: 100%;
	left: 0;
	position: fixed;
	top: 0;
	width: 100%;
}

#check:checked ~ .button ~ .backdrop {
	background-color: rgba(0, 0, 0, 0.5);
	display: block;
}