JSFiddle - React, Tailwind, and code Playground

by achudars

HTML

<div id="distribution">
    <div class="cpt_grouped">
        <div class="title">BULK</div>
        <div class="group"> 
                <div class="cpt">
                    <div class="title">ULD 1</div>
                    <div class="load_BULK">
                        <div class="BULK">B1</div>
                        <div class="BULK">B2</div>
                    </div>
                </div>
        </div>           
    </div>
    <div class="cpt_grouped">
        <div class="title">ULD 4+3</div>
        <div class="group"> 
          <div class="cpt">
            <div class="title">ULD 4</div>
              <div class="load_ULD">
                <div class="left">
                  <div class="ULD_left">L41</div>
                  <div class="ULD_left">L42</div>
                  <div class="ULD_left">L43</div>
                  <div class="ULD_left">L44</div>
                  <div class="ULD_left">L45</div>
                </div>
                <div class="right">
                  <div class="ULD_right">R42</div>
                  <div class="ULD_right">R44</div>
                  <div class="ULD_right">R42</div>
                  <div class="ULD_right">R44</div>
                  <div class="ULD_right">R45</div>
                </div>
                <div class="pallet">
                  <div class="ULD_pallet">P41</div>
                  <div class="ULD_pallet">P42</div>
                </div>
               </div>
          </div>
          <div class="cpt">
                    <div class="title">ULD 3</div>
                    <div class="load_ULD">
                <div class="left">
                  <div class="ULD_left">L31</div>
                  <div class="ULD_left">L32</div>
                  <div class="ULD_left">L33</div>
                </div>
                <div class="right">
                  <div class="ULD_right">R32</div>
                  <div class="ULD_right">R34</div>
                  <div class="ULD_right">R32</div>
      ...

CSS

#distribution {
        margin:0;
        padding:0;
        width:100%;
        background-color: #66CC33;
        height:400px;
        -webkit-flex-direction: row;
        -moz-flex-direction:row;
        flex-direction: row;        
        display: -webkit-flex;
        display: -moz-flex;
        display: flex;
    }
    .cpt {
        display: -webkit-flex;
        display: -moz-flex;
        display: flex;
        -webkit-flex-direction: column;
        -moz-flex-direction:column;
        flex-direction: column;
        height:340px;
        width:100%;
        margin:5px;
        border-radius: 5px;
        background-color: #ED8029;
    }
    .group {
        display: -webkit-flex;
        display: -moz-flex;
        display: flex;
        -webkit-flex-direction: row;
        -moz-flex-direction:row;
        flex-direction: row;
        background-color: #000000;
        color: #FFFFFF;
        border-radius: 5px;
        margin:5px;
        height:350px;
    }
    .cpt_grouped {
        -webkit-flex-direction: column;
        -moz-flex-direction:column;
        flex-direction: column;
        display: -webkit-flex;
        display: -moz-flex;
        display: flex;
        width: 100%; 
        height:390px;
        margin:5px;
        border-radius: 5px;
        background-color: #CC3399;
    }
    
    .title {
        -webkit-flex-direction: row;
        -moz-flex-direction:row;
        flex-direction: row;
        height:20px;
        border-radius: 5px;
        margin:5px;
        background-color: #1A61A9;
        color: #FFFFFF;
        text-align: center;
    }
    
    .load_BULK {
        -webkit-flex-direction: row;
        -moz-flex-direction:row;
        flex-direction: row;
        display: -webkit-flex;
        display: -moz-flex;
        display: flex;
        background-color: #1A61A9;
        color: #FFFFFF;
        text-align: center;
        border-radius: 5px;
        margin:5px;
        height:300px;
}

.load_ULD {
       ...