JSFiddle - React, Tailwind, and code Playground

HTML

<div class="navigation col-12">
<ul class="menu">
<li class="icon">
<a href="javascript:void(0);"onClick="dropdownMenu()">&#9776;</a></li>
<li> <a href="test.html">Home</a></li>
<li> <a href="test.html">Eat</a></li>
<li> <a href="test.html">Shop</a></li>
<li> <a href="test.html">Discover</a></li>
<li> <a href="test.html">Edge Club</a></li>
<li> <a href="test.html">Contact</a></li>
</ul>
</div>

CSS

.navigation {
	background-color: #454242;
	text-align:center;
}

ul.menu {
	height: 43px;
	background-color: #454242;
	list-style-type: none;
	padding: 0;
	overflow: hidden;
	transition: 1.0s;
	font-family: 'Lato', sans-serif;
	font-weight:400;
	display:table;
  margin:auto;
	text-align: center;
}

ul.menu li {
	float: left;
	display: inline;
}

ul.menu li a {
	display: inline-block;
	color: #FFFFFF;
	text-align: center;
	padding: 10px 20px;
	text-decoration: none;
	transition: 1.0s;
	font-size: 17px;
	height: 23px;
}

ul.menu li a:hover {
	background-color: #FFFFFF;
	color: black;
}

ul.menu li a:active {
	background-color: #FFFFFF;
	color: black;
}

ul.menu li.icon {
	display:none;
}

@media screen and (max-width: 680px) {	
ul.menu li:not(:first-child){
	display:none;
	margin: auto;
	float: left;
}
	
ul.menu li.icon {
	display: inline;
	float: left;
	position: absolute;
	left: 0px;
	text-align: left;
}
}

@media screen and (max-width: 680px) {
	
ul.menu.responsive li.icon {
	
	float: left;
	position: absolute;
	text-align: left;
	color: black;
}
	
ul.menu.responsive{
	position: relative;
	height: 258px;
	transition: 1.0s;
	width: 100%
}
	
ul.menu.responsive li{
	float: none;
	display: inline;
	
}
	
ul.menu.responsive li a{
	display:block;
	text-align: center;
}	
}

JavaScript

function dropdownMenu() {
	document.getElementsByClassName("menu")[0].classList.toggle("responsive");
}