JSFiddle - React, Tailwind, and code Playground

by Softlink

HTML

<div class="card red">1</div>
<div class="card">2</div>
<div class="card green">3</div>
<div class="card">4</div>
<div class="card">5</div>
<div class="card green">6</div>
<div class="card red">7</div>
<div class="card">8</div>
<div class="card green">9</div>
<div class="card red">10</div>
<div class="card">11</div>
<div class="card red">12</div>

CSS

.card{
    float: left;
    width: 25%;
    height: 150px;
    margin: 0 0 30px 0;
    background: #333;
    font-size: 56px;
    color: #fff;
}

.red{
    background: red;
    height: 200px;
}

.green{
    background: green;
    height: 50px;
}