JSFiddle - React, Tailwind, and code Playground

HTML

<nav class="menu">
			<ul>
				<li class="ItemMenu logoli"><a href="#">S</a></li>
				<li class="ItemMenu"><a href="#">Home</a></li>
				<li class="ItemMenu"><a href="#">Courses</a></li>
				<li class="ItemMenu"><a href="#">Mentor</a></li>
				<li class="ItemMenu"><a href="#">Group</a></li>
				<li class="ItemMenu"><a href="#">Group</a></li>
			</ul>
		</nav>

CSS

nav{
	display: flex;
}

li.ItemMenu{
	list-style: none;
	display: inline-block;
}

.logoli{
	display: block;
	font-size: 32px;
	width: 60px;
	height: 60px;
  text-align: center;
	background-color: #4A4DC7;
	border-radius: 5px;
  padding:0;
}

.logoli a{

}