JSFiddle - React, Tailwind, and code Playground

by iamjoshhansen

HTML

<table class="check-table">
  <tr>
    <th></th>
    <th class="check-header">
      <div class="date-header date-header--dow">Sun</div>
      <div class="date-header date-header--date">2-04</div>
    </th>
    <th class="check-header">
      <div class="date-header date-header--dow">Mon</div>
      <div class="date-header date-header--date">2-05</div>
    </th>
    <th class="check-header">
      <div class="date-header date-header--dow">Tue</div>
      <div class="date-header date-header--date">2-06</div>
    </th>
    <th class="check-header">
      <div class="date-header date-header--dow">Wed</div>
      <div class="date-header date-header--date">2-07</div>
    </th>
    <th class="check-header">
      <div class="date-header date-header--dow">Thu</div>
      <div class="date-header date-header--date">2-08</div>
    </th>
    <th class="check-header">
      <div class="date-header date-header--dow">Fri</div>
      <div class="date-header date-header--date">2-09</div>
    </th>
    <th class="check-header">
      <div class="date-header date-header--dow">Sat</div>
      <div class="date-header date-header--date">2-10</div>
    </th>
  </tr>
  <tr>
    <td class="label">Happy Juice</td>
    <td><div class="check"></div></td>
    <td><div class="check"></div></td>
    <td><div class="check"></div></td>
    <td><div class="check"></div></td>
    <td><div class="check"></div></td>
    <td><div class="check"></div></td>
    <td><div class="check"></div></td>
  </tr>
  <tr>
    <td class="label">Greens</td>
    <td><div class="check"></div></td>
    <td><div class="check"></div></td>
    <td><div class="check"></div></td>
    <td><div class="check"></div></td>
    <td><div class="check"></div></td>
    <td><div class="check"></div></td>
    <td><div class="check"></div></td>
  </tr>
  <tr>
    <td class="label">Yoga</td>
    <td><div class="check"></div></td>
    <td><div class="check"></div></td>
    <td><div class="check"></div></td>
    <td><div...

SCSS

html, body {
  margin: 0;
  padding: 0;
  font-size: 16px;
  font-family: Courier New, monospace;
  background: #fff;
}

table.check-table {
  margin: 0 auto;
  border-collapse: collapse;

  th, td {
    font-weight: normal;
    text-align: left;
    margin: 0;
    padding: 0;
    height: 2.5em;
  }
  
  th {
    transform: rotate(-90deg);
    
    &.check-header {
      width: 2.5em;
    }
  }
  
  .date-header {
    font-size: 0.75em;
  }
  
  .date-header--date {
    opacity: 0.5;
  }
  
  .check {
    font-size: 2em;
    margin: auto;
    border: solid 1px #ccc;
    width: 1em;
    height: 1em;
  }

  .label {
    padding-right: 1em;
  }
}

.day {
  padding: 1rem;
  
  &__date {
    margin: 0;
    padding: 0;
  }
  
  &__entry {
    display: grid;
    margin: 0.5em 0 0 0;
    
    grid-template-columns: min-content 1fr;
    grid-template-rows: 1fr min-content;
    
    grid-template-areas:
      'label      underline1'
      'underline2 underline2';
    
    .day__entry__label {
      grid-area: label;
      margin: 0;
      padding: 0;
      font-weight: normal;
    }
    
    .underline {
      border-bottom: solid 1px #eee;
      height: 1.5em;
    }
    
    .underline--1 {
      grid-area: underline1;
    }
    .underline--2 {
      grid-area: underline2;
    }
  }
}