JSFiddle - React, Tailwind, and code Playground

by Felipe Miosso

HTML

<div id="boxes">
    <div id="boxes-images">
        <div class="box-image">image</div>
        <div class="box-image">image</div>
    </div>
    
    <div id="boxes-headers">
        <div class="box-header">header</div>
        <div class="box-header">header</div>
    </div>
    
    <div id="boxes-texts">
        <div class="box-text">text</div>
        <div class="box-text">text</div>
    </div>
    
    <div id="boxes-buttons">
        <div class="box-button">button</div>
        <div class="box-button">button</div>
    </div>
</div>

CSS

#boxes { width:500px; height:500px; border:1px solid #DDD; }
#boxes > div { width:100%; clear:both; }
#boxes > div > div { width:100px; height:50px; float:left; }

.box-image  { background-color:#EEE; }
.box-header { background-color:#DDD; }
.box-text   { background-color:#CCC; }
.box-button { background-color:#BBB; }