JSFiddle - React, Tailwind, and code Playground

by Christian Sonne

HTML

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css">

CSS

body {
  text-align: center;
  margin: 0;
  padding: 0;
  position: relative;
  width: calc(11px * 61);
}

div {
  margin: 0;
  padding: 0;
  line-height: 0;
  height: 11px;
  white-space: nowrap;
}

.box {
  display: inline-block;
  height: 10px;
  width: 10px;
  margin: 0;
  border-bottom: 1px black solid;
  border-right: 1px black solid;
}

.box:last-child {
  border-right: none;
}

JavaScript

let boxes = [1, 12, 108, 183];
let colors = ["red", "blue", "green", "rebeccapurple"];

for (let _count in boxes) {
	let count = boxes[_count];
  let color = colors[_count];
	for (let l = 0; l < 3 && l < count; l++) {
  	let layer = document.createElement("div");
    for (let c = 0; c < count / 3; c++) {
    	let box = document.createElement("box");
      box.classList.add("box");
      box.style.background = color;
      layer.appendChild(box);
    }
    document.body.appendChild(layer);
  }
}

$("")