JSFiddle - React, Tailwind, and code Playground

by oroce

HTML

<div class="container">
    <div class="header">
    <ul>
        <li>10:00</li>
        <li>11:00</li>
        <li>12:00</li>
        <li>13:00</li>
        <li>14:00</li>
        <li>15:00</li>
        <li>16:00</li>
        <li>17:00</li>
        <li>18:00</li>
        <li>19:00</li>
        <li>20:00</li>
        <li>21:00</li>
        <li>22:00</li>
        <li>23:00</li>
        <li>00:00</li>
        <li>01:00</li>
        <li>02:00</li>
        <li>03:00</li>
        <li>04:00</li>
        <li>05:00</li>
        <li>06:00</li>
    </ul>
</div>
<div class="content">
    <div class="left">
        <div class="row">stage1</div>
        <div class="row">stage2</div>
        <div class="row">stage3</div>
        <div class="row">stage4</div>
        <div class="row">stage5</div>
        <div class="row">stage6</div>
        <div class="row">stage7</div>
        <div class="row">stage8</div>
        <div class="row">stage9</div>
        <div class="row">stage10</div>
        <div class="row">stage11</div>
        <div class="row">stage12</div>
        <div class="row">stage13</div>
    </div>
    <div class="right">
        
    </div>
</div>
</div>

CSS

html{
    width:320px;
    height: 240px;
    overflow:hidden;
}
.header{
    width: 1100px;
    height: 40px;
    padding-top: 10px;
    padding-bottom: 10px;
    background-color:green;
}
.header ul{
    width: 1100px;
    background-color: white;
    height: 20px;
    border-radius: 10px;
}
.header ul li{
    float:left;
    width: 50px;
    border-left: solid 1px black;
    text-align:center;
    font-weight: bold;
}
.header ul li:first-child{
    border-left: none;
}
.content{
    clear:both;
    width: 100%;
}
.left{
    width: 60px;
    height: 520px;
    overflow:auto;
}
.right{
    position:relative;
    left: 60px;   
}
.row{
height: 40px;
    background-color: pink;
    color: white;
}