JSFiddle - React, Tailwind, and code Playground

by trickeedickee

HTML

<div style="width: 100%">
    <ul id="horizontal-style">
        <li><a href="#">Nav Item</a></li>
        <li><a href="#">Short Item</a></li>
        <li><a href="#">Really Long Nav Item</a></li>
        <li><a href="#">Nav Link</a></li>
        <li><a href="#">Another Link</a></li>
    </ul>
</div>

CSS

#horizontal-style {
    display: table;
    width: 100%
}
#horizontal-style li {
    display: table-cell;
}
#horizontal-style a {
    display: block;
    border: 1px solid red;
    text-align: left;
    margin: 0 5px;
    background: #999
}

div {
    background: #ccc
}