JSFiddle - React, Tailwind, and code Playground

by Darren Galway

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>

SCSS

$body: #e8e8e8;
$white: #fff;
$black: #000;
$grid-space: .9375rem;
$elevation-1: 0 2px 2px 0 rgba($black, .14), 0 1px 5px 0 rgba($black, .12), 0 3px 1px -2px rgba($black, .2);
$elevation-2: 0 4px 5px 0 rgba($black, .14), 0 1px 10px 0 rgba($black, .12), 0 2px 4px -1px rgba($black, .4);
$elevation-3: 0 6px 10px 0 rgba($black, .14), 0 1px 18px 0 rgba($black, .12), 0 3px 5px -1px rgba($black, .4);
$elevation-4: 0 6px 10px 0 rgba($black, .05), 0 1px 18px 0 rgba($black, .06), 0 3px 5px -2px rgba($black, .1);
$elevation-5: 0 16px 24px 2px rgba($black, .14), 0 6px 30px 5px rgba($black, .12), 0 8px 10px -5px rgba($black, .4);

html,
body {
  height: 100%;
}

body {
  background: $body;
}

.elevation-4 {
  box-shadow: $elevation-4;
}

.card {
  background: $white;
}

.container-fluid {
    max-width: 100%;
    padding-left: $grid-space;
    padding-right: $grid-space;
}

.row {
    display: flex;
    flex-wrap: wrap;
    margin-left: -$grid-space;
    margin-right: -$grid-space;
}

.graph-col {
    min-height: 1px;
    padding-left: $grid-space;
    padding-right: $grid-space;
    position: relative;
    
    @media screen and (max-width: 767px) {
      flex: 0 0 25%;
    }
    
    @media screen and (max-width: 540px) {
      flex: 0 0 50%;
    }
}