JSFiddle - React, Tailwind, and code Playground

by Fabio Dan

HTML

<div class="container">
  <div class="scroller">
    <div class="horizontal">
      <div class="day">Mon</div>
      <div class="day">Tue</div>
      <div class="day">Wed</div>
      <div class="day">Thu</div>
      <div class="day">Fri</div>
      <div class="day">Sat</div>
      <div class="day">Sun</div>
      <div class="day">Mon</div>
      <div class="day">Tue</div>
      <div class="day">Wed</div>
      <div class="day">Thu</div>
      <div class="day">Fri</div>
      <div class="day">Sat</div>
      <div class="day">Sun</div>
    </div>
    <div class="vertical">
      <div class="time-column">
        <div class="time">4am</div>
        <div class="time">5am</div>
        <div class="time">6am</div>
        <div class="time">7am</div>
        <div class="time">8am</div>
        <div class="time">9am</div>
        <div class="time">10am</div>
        <div class="time">11am</div>
        <div class="time">12am</div>
        <div class="time">1pm</div>
        <div class="time">2pm</div>
        <div class="time">3pm</div>
        <div class="time">4pm</div>
        <div class="time">5pm</div>
        <div class="time">6pm</div>
        <div class="time">7pm</div>
        <div class="time">8pm</div>
        <div class="time">9pm</div>
        <div class="time">10pm</div>
        <div class="time">11pm</div>
      </div>
      <div class="column">
        <div class="time">$100</div>
        <div class="time">$100</div>
        <div class="time">$100</div>
        <div class="time">$100</div>
        <div class="time">$100</div>
        <div class="time">$100</div>
        <div class="time">$100</div>
        <div class="time">$100</div>
        <div class="time">$100</div>
        <div class="time">$100</div>
        <div class="time">$100</div>
        <div class="time">$100</div>
        <div class="time">$100</div>
        <div class="time">$100</div>
        <div class="time">$100</div>
        <div class="time">$100</div>
        <div...

CSS

.container {
  font-family: Helvetica;
  font-size: 18px;
  background: #CCC;
  height: 300px;  
  overflow: auto;
  width: 200px;

}

.scoller {
  position: relative;
  overflow: auto;
}

.horizontal {
  background: #000;
  color: #FFF;
  display: flex;
  flex-wrap: nowrap;
  flex-direction: row;
  position: sticky;
  top: 0;
  left: auto;
  border-bottom: 2px solid black;
  padding-left: 57px;
  background: mediumpurple;
  z-index: 100;
  width: 1000px
  position: relative;
}

.day {
  padding: 8px 6px;  
  text-align: center;
  background: mediumpurple;
}

.vertical {
  display: flex;
}

.time-column {
  position: sticky;
  left: 0;
  top: auto;
  background: indianred;
  color: #FFF;
}

.time {
  padding: 8px 6px;  
}