JSFiddle - React, Tailwind, and code Playground

by Tiago Crizanto

HTML

<div class="dataPanel" style="width: 27540px; height: 732px;">
    <div class="header">
		<div class="row header monthPosition">
			JAN
		</div>
        <div class="row header dayPosition">
            <div class="row day wd" id="dw-1559098800000" data-repdate="1559098800000">
                <div class="fn-label">WED</div>
            </div>
            <div class="row day wd" id="dw-1559185200000" data-repdate="1559185200000">
                <div class="fn-label">THU</div>
            </div>
            <div class="row day wd" id="dw-1559271600000" data-repdate="1559271600000">
                <div class="fn-label">FRI</div>
            </div>
            <div class="row day sa" id="dw-1559358000000" data-repdate="1559358000000">
                <div class="fn-label">SAT</div>
				<div style="background-color: rgba(100, 100, 100, 0.1); height: 673px; width: 30px; bottom: 0px; top: 245px; position: initial;"></div>
            </div>
            <div class="row day sn" id="dw-1559444400000" data-repdate="1559444400000">
                <div class="fn-label">SUN</div>
                <div style="background-color: rgba(100, 100, 100, 0.1); height: 673px; width: 30px; bottom: 0px; top: 245px; position: initial;"></div>
            </div>
            <div class="row day wd" id="dw-1559530800000" data-repdate="1559530800000">
                <div class="fn-label">MON</div>
            </div>
            <div class="row day wd" id="dw-1559617200000" data-repdate="1559617200000">
                <div class="fn-label">TUE</div>
            </div>
            <div class="row day wd" id="dw-1559703600000" data-repdate="1559703600000">
                <div class="fn-label">WED</div>
            </div>
		</div>
	</div>
	<div class="bar" style="top: 63px; left: 90px; width: 29px;"><div class="fn-label">24</div></div>
	<div class="bar" style="top: 63px; left: 120px; width: 29px;"><div class="fn-label">24</div></div>
	<div class="bar" style="top: 63px; left: 150px; width:...

CSS

.dataPanel {
    outline: 1px solid #DDD;
    background-position-y: 15px;
    background-size: 30px 48px;
    background-image: linear-gradient(to left, rgba(153, 152, 153, 0.7) 1px, transparent 1px), linear-gradient(0deg, #E7ECEF 0%, #E7ECEF 53%, #ECF1F4 53%, #ECF1F4 100%);
    background-repeat: repeat;
    position: relative;
	font-family: 'Verdana, sans-serif';
}

.header {
    position: sticky;
    top: 0;
    z-index: 600;
	width: 241px;
	background: #fff;
	height: 63px;
}

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

.dayPosition {
    top: 46px;
}

.monthPosition {
    top: 15px;
}

.day {
	background-color: #fff;
    width: 24px;
    line-height: 24px;
    text-align: center;
    border-bottom: 1px solid #DDD;
    border-right: 1px solid #DDD;
    font-size: 10px;
    color: #007E7A;
}

.row .sa,
.row .sn,
.row .wd {
    height: 24px;
    text-align: center;
    width: 29px;
}

.bar {
	background-color: #D0E4FD;
	height: 18px;
	margin: 0 3px 3px 0;
	position: absolute;
	text-align: center;
	box-shadow: 0 0 1px
	rgba(0, 0, 0, 0.25) inset;
	border-radius: 3px;
}