JSFiddle - React, Tailwind, and code Playground

by BramVanroy

HTML

<div id="bv-calendar" class="bv-cal-wrapper">
  <div class="bv-cal-hours-wrapper">
    <div class="bv-cal-day-h">
      <h3>Hours</h3>
    </div>
    <div class="bv-cal-hours">
      <div class="bv-cal-hour">
        <span>08.00</span>
      </div>
      <div class="bv-cal-hour">
        <span>09.00</span>
      </div>
      <div class="bv-cal-hour">
        <span>10.00</span>
      </div>
      <div class="bv-cal-hour">
        <span>11.00</span>
      </div>
      <div class="bv-cal-hour">
        <span>12.00</span>
      </div>
    </div>
  </div>

  <div class="bv-cal-days">
    <div class="bv-cal-day">
      <div class="bv-cal-day-h">
        <h3>Monday</h3>
      </div>
      <div class="bv-cal-hours">
        <div class="bv-cal-hour">
          <span>08.00</span>
        </div>
        <div class="bv-cal-hour">
          <span>09.00</span>
        </div>
        <div class="bv-cal-hour">
          <span>10.00</span>
        </div>
        <div class="bv-cal-hour">
          <span>11.00</span>
        </div>
        <div class="bv-cal-hour">
          <span>12.00</span>
        </div>
      </div>
    </div>
    <div class="bv-cal-day">
      <div class="bv-cal-day-h">
        <h3>Tuesday</h3>
      </div>
      <div class="bv-cal-hours">
        <div class="bv-cal-hour">
          <span>08.00</span>
        </div>
        <div class="bv-cal-hour">
          <span>09.00</span>
        </div>
        <div class="bv-cal-hour">
          <span>10.00</span>
        </div>
        <div class="bv-cal-hour">
          <span>11.00</span>
        </div>
        <div class="bv-cal-hour">
          <span>12.00</span>
        </div>
      </div>
    </div>
    <div class="bv-cal-day">
      <div class="bv-cal-day-h">
        <h3>Wednesday</h3>
      </div>
      <div class="bv-cal-hours">
        <div class="bv-cal-hour">
          <span>08.00</span>
        </div>
        <div class="bv-cal-hour">
          <span>09.00</span>
        </div>
        <div...

SCSS

#bv-calendar {
  display: inline-flex;
  background-color: #f7f7f7;
  border-radius: 4px;
  border: 1px solid #d7d7d7;
  > div {
    padding: 2px 0;
  }
  > .bv-cal-hours-wrapper {
    background-color: #d7d7d7;
    .bv-cal-day-h {
      h3 {
        cursor: none;
        pointer-events: none;
        color: transparent;
        user-select: none;
      }
    }
  }
}

.bv-cal-days {
  display: flex;
}

.bv-cal-day-h {
  h3 {
    margin: 0;
    font-size: 14px;
  }
}

.bv-cal-hour {
  &:nth-child(even) {
    background-color: rgba(0, 0, 0, 0.08);
  }
}

.bv-cal-day-h,
.bv-cal-hour {
  padding: 0 4px;
}