JSFiddle - React, Tailwind, and code Playground

HTML

<div>
     <h1>Header Text</h1>
    <p>Unfixed:</p>
    <ul id="unfixed">
        <li><a>Link!</a>
        </li>
        <li><a>Link!</a>
        </li>
        <li><a>Link!</a>
        </li>
        <li><a>Link!</a>
        </li>
    </ul>
    <p>Fixed:</p>    
        <ul id="fixed">
        <li><a>Link!</a>
        </li>
        <li><a>Link!</a>
        </li>
        <li><a>Link!</a>
        </li>
        <li><a>Link!</a>
        </li>
    </ul>
</div>

CSS

div {
    background:#ccc333;
    width:450px;
}
h1 {
    background:green;
    text-align:center;
}
ul {
    margin:0;
    padding:0;
    width:450px;
}
li {
    background:#444;
    color:#fff;
    margin:0;
    padding:0;
    list-style:none;
    display:inline-block;
    width:24%;
}
a {
    display:block;
    width:80%;
    border:#fff 1px solid;
}
#fixed {
    width:100%;
}
#fixed li{
    width:20%;
    margin:0 2%;
}
#fixed li a {
    text-align:center;
    width:100%;
}