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. Some pilots get picked and become television programs. Some don't, become nothing. She starred in one of the ones that became nothing.
</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, for he is truly his brother's keeper and the finder of lost children.
</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
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