JSFiddle - React, Tailwind, and code Playground

HTML

<body>

		
	<figure id="fondo"><img src="images/fondo.png" alt="MENU">
	</figure>
		
	<div id="menumob">
		
		<div class="item" id="caja1">
			
			Opción 1
		
		</div>
		
		<div class="item" id="caja2">
		
			Opción 2
		
		</div>
		
		<div class="item" id="caja3">
		
			Opción 3
		
		</div>
		
		<div class="item" id="caja4">
		
			Cerrar X
		
		</div>
		
	</div>	


	<!-- menu de item1: -->
	
	
	
	<div id="subm1">
	
		
		<div class="item atras">
			
			ATRÁS
		
		</div>
		
		<div class="item">
		
			ITEM 1
		
		</div>
		
		<div class="item">
		
			ITEM 2
		
		</div>
		
		<div class="item">
		
			ITEM 3
		
		</div>
		
		<div class="item">
		
			ITEM 4
		
		</div>
		
		<div class="item">
		
			ITEM 5
		
		</div>
		
		<div class="item">
		
			ITEM 6
		
		</div>
		
		<div class="item">
		
			ITEM 7
		
		</div>
		
		<div class="item">
		
			ITEM 8
		
		</div>
		
		<div class="item">
		
			ITEM 9
		
		</div>
		
		<div class="item">
		
			ITEM 10
		
		</div>
		
		<div class="item">
		
			ITEM 11
		
		</div>
		
		<div class="item">
		
			ITEM 12
		
		</div>


	</div>
	
	<!-- menu de item2: -->	
	
	<div id="subm2">
	
		
		<div class="item atras">
			
			ATRÁS
		
		</div>
		
		<div class="item">
		
			ITEM 1
		
		</div>
		
		<div class="item">
		
			ITEM 2
		
		</div>
		
		<div class="item">
		
			ITEM 3
		
		</div>
		
		<div class="item">
		
			ITEM 4
		
		</div>
		
		<div class="item">
		
			ITEM 5
		
		</div>
		
		<div class="item">
		
			ITEM 6
		
		</div>
		
		<div class="item">
		
			ITEM 7
		
		</div>
		
		<div class="item">
		
			ITEM 8
		
		</div>


	</div>
	
	<!-- menu de item3: -->
	
	<div id="subm3">
	
		
		<div class="item atras">
			
			ATRÁS
		
		</div>
		
		<div class="item">
		
			ITEM 1
		
		</div>
		
		<div class="item">
		
			ITEM 2
		
		</div>
		
		<div class="item">
		
			ITEM 3
		
		</div>
		
		<div class="item">
		
			ITEM 4
		
		</div>
		
		<div class="item">
		
			ITEM 5
		
		</div>


	</div>
        
<br>
<br>
Lorem ipsum dolor sit amet,...

CSS

*
{
	margin: 0;
	padding: 0;
    top:15px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	font-family: arial;
}
#fondo
{
	position: fixed;
	/*display: none;*/
}

#menumob
{
	display: none;
    position: absolute;
    margin-top: 50px;
	width: 100%;
	border: 1px solid black;
}
.item
{
	background-color: #3C3A24;
	height: 48px;
	color: #FFFFFF;
	padding-top: 13px;
	padding-left: 5%;
	border-top: 1px solid #000000;
}
.item:hover
{
	background-color: #000000;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
#subm1
{
	display: none;
	position: absolute;
	top: 50px;
	width: 100%;
	z-index: 1;
}
.atras, #caja4
{
	background-color: #5D5F4A;
}
#subm2
{
	display: none;
	position: absolute;
	top: 50px;
	width: 100%;
	z-index: 1;
}
#subm3
{
	display: none;
	position: absolute;
	top: 50px;
	width: 100%;
	z-index: 1;
}