JSFiddle - React, Tailwind, and code Playground

by QMaster

HTML

<div class="navbar">
    <div>
        <ul>
            <li><div style="width: 100px; height:100px;text-align:center;background-color:red;">Home</div></li>
            <li><div style="width: 100px; height:100px;text-align:center;background-color:red;">Home</div></li>
            <li><div style="width: 100px; height:100px;text-align:center;background-color:red;">Home</div></li>
            <li><div style="width: 100px; height:100px;text-align:center;background-color:red;">Home</div></li>
            <li><div style="width: 100px; height:100px;text-align:center;background-color:red;">Home</div></li>
            <li><div style="width: 100px; height:100px;text-align:center;background-color:red;">Home</div></li>
            <li><div style="width: 100px; height:100px;text-align:center;background-color:red;">Home</div></li>
            <li><div style="width: 100px; height:100px;text-align:center;background-color:red;">Home</div></li>
            <li><div style="width: 100px; height:100px;text-align:center;background-color:red;">Home</div></li>
            <li><div style="width: 100px; height:100px;text-align:center;background-color:red;">Home</div></li>
            <li><div style="width: 100px; height:100px;text-align:center;background-color:red;">Home</div></li>
            <li><div style="width: 100px; height:100px;text-align:center;background-color:red;">Home</div></li>
        </ul>
    </div>
</div>

CSS

.navbar {
    overflow:hidden;
}
.navbar > div {
    position:relative;
    left:50%;
    float:left;
}
.navbar ul {
    position:relative;
    left:-50%;
    float:left;
}
.navbar li {
    float:left;
}
.navbar li + li {
    margin-left:20px;
}