JSFiddle - React, Tailwind, and code Playground

by rough cheap

HTML

<h3>
  タイムテーブル詳細
</h3>
<div>
  <div style="display: flex;width:100%; margin-bottom: 15px;">
    <div class="bar zan" style="width: 25%;">
      残業
    </div>
    <div class="bar norm" style="width: 25%;">
      通常
    </div>
    <div class="bar rec nop" style="width: 5%;">
      休憩
    </div>
    <div class="bar norm" style="width: 15%;">
      通常
    </div>
    <div class="bar zan" style="width: 15%;">
      残業
    </div>
    <div class="bar night" style="width: 15%;">
      深夜
    </div>
  </div>
  実績
  <div style="display: flex;width: 100%; margin-bottom: 4px;">
    <div class="bar none" style="width: 20%; padding: 0; text-align: right;">
      出社
    </div>
    <div class="bar zan nop" style="width: 5%">
    </div>
    <div class="bar norm nop" style="width: 25%;">
    </div>
    <div class="bar rec nop" style="width: 5%;">
    </div>
    <div class="bar norm nop" style="width: 15%;">
    </div>
    <div class="bar zan nop" style="width: 15%;">
    </div>
    <div class="bar night nop" style="width: 3%;">
    </div>
    <div class="bar none" style="width: 12%; padding: 0; text-align: left;">
      退社
    </div>
  </div>

  <div style="display: flex; margin-bottom: 4px;">
    <div class="bar none" style="width: 47%; padding:0; text-align: right;">
      外出A
    </div>
    <div class="bar out nop" style="width: 5%;">
    </div>
    <div class="bar none" style="width: 16%; padding:0; text-align: right;">
      外出B
    </div>
    <div class="bar out nop" style="width: 5%;">
    </div>
    <div class="bar none" style="width: 27%;">
    </div>
  </div>
  
  <div style="display: flex;width: 100%; margin-bottom: 4px;">
    <div class="bar none" style="width: 20%; padding: 0; text-align: right;">
      出社
    </div>
    <div class="bar zan nop" style="width: 5%">
    </div>
    <div class="bar norm nop" style="width: 22%;">
    </div>
    <div class="bar rec nop" style="width: 3%;">
    </div>
    <div class="bar rec nop" style="width: 2%;">
    </div>
    <div...

CSS

.bar {
  padding: 7px;
  border: 1px solid grey;
  text-align: center;
}

.none {
  background-color: #ffffff;
  border: none !important;
}

.zan {
  background-color: #FFaacc;
}

.norm {
  background-color: #ccffFF;
}

.rec {
  background-color: #ffffcc;
}

.night {
  background-color: #aaaaff;
}

.out {
  background-color: #aaffcc;
}

.nop {
  padding: 0;
}