JSFiddle - React, Tailwind, and code Playground

by Jesse M

HTML

<div class="container">
    <a href="#">Some content</a>
    <a href="#">Some content</a>
    <a href="#">Some content</a>
    <a href="#">Some content</a>
</div>

CSS

/* you could either do 25% width, or use flex to get equal widths totaling 100% */
/* i prefer flex because if you were to add/remove items, it would automatically adjust */
.container {
    display:-webkit-flex;
    display:flex;
    width:100%;
    }

.container a {
    text-align:center;
    display:block;
    -webkit-flex:1;
    -ms-flex:1;
    flex:1;
    min-height:40px;
    line-height:40px;
    }

.container a:nth-child(even) { background-color:#ccc; }
.container a:nth-child(odd) { background-color:#747474; }

JavaScript

$(window).resize(function() {
    $('a').height($(window).height() - $('a').offset().top);
});
$(window).resize();