JSFiddle - React, Tailwind, and code Playground

by Brendan Dolan

HTML

<div class= "grid">
  <div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div><div...

CSS

/**
 * Vertical rhythm by Syncope
 * http://nowodzinski.pl/syncope
 */
 
 .grid {
   position: absolute;
   display: grid;
   height: 100%;
   width: 100%;
   grid-template-columns: repeat(auto-fill, 1.5em);
   grid-template-rows: repeat(auto-fill, 1.5em);
   top: 0;
 }
 
 .box {
   
   background-color: blue;
   height: 1.5em;
   border-bottom: 1px solid yellow;
   border-right: 1px solid yellow;
   box-sizing: border-box;
 }

.sandbox {
  position: relative;
  font: 16px/1.5 'Helvetica';
}

h1 {
  font-size: 5.06em;
  line-height: 1.19em;
  padding-top: 0.543em;
  margin-bottom: 0.0494em;
}

h2 {
  font-size: 3.38em;
  line-height: 1.33em;
  padding-top: 0.778em;
  margin-bottom: 0.111em;
}

h3 {
  font-size: 2.25em;
  line-height: 1.33em;
  padding-top: 1.00em;
  margin-bottom: 0.333em;
}

h4 {
  font-size: 1.50em;
  line-height: 2.00em;
  padding-top: 1.67em;
  margin-bottom: 0.333em;
}

p {
  font-size: 1.00em;
  line-height: 1.50em;
  padding-top: 0.438em;
  margin-bottom: 1.06em;
}

JavaScript

window.$crisp=[];window.CRISP_WEBSITE_ID="acf6b0dc-4b45-4641-91d5-7ff6c406de5c";(function(){ d=document;s=d.createElement("script"); s.src="https://client.crisp.chat/l.js"; s.async=1;d.getElementsByTagName("head")[0].appendChild(s);})();