JSFiddle - React, Tailwind, and code Playground

by Tiago Crizanto

HTML

<div class="gantt">
    <div class="fn-gantt">
        <div class="fn-content">
            <div class="leftPanel">
                <div class="row spacer" style="height: 111px;">
                    <div class="filter-fields">
                        
                    </div>
                </div>
                <div class="row-container">
                    <div class="row name row0 fn-wide " id="rowheader0" data-offset="0"><span class="fn-label-mi"><span title="Field">Field</span><span title="Field1">Field1</span><span title="CA">A</span><span title="N/A">N/A</span><span title="1">1</span></span>
                    </div>
                    <div class="row name row1 fn-wide " id="rowheader1" data-offset="24"><span class="fn-label-mi"><span title="Field">Field</span><span title="Field1">Field1</span><span title="CEI">B</span><span title="N/A">N/A</span><span title="2">2</span></span>
                    </div>
                    <div class="row name row2 fn-wide " id="rowheader2" data-offset="48"><span class="fn-label-mi"><span title="Field">Field</span><span title="Field1">Field1</span><span title="TO">C</span><span title="N/A">N/A</span><span title="3">3</span></span>
                    </div>
                </div>
            </div>
            <div class="rightPanel">
                <div class="dataPanel" style="width: 480px; height: 183px;">
                    <div class="header top-shadow">
                        <div class="row header yearPosition">
                            <div class="row year" style="width: 30px;">
                                <div class="fn-label">2019</div>
                            </div>
                            <div class="row year" style="width: 450px;">
                                <div class="fn-label">2020</div>
                            </div>
                        </div>
                        <div class="row header monthPosition">
                            <div class="row month"...

CSS

.fn-gantt {
    width: 100%;
    font-family: Circular Std, sans-serif;
}

.fn-gantt *,
.fn-gantt *:after,
.fn-gantt *:before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.fn-gantt .fn-content {
    position: absolute;
    width: 100%;
    height: 100%;
}

.fn-gantt .row {
    float: left;
    height: 24px;
    line-height: 24px;
    margin: 0;
}

/* === LEFT PANEL === */

.fn-gantt .leftPanel {
    overflow: hidden;
    float: left;
    width: 350px;
    border-right: 1px solid #DDD;
    z-index: 999;
    height: calc(100% - 115px);
    background-color: rgb(249, 251, 252);
    box-shadow: 5px 11px 14px 0 rgba(0, 0, 0, 0.2);
    position: absolute;
}

.fn-gantt .leftPanel .fn-label {
    display: inline-block;
    color: #484A4D;
    width: 110px;
    white-space: nowrap;

}

.fn-gantt .leftPanel .row {
    border-bottom: 1px solid rgb(242, 244, 245);
}

.fn-gantt .leftPanel .name,
.fn-gantt .leftPanel .desc {
    float: left;
    height: 24px;
    width: 50%;
}

.fn-gantt .leftPanel .name {
    font-weight: normal;
}

.fn-gantt .leftPanel .fn-wide,
.fn-gantt .leftPanel .fn-wide .fn-label {
    width: 100%;
    font-size: 10px;
}

.fn-gantt .leftPanel .fn-wide .fn-label:hover {
    background-color: rgb(217, 219, 220);
}

.fn-label-mi span {
    display: inline-block;
    background-image: url(../../assets/images/arrow-right.svg);
    background-position: 0px 5px;
    background-size: 5px;
    background-repeat: no-repeat;
    padding-left: 10px;
    padding-right: 10px;
    min-width: 64px;
    font-size: 9px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

.fn-label-mi span:first-child {
    background: none;
    padding: 0;
    margin-left: 6px;
    font-size: 9px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

.fn-gantt .leftPanel .spacer {
    width: 100%;
    position: sticky;
    z-index: 100;
    top: -1px;
    background-color:...