JSFiddle - React, Tailwind, and code Playground

HTML

<div class="nav-container"> 
					<div class="logo-holder">
						<img class="user-select-none" src="test.jpeg" width="150px" height="150px" alt="temp" />
					</div>
					<div id="navigation-div">
						<nav class="nav">
							<ul class="nav-ul">
								<a class="nav-link active" href=""><li>Test 1</li></a>
								<a class="nav-link " href=""><li>Test 2</li></a>
								<a class="nav-link" href=""><li>Test 3</li></a>
								<a class="nav-link" href=""><li class="hide">Test 4</li></a>
								<a class="nav-link" href=""><li class="hide">Test 5</li></a>
							</ul>
						</nav>
					</div>
				</div>

CSS

.nav-container{
	border-right: 1px solid #E4E2E2;
 	height: 100%;
	width: 200px;
	background-color: #f4f3f3;
}
.nav{
	text-align: justify;
}
nav:after {
	content:"";
	display:table;
	clear:both;
}
.nav-link {
	display: block;
	text-align: left;
	color: #333;
	text-decoration: none;
	margin-left: 0px;
	padding-left:15px;
}
.nav-link:hover{
	background-color: #333;
	color:#f4f3f3;
}

.nav ul{
	width: 100%; 
	padding:0px;
}
.nav ul li {
	margin-left: 5px;
	list-style-type: none;
	height: 25px;
}
.nav ul li a {
	text-align: left;
	padding: 5px;
	color: #333;
	text-decoration: none;
	margin-left: 15px;
}
.nav li:hover a{
  color: #f4f3f3;
}
/* QUERIES */

@media screen and (max-width: 540px) {
  	.nav-container{	
		width: 100%;
		height: 100px;
		background-color: #f4f3f3;
		border-bottom: 0.5px solid #f4f3f3;
  }
	.nav-link{
		padding: 10px;
  }
	.logo-holder{
		overflow: hidden;
		display: block;
    	margin: auto; 
    	width: 40%;
  }
	.nav-container nav ul {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
  }
  	.logo-holder {
    	text-align: left;
  }
  	#navigation-div {
		background-color: #f4f3f3;
    	margin-top: 0;
  }	
	.hide{
		display: none;
	}
	.nav ul li {
		
	}
}