JSFiddle - React, Tailwind, and code Playground

by lemonlimelike

HTML

<div class="touch_menu">
		<span class="icon_menu"><hr></span>
		<span class="icon_menu"><hr></span>
		<span class="icon_menu"><hr></span>
	</div>
		<div class="category">
					<ul class="one">		
            <li class="two"><a href="#">>Окно</li>
            <li class="two"><a href="#">>Двери</li>
            <li class="two"><a href="#">>Шкаф</li>
					</ul>
		</div>

CSS

.touch_menu{
	display: none;
	position: absolute;
	right:5%;
	top:2%;
	cursor: pointer;
	border:2px solid #4c4c4c;
	padding:3px;
}
.icon_menu hr{
	width:35px;
	padding:1px;
	background-color: #fff;

}
@media (max-width:500px) {
	.category{
		display:none;
		position: absolute;
		top:5%;
		right:4%;
		z-index: 3;
		background-color: #4C4C4C;
		border:2px solid #2E2E2E;

	}
	.category ul{
		float:none;
		width:94%;
		column-count: 1;

	}
	.category li{
		background-color: #4c4c4c;
		border-bottom: 1px solid #2E2E2E;
		transition: 1s all;
	}
	.category a{
		padding:10px;
		

	}
	.touch_menu{display:block;}
  }