JSFiddle - React, Tailwind, and code Playground

by trevor_davis

HTML

<div class="wrapper">
    <ul>
        <li><a href="#">Tab 1</a></li>
        <li><a href="#">Tab 2 with a really long name</a></li>
        <li><a href="#">Tab 3</a></li>
        <li><a href="#">Tab 4</a></li>
    </ul>
</div>

<div class="wrapper tabs5">
    <ul>
        <li><a href="#">Tab 1</a></li>
        <li><a href="#">Tab 2</a></li>
        <li><a href="#">Tab 3</a></li>
        <li><a href="#">Tab 4</a></li>
        <li><a href="#">Tab 5</a></li>
    </ul>
</div>

CSS

.wrapper {
    background: red;
    margin: 0 auto 50px;
    max-width: 600px
}

ul {
    display: table;
    width: 100%;
}

li {
    display: table-cell;
    height: 100%;
    text-align: center;
    vertical-align: center;
    width: 25%;
}

.tabs5 li {
    width: 20%;
}

a {
    background: grey;
    display: inline-block;
    height: 60px;
    vertical-align: center;
    width: 100%;
}