JSFiddle - React, Tailwind, and code Playground

HTML

<div class="menu"> 
 <a href="#">Link 1</a>
 <a href="#">Link 2</a>
 <a href="#">Link 3</a>
 <a href="#">Link 4</a>
 <a href="#">Link 5</a>
 <a href="#">Link 6</a>
</div>

CSS

.menu {
        width: 100%;
        overflow:hidden;
        height:100%;
    }

.menu a {
    width: 15.666666667%;		/* (100/6)-1% */
    margin:0 .5%;				/* that 1% applied as margins left & right */
    padding:8.333333334% 0;		/* (100/6)/2 applied as padding top & bottom */
    line-height:0;				/* make sure text has no height */
    height:15.666666667%;
    
    float:none;
    background:#303030;
    text-align:center;
    color:#fff;
}