JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<body>
    <header>
        <h1><span id="user">Greta Persson</span><span id="month">2013-06</span></h1>
    </header>
    <div class="headersInfo">&nbsp;
        <div class="dutyHeaders">
            <span class="normalDuty">Tid</span>
            <span class="standByDuty">Jour</span>
        </div>
    </div>
    <div class="dayInfo">
        <div class="workShiftInfo">
            <div class="workShiftSchedule">Schema</div>
            <div class="workShift">07:00-16:00</div>
            <div class="workShift">15:00-22:00</div>
            <div class="workShift">22:00-07:00 22:00-07:00 22:00-07:00 22:00-07:00 22:00-07:00 22:00-07:00 22:00-07:00</div>
            <div class="totalWorkShiftTime">
                <span class="normalDuty">16</span>
                <span class="standByDuty">9</span>
            </div>
        </div>
        <div class="workedShiftInfo">
            <div class="workedShift">07:00-16:00<img src="yes_16x16.bmp"></div>
            <div class="workedShiftTime">
                <span class="normalDuty">9</span>
                <span class="standByDuty">0</span>
            </div>
        </div>
        <div class="workedShiftInfo">
            <div class="workedShift" style="background-color: red">15:30-22:00<img src="no_16x16.bmp"></div>
            <div class="workedShiftTime">
                <span class="normalDuty">6,5</span>
                <span class="standByDuty">0</span>
            </div>
        </div>
        <div class="workedShiftInfo">
            <div class="workedShift">22:00-07:00<img src="yes_16x16.bmp"></div>
            <div class="workedShiftTime">
                <span class="normalDuty">0</span>
                <span class="standByDuty">9</span>
            </div>
        </div>
        <div class="workedShiftInfo">
            <div class="workedShift">22:00-07:00<img src="yes_16x16.bmp"></div>
            <div class="workedShiftTime">
                <span class="normalDuty">0</span>
            ...

CSS

* {

            border: 1px dotted lightgreen;
        }

        header, .headersInfo, .dayInfo {
            position: relative;
            width: 80%;
            min-width: 500px;
            margin: auto;
        }
        .workShiftInfo, .workedShiftInfo, .totalWorkedShiftInfo {
            position: relative;
            display: block;
        }

        .headersInfo .dutyHeaders {
            border-bottom: 1px solid black;
        }

        .workShiftInfo {
            border-left: 1px solid black;
            border-top: 1px solid black;
            border-right: 1px solid black;
            border-radius: 10px 0 0 0 ;
        }

        .workedShiftInfo {
            border-left: 1px solid black;
            border-right: 1px solid black;
        }

        .workedShiftInfo:nth-last-of-type(2) {
            /* background-color: lightblue; */
	    border-bottom: 1px solid black;
            border-radius: 0 0 0 10px;
        }

        .workShiftSchedule, .workShift, .totalWorkShiftTime {
            position: relative;
            display: inline-block;
        }

        .workedShift, .workedShiftTime {
            display: inline-block;
        }

        .dutyHeaders, .totalWorkShiftTime, .workedShiftTime, .totalWorkedShiftTime, #month {
            display: inline-block;
            position: absolute;
            right: 0;
            min-width: 16%;
            text-align: center;
        }

        .normalDuty {
            display: inline-block;
            min-width: 50px;
        }

        .standByDuty {
            display: inline-block;
            min-width: 50px;
        }

        div {
            font-size: 14px;
        }

	.dutyHeaders {
            border-left: 1px solid black;
            border-top: 1px solid black;
            border-right: 1px solid black;
            border-radius: 10px 10px 0 0;
        }

        .totalWorkedShiftTime {
            border-left: 1px solid black;
            border-bottom: 1px solid...