JSFiddle - React, Tailwind, and code Playground

HTML

<div class="nav line">
    <div class="unit">
        <div class="menuItem">Menu item 1</div>
    </div>
    <div class="unit">
        <div class="menuItem">Menu item 1</div>
    </div>
    <div class="unit">
        <div class="menuItem">Menu item 1</div>
    </div>
    <div class="unit lastUnit">
        <div class="menuItem dummy">Menu item 1</div>
    </div>
</div>

CSS

/*
@Stubbornella's OOCSS Grids:
https://github.com/stubbornella/oocss/blob/master/core/grid/grids.css
*/

.line,.lastUnit{overflow:hidden; *overflow:visible;*zoom:1;}
.unit{float:left;}
.unitRight{float:right;}
.size1of1{float:none;}
.size1of2{width:50%;}
.size1of3{width:33.33333%;}
.size2of3{width:66.66666%;}
.size1of4{width:25%;}
.size3of4{width:75%;}
.size1of5{width:20%;}
.size2of5{width:40%;}
.size3of5{width:60%;}
.size4of5{width:80%;}
.lastUnit{float:none;width:auto;_position:relative;_left:-3px;_margin-right:-3px;}

/*
Random styles
*/

body {
    background: url(http://farm4.static.flickr.com/3563/4558276805_af689d6223_o_d.jpg);
}

.menuItem {
    background: red;
    color: white;
    padding: 12px;
}

/*
Gradient for your last box
*/

.dummy {
    background-image: -webkit-gradient(linear, left center, right top, from(rgba(255,0,0,1)), to(rgba(255,0,0,0)));
    background-image: -webkit-linear-gradient(left center, red, rgba(255,0,0,0));
    background-image: -moz-linear-gradient(left center, red, rgba(255,0,0,0));
    background-image: -ms-linear-gradient(left center, red, rgba(255,0,0,0));
    background-image: -o-linear-gradient(left center, red, rgba(255,0,0,0));
    background-image: linear-gradient(left center, red, rgba(255,0,0,0));
              filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#ffff0000', EndColorStr='#00ff000000', GradientType=1);
    background-color: transparent;
}