JSFiddle - React, Tailwind, and code Playground

by Kenneth Luplau-Brøgger

HTML

<div class="calendar">
  <div class="row">
    <div></div>
    <div>
      Day
    </div>
    <div>
      Day
    </div>
    <div>
      Day
    </div>
    <div>
      Day
    </div>
    <div>
      Day
    </div>
  </div>
  
  <div class="row">
    <div class="advisor">
      Kenneth
    </div>
    <div>
      Day
    </div>
    <div>
      Day
    </div>
    <div>
      Day
    </div>
    <div>
      Day
    </div>
    <div>
      Day
    </div>
  </div>
</div>

SCSS

.calendar {
  background: red;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
}

.row:nth-child(2) {
  background: blue;
  grid-column: 1 / 1;
}

/* 

.row {
  background: blue;
  grid-template-columns: repeat(6, 1fr);
}

.advisor {
  background: yellow;
  grid-column: 1 / 2;
}

.entries {
  display: grid;
  background: green;
  grid-template-columns: repeat(5, 1fr);
  grid-column: 2 / 7;
}
     */