JSFiddle - React, Tailwind, and code Playground

by oilvier

HTML

<div class="layout"></div>
<div class="layout layout--flush"></div>

SCSS

*, 
*:before, 
*:after {box-sizing: border-box;}

$layout-padding:15px!default;
$layout-width:300px!default;

.layout {padding:0 $layout-padding; margin:0 auto; max-width:$layout-width + ($layout-padding*2);}
.layout--flush {padding:0; max-width:$layout-width;}

.layout {background-color:tomato; height:50px;}