JSFiddle - React, Tailwind, and code Playground

by davidpauljunior

HTML

<div class="grid">
  <div class="grid_item grid_item--2">
    <div class="red">
      Hello
    </div>
  </div>
  <div class="grid_item grid_item--6">
    <div class="blue">
      Hello
    </div>
  </div>
  <div class="grid_item grid_item--4">
    <div class="green">
      Hello
    </div>
  </div>
</div>

SCSS

body {
  margin: 0;
}

$grid-cols: 12;
$grid-gutter: 2rem;

@mixin grid-item($size) {
  width: percentage($size / $grid-cols);
}

.grid {
  display: flex;
  margin-left: -$grid-gutter;
}

.grid_item {
  padding-left: $grid-gutter;
  
  &--2 {
    @include grid-item(2);
  }
  
  &--6 {
    @include grid-item(6);
  }
  
  &--4 {
    @include grid-item(4);
  }
}

.red {
  background-color: red;
}

.blue {
  background-color: blue;
}

.green {
  background-color: green;
}