JSFiddle - React, Tailwind, and code Playground

by oilvier

HTML

<div class="grids">
    <div class="grid-1-4">
        <div class="item-cont">
            <div class="item"></div>
        </div>  
    </div>
    <div class="grid-1-4">
        <div class="item-cont">
            <div class="item"></div>
        </div>  
    </div>
    <div class="grid-1-4">
        <div class="item-cont">
            <div class="item"></div>
        </div>    
    </div>
    <div class="grid-1-4">
        <div class="item-cont">
            <div class="item"></div>
        </div>  
    </div>
     <div class="grid-1-4">
        <div class="item-cont">
            <div class="item"></div>
        </div>  
    </div>
    <div class="grid-1-4">
        <div class="item-cont">
            <div class="item"></div>
        </div>  
    </div>
    <div class="grid-1-4">
        <div class="item-cont">
            <div class="item"></div>
        </div>    
    </div>
    <div class="grid-1-4">
        <div class="item-cont">
            <div class="item"></div>
        </div>  
    </div>
</div>

CSS

/* Box model */
*, *:before, *:after {-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;}


.grids {margin-left:-20px; letter-spacing:-0.31em;}
.opera:-o-prefocus, .grids {word-spacing: -0.43em; /* Fix for Opera */}
	/* La classe doit absolument commencer par .grid- */
	[class^="grid-"] {padding-left:20px; display: inline-block; vertical-align: top; word-spacing:normal; letter-spacing:normal;}

.grid-1-4 {width:25%;}

.item-cont {background:firebrick; margin-bottom:20px;}
    .item {width: 200px; height: 50px; margin:0 auto; background:beige;}
    
    .grid-1-4:nth-child(4n+1) .item {margin-left:0;}
    .grid-1-4:nth-child(4n) .item {margin-right:0;}