JSFiddle - React, Tailwind, and code Playground

by davorpeic

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
<div class="container-grid">

  <div style="grid-column: span 4;" class="empty"></div>
  <div style="display:none;"></div>
  <div style="display:none;"></div>
  <div style="display:none;"></div>

  <div class="toggle main-line"><i class="fas fa-chevron-down"></i></div>
  <div class="main-line">Lob</div>
  <div class="main-line">Region</div>
  <div class="main-line">Plant</div>

  <div style="grid-row: span 8;" class="empty"></div>
  <div style="grid-row: span 8;" class="rotate"><span>DAILY BUILD</span></div>
  <div style="grid-row: span 5;"><span>CEN</span></div>
  <div>N011Local</div>

  <div style="display:none;"></div>
  <div style="display:none;"></div>
  <div style="display:none;"></div>
  <div>N014Local</div>

  <div style="display:none;"></div>
  <div style="display:none;"></div>
  <div style="display:none;"></div>
  <div>Local</div>

  <div style="display:none;"></div>
  <div style="display:none;"></div>
  <div style="display:none;"></div>
  <div>Latest</div>

  <div style="display:none;"></div>
  <div style="display:none;"></div>
  <div style="display:none;"></div>
  <div>IMS 3.13</div>

  <div style="display:none;"></div>
  <div style="display:none;"></div>
  <div style="grid-row: span 3;">DEV</div>
  <div>Pernis</div>

  <div style="display:none;"></div>
  <div style="display:none;"></div>
  <div style="display:none;"></div>
  <div>Norco</div>

  <div style="display:none;"></div>
  <div style="display:none;"></div>
  <div style="display:none;"></div>
  <div>Bukom</div>

  <div class="toggle main-line"><i class="fas fa-chevron-down"></i></div>
  <div class="main-line">Lob</div>
  <div class="main-line">Region</div>
  <div class="main-line">Plant</div>

  <div style="grid-row: span 4;" class="empty"></div>
  <div style="grid-row: span 4;" class="rotate"><span>PROD BUILD</span></div>
  <div style="grid-row: span 4;">PROD</div>
  <div>N017Local</div>
 ...

SCSS

.container-grid {
  display: grid;
  grid-template-columns: 30px repeat(3, minmax(0, 1fr));
  grid-template-rows: 25px repeat(auto-fill, minmax(25px, 1fr));
  font-size: 10px;
  width: 350px;
  border-top: solid 1px #d8d8d8;
  border-left: solid 1px #d8d8d8;  
  font-family: Arial;
  font-weight: bold;
  font-size: 12px;
  
  .fas {
    color: #4C7FCD;
    font-size: 16px;
  }

  div {
    padding: 10px 5px;
    border-right: solid 1px #d8d8d8;
    border-bottom: solid 1px #d8d8d8;
    align-items: center;
    //align-self: center;
    background-color: rgba(0,0,0,0.02);
    color: rgba(0,0,0,0.8);
    display: flex;
  }
  
  .main-line {
    background-color: rgba(163,181,208,0.3);
    text-transform: uppercase;
    color: #000;
  }
  
  .rotate {
    position: relative;
    overflow: hidden;
    
    span {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%) rotate(-90deg);
      display: block;
      text-align: center;   
      white-space: nowrap;
    }
  }

  
  
  .empty {
    background-color: #fff;
  }
  
  .toggle {
    text-align: center;
    cursor: pointer;
    &:hover {
      background-color: rgba(163,181,208,0.6);
    }
  }
}