JSFiddle - React, Tailwind, and code Playground

by Seungrae Lee

HTML

<div id="kintai" class="group" style="min-height:80px;">
    <div class="block bh" style="min-height:80px;">
        <p style="line-height:55px;">勤怠</p>
    </div>
    <div class="block">
        <p>労働日数<br />xxxx</p>
    </div>
    <div class="block">
        <p>(内)休日日数<br />xxxx</p>
    </div>
    <div class="block">
        <p>年休日数<br />xxxx</p>
    </div>
    <div class="block">
        <p>積休日数<br />xxxx</p>
    </div>
    <div class="block">
        <p>有給休暇<br />xxxx</p>
    </div>
    <div class="block">
        <p>無給準出<br />xxxx</p>
    </div>
    <div class="block">
        <p>欠勤日数<br />xxxx</p>
    </div>
</div>
<div id="kinmu" class="group p1" style="min-height:40px;">
    <div class="block bh">
        <p>勤務時間</p>
    </div>
    <div class="block">
        <p>労働時間<br />xxxx</p>
    </div>
    <div class="block">
        <p>深夜時間<br />xxxx</p>
    </div>
    <div class="block">
        <p>交替制時間<br />xxxx</p>
    </div>
    <div class="block">
        <p>早残時間<br />xxxx</p>
    </div>
    <div class="block">
        <p>休出時間<br />xxxx</p>
    </div>
</div>
<div id="shikyu" class="group p1" style="min-height:160px;">
    <div class="innerHeader" style="width:80px; min-height:160px;">
        <div class="block bh" style="min-height:160px; min-width:36px;">
            <p style="line-height:45px;">支<br/>給<br/>額</p>
        </div>
        <div class="block bh" style="min-width:20px; min-height:79px;">
            <p style="line-height:15px;">基<br/>準<br />内</p>
        </div>
        <div class="block bh" style="min-width:20px; min-height:79px;">
            <p style="line-height:15px;">基<br/>準<br />外</p>
        </div>
    </div>
    <div class="block">
        <p>本給<br />xxxx</p>
    </div>
    <div class="block">
        <p>職能給<br />xxxx</p>
    </div>
    <div class="block">
        <p>年齢加給<br />xxx</p>
    </div>
    <div class="block">
        <p>職能加給<br />xxx</p>
    </div>
    <div class="block">
        <p></p>
    </div>
    <div class="block">
       ...

CSS

div {
    font-size: 11px;
}
p {
    line-height: 10px;
}
.block {
    float: left;
    min-width: 70px;
    height: 38.5px;
    border: 1px solid #fff;
    text-align: center;
    padding: 0px 5px;
    background-color: #E7E7E7;
}
.group {
    width: 550px;
    border: 1px dashed #ccc;
}
.p0 {
    margin: 5px 0px 0px 0px;
}
.p1 {
    margin: 10px 0px 0px 0px;
}
.p2 {
    margin: 20px 0px 0px 0px;
}
.p3 {
    margin: 30px 0px 0px 0px;
}
.bh {
    font-size: 13px;
    background-color: #C6D7EF;
}
.innerHeader {
    float: left;
    padding: 0px;
}