1日のタイムスケジュール(縦棒ブロック)

<div class="d05-14-06-wrap">
          <div class="d05-14-06-axis">
            <span>9</span><span>11</span><span>13</span><span>15</span><span>17</span>
          </div>
          <div class="d05-14-06-track">
            <div class="d05-14-06-block d05-14-06-b1">ミーティング</div>
            <div class="d05-14-06-block d05-14-06-b2">資料作成</div>
            <div class="d05-14-06-block d05-14-06-b3">打ち合わせ</div>
            <div class="d05-14-06-block d05-14-06-b4">休憩</div>
            <div class="d05-14-06-block d05-14-06-b5">レビュー</div>
          </div>
        </div>

.d05-14-06-wrap{display:flex;gap:10px;width:100%;height:200px}
        .d05-14-06-axis{display:flex;flex-direction:column;justify-content:space-between;font-size:9px;color:#9ca3af;padding:2px 0;flex:none}
        .d05-14-06-track{position:relative;flex:1;background:#f9fafb;border-radius:6px;border:1px solid #eee}
        .d05-14-06-block{position:absolute;left:6px;right:6px;border-radius:5px;padding:4px 8px;font-size:9px;font-weight:600;color:#fff;overflow:hidden}
        .d05-14-06-b1{top:2%;height:16%;background:#6366f1}
        .d05-14-06-b2{top:20%;height:10%;background:#0ea5e9}
        .d05-14-06-b3{top:34%;height:22%;background:#10b981}
        .d05-14-06-b4{top:60%;height:14%;background:#f59e0b}
        .d05-14-06-b5{top:78%;height:18%;background:#ef4444}