JSFiddle - React, Tailwind, and code Playground

by gabrieleromanato

HTML

<div id="grid">
   <div class="grid-row">
       <div class="grid-box">
           Lorem ipsum dolor.
       </div>
       <div class="grid-box">
           Lorem ipsum dolor
       </div>
       <div class="grid-box">
           Lorem ipsum dolor
       </div>
</div>
<div class="grid-row">
       <div class="grid-box">
           Lorem ipsum dolor.
       </div>
       <div class="grid-box">
           Lorem ipsum dolor
       </div>
       <div class="grid-box">
           Lorem ipsum dolor
       </div>
</div>
       
 <div class="grid-row">
       <div class="grid-box">
           Lorem ipsum dolor.
       </div>
       <div class="grid-box">
           Lorem ipsum dolor
       </div>
       <div class="grid-box">
           Lorem ipsum dolor
       </div>
</div>

</div>


<div id="grid2">
   <div class="grid-row">
       <div class="grid-box">
           Lorem ipsum dolor.
       </div>
       <div class="grid-box">
           Lorem ipsum dolor
       </div>
       <div class="grid-box">
           Lorem ipsum dolor
       </div>
</div>
<div class="grid-row">
       <div class="grid-box">
           Lorem ipsum dolor.
       </div>
       <div class="grid-box">
           Lorem ipsum dolor
       </div>
       <div class="grid-box">
           Lorem ipsum dolor
       </div>
</div>
       
 <div class="grid-row">
       <div class="grid-box">
           Lorem ipsum dolor.
       </div>
       <div class="grid-box">
           Lorem ipsum dolor
       </div>
       <div class="grid-box">
           Lorem ipsum dolor
       </div>
</div>

</div>

CSS

#grid, #grid2 {
    width: 100%;
    display: table;
    border-spacing: 10px;
    border-collapse: separate;
}

#grid2 {table-layout: fixed;}

div.grid-row {
    display: table-row;
}

div.grid-box {
    width: 30%;
    height: 20%;
    padding: 10px;
    display: table-cell;
    background: #ccc;
}

#grid2 div.grid-box {
    background: #ff0;
}