JSFiddle - React, Tailwind, and code Playground

by Richard Hunter

HTML

<div class="foo"></div>

CSS

html, body{ height: 100% }

body {


  --thickness: 5px;
  --grid: 9; 

  background-image: linear-gradient(180deg, blue var(--thickness), transparent 0), 
                    linear-gradient(90deg, red var(--thickness), transparent 0);
  
  background-size: calc((100% - var(--thickness))/var(--grid)) calc((100% - var(--thickness))/var(--grid));
}