JSFiddle - React, Tailwind, and code Playground

by agib

HTML

<div class="timeline timeline-header">
    <div class="timeline-header-slot">1 o'clock</div>
    <div class="timeline-header-slot">2 o'clock</div>
    <div class="timeline-header-slot">3 o'clock</div>
    <div class="timeline-header-slot">4 o'clock</div>
    <div class="timeline-header-slot">5 o'clock</div>
    <div class="timeline-header-slot">6 o'clock</div>
    <div class="timeline-header-slot">7 o'clock</div>
    <div class="timeline-header-slot">8 o'clock</div>
    <div class="timeline-header-slot">9 o'clock</div>
    <div class="timeline-header-slot">10 o'clock</div>
    <div class="timeline-header-slot">11 o'clock</div>
    <div class="timeline-header-slot">12 o'clock</div>
    <div class="timeline-header-slot">13 o'clock</div>
    <div class="timeline-header-slot">14 o'clock</div>
    <div class="timeline-header-slot">15 o'clock</div>
    <div class="timeline-header-slot">16 o'clock</div>
    <div class="timeline-header-slot">17 o'clock</div>
    <div class="timeline-header-slot">18 o'clock</div>
    <div class="timeline-header-slot">19 o'clock</div>
    <div class="timeline-header-slot">20 o'clock</div>
  </div>

  <header class="title-wrapper">
    <h2 class="title">Stage 1</h2>
  </header>
  <div class="timeline">
    <div class="timeline-slot">Slot 1</div>
    <div class="timeline-slot">Slot 2</div>
    <div class="timeline-slot">Slot 3</div>
    <div class="timeline-slot">Slot 4</div>
    <div class="timeline-slot">Slot 5</div>
    <div class="timeline-slot">Slot 6</div>
    <div class="timeline-slot">Slot 7</div>
    <div class="timeline-slot">Slot 8</div>
    <div class="timeline-slot">Slot 9</div>
    <div class="timeline-slot">Slot 10</div>
    <div class="timeline-slot">Slot 11</div>
    <div class="timeline-slot">Slot 12</div>
    <div class="timeline-slot">Slot 13</div>
    <div class="timeline-slot">Slot 14</div>
    <div class="timeline-slot">Slot 15</div>
    <div class="timeline-slot">Slot 16</div>
    <div class="timeline-slot">Slot...

CSS

:root {
  --timeline-slot-count: 20;
  --timeline-slot-width: 10rem;
  --timeline-slot-gap: .2rem;
}

* {
  box-sizing: border-box;
  font-family: sans-serif;
}

html {
  font-size: 16px;
  padding: 0;
  margin: 0;
}

body {
  width: calc(var(--timeline-slot-count) * var(--timeline-slot-width) + var(--timeline-slot-count) * var(--timeline-slot-gap));
}

.timeline {
  display: flex;
}

.timeline-header {
  position: sticky;
  top: 0;
  margin-bottom: 1rem;
}

.timeline-header-slot {
  background-color: #aabbcc;
  opacity: .85;
  padding: .5rem;
  margin-right: var(--timeline-slot-gap);
}

.timeline-slot {
  background-color: #bbeeff;
  padding: .5rem;
  height: 4rem;
  margin: 1rem var(--timeline-slot-gap) 1rem 0;
  
}

.timeline-header-slot,
.timeline-slot {
   flex: var(--timeline-slot-width) 0 0;
 }

.title {
  display: inline;
  padding: .5rem;
  left: 0;
  font-size: 1rem;
  margin: 0;
  z-index: -1;
}

.timeline-header,
.title {
  position: sticky;
}