JSFiddle - React, Tailwind, and code Playground

by Arcanst

HTML

<div class="availability-box" style="height:500px;width:765px;">
  <div class="availability-box-header" style="height:30px;">
    <div class="availability-box-header-lines">
      <div class="vertical-line" style="left:50px; height:30px"></div>
      <div class="vertical-line" style="left:150px; height:30px"></div>
      <div class="vertical-line" style="left:250px; height:30px"></div>
      <div class="vertical-line" style="left:350px; height:30px"></div>
      <div class="vertical-line" style="left:450px; height:30px"></div>
      <div class="vertical-line" style="left:550px; height:30px"></div>
      <div class="vertical-line" style="left:650px; height:30px"></div>
      <div class="horizontal-line" style="top:30px;width:765px;"></div>
    </div>
    <div class="availability-box-header-corner" style="width:50px;">CRNR</div>
    <div class="availability-box-header-item" style="width:100px;">Monday</div>
    <div class="availability-box-header-item" style="width:100px;">Tuesday</div>
    <div class="availability-box-header-item" style="width:100px;">Wednesday</div>
    <div class="availability-box-header-item" style="width:100px;">Thursday</div>
    <div class="availability-box-header-item" style="width:100px;">Friday</div>
    <div class="availability-box-header-item" style="width:100px;">Saturday</div>
    <div class="availability-box-header-item" style="width:100px;">Sunday</div>
  </div>
  <div class="availability-box-container" style="top:30px;height:450px;width:765px;">
    <div class="availability-box-container-lines">
      <div class="horizontal-line" style="width:750px;top:0;"></div>
      <div class="horizontal-line" style="width:750px;top:20px;"></div>
      <div class="horizontal-line" style="width:750px;top:41px;"></div>
      <div class="horizontal-line" style="width:750px;top:60px;"></div>
      <div class="horizontal-line" style="width:750px;top:81px;"></div>
      <div class="horizontal-line" style="width:750px;top:100px;"></div>
      <div...

CSS

.vertical-line {
  position: absolute;
  width: 1px;
  background-color: #3c8dbc;
}

.horizontal-line {
  position: absolute;
  height: 1px;
  background-color: #3c8dbc;
}

.availability-box {
  position: relative;
  outline: 2px solid lightgray;
  background: white;
}

.availability-box-header {
  position: absolute;
  display: flex;
  flex-direction: row;
}

.availability-box-container {
  position: absolute;
  overflow-y: scroll;
}

.availability-box-header-item {
  text-align: center;
}

.availability-box-container-lines {
  position: absolute;
}

.availability-box-time-stamps {
  position: absolute;
}

.availability-box-time-stamp {
  text-align: center;
  width:50px;
  height:20px;
}

.availability-box-availabilities {
  position: absolute;
}