JSFiddle - React, Tailwind, and code Playground

HTML

<div id="heatmap">
 <ul>
 </ul>
</div>

CSS

ul { width: 280px; }
ul li { float: left; width: 38px; padding: 0 margin: 0; border: solid 1px #990000; }
.last { background: #ffcccc; }

JavaScript

$(function () {
  var ul = $("#heatmap ul");
  $.each([39, 6, 1, 3, 5, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 11, 1, 1, 1, 1, 1, 1], function(index, value) { 
    ul.append("<li class='box' value="+value+">"+index+"</li>"); 
  });
  ul.children(":nth-child(7n)").addClass("last");
});