JSFiddle - React, Tailwind, and code Playground

by Nick Hulea

HTML

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

<div id="current-phase"></div> 
<div id="phases-app" class="phases--grid-container"></div>

CSS

@font-face {
  font-family: 'National2Web';
  src: url('https://static1.squarespace.com/static/5f634fff9721b11ff65eaaeb/t/5f68dd13d631067422dac2d0/1600707859675/National2Web-Thin.woff') format('woff');
  font-weight: 100;
  font-style: normal;
}

@font-face {
  font-family: 'National2Web';
  src: url('https://static1.squarespace.com/static/5f634fff9721b11ff65eaaeb/t/5f68dcf5486b51471c757271/1600707829355/National2Web-Extralight.woff') format('woff');
  font-weight: 200;
  font-style: normal;
}

@font-face {
  font-family: 'National2Web';
  src: url('https://static1.squarespace.com/static/5f634fff9721b11ff65eaaeb/t/5f68dd0453f2314986b695b6/1600707844364/National2Web-Light.woff') format('woff');
  font-weight: 300;
  font-style: normal;
}

@font-face {
  font-family: 'National2Web';
  src: url('https://static1.squarespace.com/static/5f634fff9721b11ff65eaaeb/t/5f68dd239825f24b437b4d5e/1600707875904/National2Web-Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'National2Web';
  src: url('https://static1.squarespace.com/static/5f634fff9721b11ff65eaaeb/t/5f68dd1b280b4205b8bcf30f/1600707867653/National2Web-RegularItalic.woff') format('woff');
  font-weight: 400;
  font-style: italic;
}

@font-face {
  font-family: 'National2Web';
  src: url('https://static1.squarespace.com/static/5f634fff9721b11ff65eaaeb/t/5f68dd2c53f2314986b69ac3/1600707884501/National2Web-Medium.woff') format('woff');
  font-weight: 500;
  font-style: normal;
}

@font-face {
  font-family: 'National2Web';
  src: url('https://static1.squarespace.com/static/5f634fff9721b11ff65eaaeb/t/5f68dcd9d817a27566f61aae/1600707801269/National2Web-Bold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: 'National2Web';
  src: url('https://static1.squarespace.com/static/5f634fff9721b11ff65eaaeb/t/5f68dce4f3ddd601c4270b90/1600707813310/National2Web-Extrabold.woff') format('woff');
  font-weight: 800;
  font-style:...

JavaScript

var URL = 'https://spreadsheets.google.com/feeds/cells/1n2ccVxWMxryZwjnfEkU3z_bIHPTqUf3rkGAsn9kir-E/1/public/full?alt=json';
fetch(URL)
  .then(function(res) {
    return res.json();
  }).then(function(json) {
    json.feed.entry.forEach(function(item, index) {
      // console.log(item);
    })
  }).catch(function(error) {
    console.error(error);
  });

var publicSpreadsheetUrl = 'https://docs.google.com/spreadsheets/u/1/d/1Oa9P3lrKABQrreqHghf5YLwnazAj4yCXlSBNCUvgd2o/pubhtml'
var html = '';

function tabletopInit() {
  Tabletop.init({
    key: publicSpreadsheetUrl,
    callback: showInfo,
    simpleSheet: true
  })
}

function getActive(data) {
  var active = data.filter(function(d) {
    if (d['Active Phase'] === 'active') {
      return d;
    };
  });
  return active;
}

function currentPhase(phase) {
  var div = document.createElement('div');
  var activities = phase[0].Activities.split('|').map(function(item) {
    var wrappedItem = '<li>' + item.trim() + '</li>';
    return wrappedItem;
  }).join('');
  // div.style.backgroundColor = phase[0].Color;
  // div.style.color = phase[0]['Heading Color'];
  var color = phase[0]['Active Phase'] === 'active' ? phase[0].Color : '#D6DCE0';
  div.innerHTML = '<div class="current-phase--grid-group"><div class="current-phase--color" style="background-color:' + phase[0].Color + ';"><h4 style="color:' + phase[0]['Heading Color'] + ';">Current Phase: </br>' + phase[0].Phase + '</h4></div><div class="phases--phase-inner" style="border-color: '+color+';"><div class="current-phase--grid-header"><h5>' + phase[0].Phase + '</h5></div><div class="phases--grid-item first"><h5>Activities</h5><ul>' + activities + '</ul></div><div class="phases--grid-item second"><h5>Approval</h5><p>' + phase[0].Approval + '</p></div></div></div>';
  return div;
}

function showInfo(data, tabletop) {
  var container = document.getElementById('phases-app');
  var currentPhasecontainer = document.getElementById('current-phase');
  if (!container)...