JSFiddle - React, Tailwind, and code Playground

HTML

<p> red = menu with <b>nav-ul-li</b></p>
<p> green = menu with <b>div</b></p>

<nav>
  <ul>
    <li>1.1 Menu</li>
    <li>1.2 Menu</li>
    <li>1.3 Menu</li>
    <li>1.4 Menu</li>
  </ul>
</nav>




<div class="navigation">
     <div class="menu">1.1 Menu</div>
     <div class="menu">1.2 Menu</div>
     <div class="menu">1.3 Menu</div>
     <div class="menu">1.4 Menu</div>
</div>

CSS

ul {
 padding: 0;
}

li { 
 display: inline;
 width: 24%;
 float: left;
    border-style: solid;
	  border-width: 1px;
	  background-color: red;
}

.navigation {
 width: 100%;
 float: left;
 margin-top: 5%;
    border-style: solid;
	  border-width: 1px;
	  background-color: green;
}

.menu {
 float: left;
 width: 24%;
    border-style: solid;
	  border-width: 1px;
	  background-color: green;
}