JSFiddle - React, Tailwind, and code Playground

by iurevych

HTML

<div class="pal">
    <div class="module mbl">Module</div>
    <div class="module mbl">Module</div>
    <div class="module mbl">Module</div>
</div>

CSS

/* Large Padding size for all sides */
.ptl, .pvl, .pal { padding-top:    20px; }
.prl, .phl, .pal { padding-right:  20px; }
.pbl, .pvl, .pal { padding-bottom: 20px; }
.pll, .phl, .pal { padding-left:   20px; }
 
/* Large Margin size for all sides */
.mtl, .mvl, .mal { margin-top:    20px; }
.mrl, .mhl, .mal { margin-right:  20px; }
.mbl, .mvl, .mal { margin-bottom: 20px; }
.mll, .mhl, .mal { margin-left:   20px; }

/* Module example */
.module {
    background: #ddd;
    border-radius: 4px;
    padding: 8px 12px;
}