JSFiddle - React, Tailwind, and code Playground

by amindunited

HTML

<div class="card">
  <div class="flex-container">
  
    <div class="flex-row">
      <div class="flex-cell">
        Cell
      </div>
    </div>

    <div class="flex-row">
      <div class="flex-cell">
        Cell
      </div>
    </div>

  </div>
</div>

SCSS

/* $BASE_MEASURE: 8px;

$gutter: $BASE_MEASURE * 2;
$num_columns: 12;

@mixin flex-cell($col_span, $has_gutter:true) {

  @if ($has_gutter) {
    margin-left: ( $gutter / 2 );
    margin-right: ( $gutter / 2 );
  } @else {
    margin-left: 0;
    margin-right: 0;
  }

  width: cell_width($col_span, $has_gutter);

}

@function cell_width ($col_span, $has_gutter:true) {

  $width: percentage(($col_span / $num_columns));

  @if ($has_gutter) {
    $width: calc( #{$width} - #{$gutter} );
  }

  @return $width;

}

.flex-cell {
  @include flex-cell;
}
 */
/**
  For demo
*/
* { box-sizing: border-box; }
html, body { background-color: #ededed; }
.card { padding: 16px; margin: auto 24px; margin-top: 48px; border-radius: 3px; background-color: white; }
.flex-container { border-color: #d10101; border: solid 1px #d10101; }
.flex-cell { border-color: #01d101; border: solid 1px #01d101; }