JSFiddle - React, Tailwind, and code Playground

HTML

<div class="PMT_7b64f687">
  <div class="timeLine_7b64f687">
    <div class="timeLine_header_7b64f687"></div>
    <div class="timeLine_Body_7b64f687">
      <div class="tl_background_7b64f687">
        <ul class="days_7b64f687">
          <li class="Groups_7b64f687">
            <div class="Group_7b64f687" style="position:fixed; left:0;">
              <div class="Name_7b64f687">Group Title</div>
              <div class="Tasks_7b64f687">
                <div class="Task_7b64f687">
                  <div class="TaskName_7b64f687">Test</div>
                </div>
              </div>
            </div>
          </li>
          <li style="width: 1860px; left: 200px;" class="month_7b64f687 January">January</li>
          <li style="width: 1680px; left: 2000px;" class="month_7b64f687 February">February</li>
          <li style="width: 1860px; left: 3680px;" class="month_7b64f687 March">March</li>
          <li style="width: 1800px; left: 5540px;" class="month_7b64f687 April">April</li>
          <li style="width: 1860px; left: 7340px;" class="month_7b64f687 May">May</li>
          <li style="width: 1800px; left: 9200px;" class="month_7b64f687 June">June</li>
          <li style="width: 1860px; left: 11000px;" class="month_7b64f687 July">July</li>
          <li style="width: 1860px; left: 12860px;" class="month_7b64f687 August">August</li>
          <li style="width: 1800px; left: 14720px;" class="month_7b64f687 September">September</li>
          <li style="width: 1860px; left: 16520px;" class="month_7b64f687 October">October</li>
          <li style="width: 1800px; left: 18380px;" class="month_7b64f687 November">November</li>
          <li style="width: 1860px; left: 20180px;" class="month_7b64f687 December">December</li>
          <li class=" with_line" style="width: 60px; margin-left:200px;">1</li>
          <li class=" with_line" style="width: 60px; ">2</li>
          <li class=" with_line" style="width: 60px; ">3</li>
          <li class=" with_line"...

CSS

.PMT_7b64f687 .timeLine_7b64f687 .timeLine_header_7b64f687 {
  width: 100%;
  height: 50px;
  color: #fff;
  font-size: 18px;
  background-color: #5a626f
}

.PMT_7b64f687 .timeLine_7b64f687 .timeLine_Body_7b64f687 {
  min-height: 290px;
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden
}

.PMT_7b64f687 .timeLine_7b64f687 .timeLine_Body_7b64f687 .tl_background_7b64f687 {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  color: #fff;
  position: absolute;
  top: 0;
  left: 0;
  will-change: transform;
  width: 100%;
  height: 100%
}

.PMT_7b64f687 .timeLine_7b64f687 .timeLine_Body_7b64f687 .tl_background_7b64f687 ul.days_7b64f687 {
  white-space: nowrap;
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
  background-color: #1c1f3b;
  position: relative;
  overflow-y: hidden;
}

.PMT_7b64f687 .timeLine_7b64f687 .timeLine_Body_7b64f687 .tl_background_7b64f687 ul.days_7b64f687 li {
  width: 60px;
  display: inline-block;
  text-align: center;
  vertical-align: top;
  height: 100%;
  padding-top: 10px;
  font-size: 11px;
  color: #fff
}

.PMT_7b64f687 .timeLine_7b64f687 .timeLine_Body_7b64f687 .tl_background_7b64f687 ul.days_7b64f687 li.month_7b64f687 {
  position: absolute;
  left: 0;
  color: #fff;
  display: inline-block;
  text-align: center;
  vertical-align: top;
  padding-top: 25px;
  font-size: 25px;
  opacity: .7
}

.PMT_7b64f687 .timeLine_7b64f687 .timeLine_Body_7b64f687 .tl_background_7b64f687 ul.days_7b64f687 li.Groups_7b64f687 {
  position: absolute;
  top: 40px;
  left: 10px
}

.PMT_7b64f687 .timeLine_7b64f687 .timeLine_Body_7b64f687 .tl_background_7b64f687 ul.days_7b64f687 li.Groups_7b64f687 .Group_7b64f687 .Name_7b64f687 {
  color: #fff;
  font-size: 20px;
  opacity: .7
}

.PMT_7b64f687 .timeLine_7b64f687 .timeLine_Body_7b64f687 .tl_background_7b64f687 ul.days_7b64f687 li.Groups_7b64f687 .Group_7b64f687 .Tasks_7b64f687 .Task_7b64f687 .TaskName_7b64f687 {
  color: #fff;
 ...