JSFiddle - React, Tailwind, and code Playground

by xowap

HTML

<div class="container">
    <div class="row">
        <div class="cell">
            Well, the way they make shows is, they make one show. That show's called a pilot.
        </div><div class="cell">
            Then they show that show to the people who make shows, and on the strength of that one show they decide if they're going to make more shows.
        </div><div class="cell">
            The path of the righteous man is beset on all sides by the iniquities of the selfish and the tyranny of evil men
        </div><div class="cell">
            Blessed is he who, in the name of charity and good will, shepherds the weak through the valley of darkness.
        </div><div class="cell">
            And you will know My name is the Lord when I lay My vengeance upon thee.
        </div><div class="cell">
            That show's called a pilot. Then they show that show to the people who make shows, and on the strength of that one show they decide if they're going to make more shows.
        </div>
    </div>
</div>

SASS

$gutter: 40px

.row
    margin: (- $gutter / 2)
    
.cell
    display: inline-block
    vertical-align: top
    width: 25%
    box-sizing: border-box
    padding: ($gutter / 2)


// ---
// NO LOOKING BEYOND THIS POINT
// It's boilerplate code to make things look nice
// ---

$container-size: 600px

body
    font-family: Roboto, "Open Sans", sans-serif

// A simple fluid-on-mobile/fixed-on-desktop container
.container
    width: calc(100% - #{$gutter} * 2)
    max-width: $container-size
    margin: $gutter auto
    
    
.cell
    position: relative

    // sizes visually
    &:before
        z-index: -1
        position: absolute
        top: ($gutter / 4)
        right: ($gutter / 4)
        bottom: ($gutter / 4)
        left: ($gutter / 4)
    
        display: block
        content: ''
        background: #eee
        border: 1px solid darkgrey
        border-radius: 3px