JSFiddle - React, Tailwind, and code Playground
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="t-cpb"></div>
<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">
...
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;
//border:1px solid #cecece;
min-width: 170px;
}
.column::after {
border:1px solid #cecece;
}
.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;
}
.t-e {
display: inline-block;
height: 28px;
width: 28px;
}
.t-b {
display: inline-block;
height: 28px;
width: 28px;
background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSI+CiAgIDxwb2x5bGluZSBwb2ludHM9IjE0LDAgMTQsMjgiIGZpbGw9Im5vbmUiIHN0cm9rZT0iYmxhY2siIC8+Cjwvc3ZnPiA=');
}
.t-cb {
display: inline-block;
height: 28px;
width: 28px;
background-image:...