JSFiddle - React, Tailwind, and code Playground

HTML

<div id="planning" class="form vertical">
   <div class="jour" data-header="mer.01/03">
      <div>
         <div class="heure" data-header="7h"></div>
         <div class="heure" data-header="8h"></div>
         <div class="heure" data-header="9h"></div>
         <div class="heure" data-header="10h"></div>
         <div class="heure" data-header="11h"></div>
         <div class="heure" data-header="12h"></div>
         <div class="heure" data-header="13h"></div>
         <div class="heure" data-header="14h"></div>
         <div class="heure" data-header="15h"></div>
         <div class="heure" data-header="16h"></div>
         <div class="heure" data-header="17h"></div>
         <div class="heure" data-header="18h"></div>
         <div class="heure" data-header="19h"></div>
         <div class="heure" data-header="20h"></div>
         <div class="horaire" style="top:0px;height:140px"></div>
         <div class="horaire" style="top:420px;height:35px"></div>
      </div>
   </div>
   <div class="jour" data-header="jeu.02/03">
      <div>
         <div class="heure"></div>
         <div class="heure"></div>
         <div class="heure"></div>
         <div class="heure"></div>
         <div class="heure"></div>
         <div class="heure"></div>
         <div class="heure"></div>
         <div class="heure"></div>
         <div class="heure"></div>
         <div class="heure"></div>
         <div class="heure"></div>
         <div class="heure"></div>
         <div class="heure"></div>
         <div class="heure"></div>
         <div class="horaire" style="top:70px;height:140px"></div>
      </div>
   </div>
   <div class="jour" data-header="ven.03/03">
      <div>
         <div class="heure"></div>
         <div class="heure"></div>
         <div class="heure"></div>
         <div class="heure"></div>
         <div class="heure"></div>
         <div class="heure"></div>
         <div class="heure"></div>
         <div class="heure"></div>
         <div...

CSS

div#planning {
    display: flex;
    flex-flow: row;
    justify-content: flex-start;
    align-items: flex-start;
    overflow-x: auto;
    overflow-y: hidden;
}

#planning .heure {
    border: 1px solid #aaa;
    width: 100px;
    height: 35px;
    margin: -0.9px 0 0 -0.9px;
    position: relative;
    box-sizing: border-box;
}

#planning>.jour {
    width: unset;
    max-width: unset;
}

#planning>.jour:before {
    content: attr(data-header);
    font-size: 12px;
    background: #919293;
    color: #fff;
    position: relative;
    top: -6px;
    padding: 0 5px;
    border-radius: 3px;
}
#planning>.jour:first-child {
    margin-left: 24px;
}

.jour:first-child .heure:before {
    content: attr(data-header);
    position: absolute;
    left: -5px;
    top: -7px;
    transform: translateX(-100%);
    font-size: 12px;
}

.horaire {
    position: absolute;
    width: 100%;
    left: 0;
    background: #00adff;
    opacity: 0.5;
}


.jour>div {
    position: relative;
    background: #fff;
}


#formhoraires .miniform input {
    width: 60px;
}

#collaborateur .miniform {
    width: unset;
    margin-top: 10px;
}

div#horaires {
    min-height: unset;
}

#horaires>a
{
    font-size: 14px;
    color: #fff;
    margin: 11px 0;
    padding: 3px;
    box-sizing: border-box;
    position: relative
}
#horaires>a.serre
{
    margin-top: -8px;
    background:#555;
}