JSFiddle - React, Tailwind, and code Playground

by saminath_krisna

HTML

<div class="fractionBar">
<div class="div1 filled1"></div>
<div class="div1 filled1"></div>
<div class="div1 filled1"></div>
<div class="div1 filled1"></div>
<div class="div1 filled1"></div>
<div class="div1 filled1"></div>
<div class="div1 filled1"></div>
<div class="div1 filled1"></div>
<div class="div1 filled1"></div>
<div class="div1 filled1"></div>
<div class="div1 filled1"></div>
<div class="div1 filled1"></div>
<div class="div1 filled1"></div>
<div class="div1 filled1"></div>
<div class="div1 filled1"></div>
<div class="div1 filled1"></div>
<div class="div1 filled2"></div>
<div class="div1 filled2"></div>
<div class="div1 filled2"></div>
<div class="div1 filled2"></div>
<div class="div1 filled2"></div>
<div class="div1 filled2"></div>
<div class="div1 filled2"></div>
<div class="div1 filled2"></div>
<div class="div1"></div>
<div class="div1"></div>
<div class="div1"></div>
<div class="div1"></div>
<div class="div1"></div>
<div class="div1"></div>
<div class="div1"></div>
<div class="div1"></div>
<div class="div1"></div>
<div class="div1"></div>
<div class="div1"></div>
<div class="div1"></div>
<div class="div1"></div>
<div class="div1"></div>
<div class="div1"></div>
<div class="div1"></div>
<div class="div1"></div>
<div class="div1"></div>
<div class="div1"></div>
<div class="div1"></div>
<div class="div1"></div>
<div class="div1"></div>
<div class="div1"></div>
<div class="div1"></div>
<div class="div1"></div>
<div class="div1"></div>
<div class="div1"></div>
<div class="div1"></div>
<div class="div1"></div>
<div class="div1"></div>
<div class="div1"></div>
<div class="div1"></div>
<div class="div1"></div>
<div class="div1"></div>
<div class="div1"></div>
<div class="div1"></div>
<div class="div1"></div>
<div class="div1"></div>
<div class="div1"></div>
<div class="div1"></div>
<div class="div1"></div>
<div class="div1"></div>
<div class="div1"></div>
<div class="div1"></div>
<div class="div1"></div>
<div class="div1"></div>
<div class="div1"></div>
<div...

SCSS

.fractionBar {
 display: grid;
 grid-template-columns: repeat(10, 1fr);
 grid-template-rows: repeat(10, 1fr);
 border: 1px solid black;
 max-width: 250px;
 grid-auto-flow: row;
 
  div {
    padding: 10px;
    border: 1px solid black;
    
    &.filled1 {
      background: red;
    }
    
    &.filled2 {
      background: green;
    }
    
  }
}