JSFiddle - React, Tailwind, and code Playground

by martinschaer

HTML

<div class="wrapper">

<div id="a" class="caja">A</div>

<div id="b" class="caja">B</div>

<div id="c" class="caja">C</div>

<div id="d" class="caja">D</div>

<div id="e" class="caja">E</div>

<div id="f" class="caja">F</div>

</div> <!-- .wrapper -->

CSS

.caja {
    width: 48px;
    height: 48px;
    margin: 10px 0 0 10px;
    background-color: #ccc;
    border: 1px solid #666;
    float: left;
    overflow: hidden; /* para que las cajas se comporten */
}

.wrapper {
    width: 180px;
    border: 1px dotted #666;
    margin: 10px auto;
    padding: 0 10px 10px 0;
    overflow: hidden; /* para que contenga a todos sus elementos flotantes. leer mas: http://www.quirksmode.org/css/clearing.html */
}

#c {
    height: 108px;
    float: right;
}

#d {
    width: 108px;
    height: 108px;
}

#e, #f {
    float: right;
}