JSFiddle - React, Tailwind, and code Playground

by kthornbloom

HTML

<h2>Flex</h2>

<div class="flex">
  <div class="col-33">33%</div>
  <div class="col-66">66%</div>
  <div class="col-33">33%</div>
  <div class="col-33">33%</div>
  <div class="col-33">33%</div>
</div>

<h2>Flex + Padding</h2>

<div class="flex flex-pad">
  <div class="col-33">33%</div>
  <div class="col-66">66%</div>
  <div class="col-33">33%</div>
  <div class="col-33">33%</div>
  <div class="col-33">33%</div>
</div>

<h2>Flex + Padding + Gutter</h2>

<div class="flex flex-pad flex-gutter">
  <div class="col-33">33%</div>
  <div class="col-66">66%</div>
  <div class="col-33">33%</div>
  <div class="col-33">33%</div>
  <div class="col-33">33%</div>
</div>

<h2>Flex + Padding + Gutter + Responsive Cols</h2>

<div class="flex flex-pad flex-gutter">
  <div class="col-33 md-col-50 sm-col-100">33% then 50% then 100%</div>
  <div class="col-66 md-col-50 sm-col-100">66% then 50% then 100%</div>
  <div class="col-33 md-col-50 sm-col-100">33% then 50% then 100%</div>
  <div class="col-33 md-col-50 sm-col-100">33% then 50% then 100%</div>
  <div class="col-33 md-col-100 sm-col-100">33% then 100% then 100%</div>
</div>

SCSS

:root {
  --gutter-margin: 10px;
}

.flex {
  display: flex;
  flex-wrap: wrap;
}

[class*='col-'] {
  box-sizing: border-box;
}

.flex-pad > [class*='col-'] {
  padding: 30px;
}

.flex-gutter {
  margin: calc(-1 * var(--gutter-margin));
}

.flex-gutter > [class*='col-'] {
  margin: var(--gutter-margin);
}

.col-12 { width: 12%; }
.col-16 { width: 16.6%; }
.col-25 { width: 25%; }
.col-33 { width: 33.3%; }
.col-41 { width: 41.6%; }
.col-50 { width: 50%; }
.col-55 { width: 55.3%; }
.col-66 { width: 66.6%; }
.col-75 { width: 75%; }
.col-83 { width: 83.3%; }
.col-91 { width: 91.6%; }
.col-100 { width: 100%; }

.flex-gutter .col-12 { width: calc(12% - (var(--gutter-margin) * 2)); }
.flex-gutter .col-16 { width: calc(16.6% - (var(--gutter-margin) * 2)); }
.flex-gutter .col-25 { width: calc(25% - (var(--gutter-margin) * 2)); }
.flex-gutter .col-33 { width: calc(33.3% - (var(--gutter-margin) * 2)); }
.flex-gutter .col-41 { width: calc(41.6% - (var(--gutter-margin) * 2)); }
.flex-gutter .col-50 { width: calc(50% - (var(--gutter-margin) * 2)); }
.flex-gutter .col-55 { width: calc(55.3% - (var(--gutter-margin) * 2)); }
.flex-gutter .col-66 { width: calc(66.6% - (var(--gutter-margin) * 2)); }
.flex-gutter .col-75 { width: calc(75% - (var(--gutter-margin) * 2)); }
.flex-gutter .col-83 { width: calc(83.3% - (var(--gutter-margin) * 2)); }
.flex-gutter .col-91 { width: calc(91.6% - (var(--gutter-margin) * 2)); }
.flex-gutter .col-100 { width: calc(100% - (var(--gutter-margin) * 2)); }


//Medium
@media screen and (max-width: 900px){
.md-col-12 { width: 12%; }
.md-col-16 { width: 16.6%; }
.md-col-25 { width: 25%; }
.md-col-33 { width: 33.3%; }
.md-col-41 { width: 41.6%; }
.md-col-50 { width: 50%; }
.md-col-55 { width: 55.3%; }
.md-col-66 { width: 66.6%; }
.md-col-75 { width: 75%; }
.md-col-83 { width: 83.3%; }
.md-col-91 { width: 91.6%; }
.md-col-100 { width: 100%; }

.flex-gutter .md-col-12 { width: calc(12% - (var(--gutter-margin) * 2)); }
.flex-gutter .md-col-16 { width:...