JSFiddle - React, Tailwind, and code Playground

by Felipe Miosso

HTML

<div id="boxes">
    <div class="box">
        <div class="box-image">image</div>
        <div class="box-header">header</div>
        <div class="box-text">text</div>
        <div class="box-button">button</div>
    </div>
    
    <div class="box">
        <div class="box-image">image</div>
        <div class="box-header">header</div>
        <div class="box-text">text</div>
        <div class="box-button">button</div>
    </div>
    
    <div class="box">
        <div class="box-image">image</div>
        <div class="box-header">header</div>
        <div class="box-text">text</div>
        <div class="box-button">button</div>
    </div>
    
    <div class="box">
        <div class="box-image">image</div>
        <div class="box-header">header</div>
        <div class="box-text">text</div>
        <div class="box-button">button</div>
    </div>
</div>

CSS

#boxes { width:500px; height:500px; border:1px solid #DDD; }
.box { float:left; width:100px; height: 100px; }
.box + .box { margin-left:20px; }
.box > div { width:100px; height:25px; clear:both; }

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