JSFiddle - React, Tailwind, and code Playground

HTML

<div id="canvas-container-wrapper">
    <div id="canvas-container">
        <div id="dates-container" style="width: 10472px; height: 39px;">

             <div class="calendar-fulldate" style="left:50px; width:18px;"><span class="day-name">Su</span>         <br>         <span class="date">1</span>         <br>         <span class="month">             January         </span>     </div>      <div class="calendar-fulldate" style="left:68px; width:18px;"><span class="day-name">Mo</span>         <br>         <span class="date">2</span>     </div>      <div class="calendar-fulldate" style="left:86px; width:18px;"><span class="day-name">Tu</span>         <br>         <span class="date">3</span>     </div>      <div class="calendar-fulldate" style="left:104px; width:18px;"><span class="day-name">We</span>         <br>         <span class="date">4</span>     </div>      <div class="calendar-fulldate" style="left:122px; width:18px;"><span class="day-name">Th</span>         <br>         <span class="date">5</span>     </div>      <div class="calendar-fulldate" style="left:140px; width:18px;"><span class="day-name">Fr</span>         <br>         <span class="date">6</span>     </div>      <div class="calendar-fulldate" style="left:158px; width:18px;"><span class="day-name">Sa</span>         <br>         <span class="date">7</span>     </div>      <div class="calendar-fulldate" style="left:176px; width:18px;"><span class="day-name">Su</span>         <br>         <span class="date">8</span>     </div>      <div class="calendar-fulldate" style="left:194px; width:18px;"><span class="day-name">Mo</span>         <br>         <span class="date">9</span>     </div>      <div class="calendar-fulldate" style="left:212px; width:18px;"><span class="day-name">Tu</span>         <br>         <span class="date">10</span>     </div>      <div class="calendar-fulldate" style="left:230px; width:18px;"><span class="day-name">We</span>         <br>         <span class="date">11</span>     </div>...

CSS

/* line 3, ../../sass/sass/page.manage.pricingV2.scss */
#canvas-container-wrapper {
  position: relative;
  overflow-x: scroll;
  overflow-y: hidden;
}

/* line 9, ../../sass/sass/page.manage.pricingV2.scss */
#canvas-container {
  width: 1200px;
  overflow: hidden;
}

/* line 14, ../../sass/sass/page.manage.pricingV2.scss */
#dates-container {
  font-size: 10px;
}
/* line 16, ../../sass/sass/page.manage.pricingV2.scss */
#dates-container div {
  display: inline-block;
  padding: 0px;
  margin: 0px;
  position: absolute;
  top: 0px;
}

/* line 25, ../../sass/sass/page.manage.pricingV2.scss */
#plans-container {
  overflow: hidden;
  background: url("/css/images/pricing-strategiest/main_grey_pattern.png") repeat;
  background-size: 100%;
}

/* line 31, ../../sass/sass/page.manage.pricingV2.scss */
.plan {
  width: 100%;
  font-size: 12px;
}
/* line 35, ../../sass/sass/page.manage.pricingV2.scss */
.plan .head {
  height: 26px;
}
/* line 38, ../../sass/sass/page.manage.pricingV2.scss */
.plan .head .left-corner {
  background-image: url("/css/images/pricing-strategiest/roomtype_yellow_header_left.png");
  height: 26px;
  width: 8px;
  float: left;
}
/* line 45, ../../sass/sass/page.manage.pricingV2.scss */
.plan .head .right-corner {
  background-image: url("/css/images/pricing-strategiest/roomtype_yellow_header_right.png");
  height: 26px;
  width: 8px;
  float: right;
}
/* line 52, ../../sass/sass/page.manage.pricingV2.scss */
.plan .head .head-content {
  padding-top: 8px;
  width: 100%;
}
/* line 56, ../../sass/sass/page.manage.pricingV2.scss */
.plan .head .head-content .toggle {
  background-repeat: no-repeat;
  margin-left: 10px;
  width: 11px;
  height: 11px;
  display: inline-block;
}
/* line 57, ../../sass/sass/page.manage.pricingV2.scss */
.plan .head .head-content .toggle.up {
  background-image: url("/css/images/pricing-strategiest/arrow_up.png");
}
/* line 60, ../../sass/sass/page.manage.pricingV2.scss */
.plan .head .head-content .toggle.down {
 ...