JSFiddle - React, Tailwind, and code Playground

by Jeferson Almeida

HTML

<link rel="stylesheet" href="https://rawgit.com/twbs/bootstrap/master/dist/css/bootstrap.css">
    <section role="main" class="content-body">    
        <div class="rowCustom">
            <div class="column">
                Condominio
            </div>
            <div class="column">
                Predio
            </div>
            <div class="column">
                Andar
            </div>
            <div class="column">
                Apartamento
            </div>
            <div class="column">
                Comodo
            </div>
        </div>

        <div class="rowCustom">
            <div class="column">
                <div class="item">Bosque das flores</div> 
            </div>
            <div class="column">
            </div>
            <div class="column">
            </div>
            <div class="column">
            </div>
            <div class="column">
            </div>
        </div>

        <div class="rowCustom">
            <div class="column">
            </div>
            <div class="column">
                <div class="item">Orquidea</div>       
            </div>
            <div class="column">
            </div>
            <div class="column">
            </div>
            <div class="column">
            </div>
        </div>

        <div class="rowCustom">
            <div class="column">
            </div>
            <div class="column">            
            </div>
            <div class="column">
            <div class="item">1º Andar</div> 
            </div>
            <div class="column">
            </div>
            <div class="column">
            </div>
        </div>

        <div class="rowCustom">
            <div class="column">
            </div>
            <div class="column">
            </div>
            <div class="column">
                <div class="item">2º Andar</div> 
            </div>
            <div class="column">
            </div>
            <div class="column">
...

CSS

.content-body {
    display: table-cell;
    position: relative;
    vertical-align: top;
    padding: 40px;
}
    .rowCustom {
        display: -moz-flex;
        display: -webkit-flex;
        display:            flex;
        -webkit-flex-direction:     row;
        -moz-flex-direction:     row;
        flex-direction:     row;
        display:            -webkit-flex;
        display:            -moz-flex;
        table-layout:       fixed;
        width:              95%;
        margin:             0 auto;
        white-space:        nowrap;
      }
      
      .rowCustom div {
        -webkit-flex: 1 1 auto;
        -moz-flex: 1 1 auto;
        flex: 1 1 auto;
        display:            inline-block;
      }

      .column {
        margin:             0 auto;
        padding:            5px;
        text-align:         center;
      }

    .item{  
        display: inline-block;  
        border: 1px solid #ccc;  
        padding: 5px 10px;  
        text-decoration: none;  
        color: #666;      
        font-family: 'Open Sans',sans-serif;  
        font-size: 14px;  
        font-weight :600;  
        border-radius: 5px;  
        -webkit-border-radius: 5px;  
        -moz-border-radius: 5px;  
    }