JSFiddle - React, Tailwind, and code Playground

by cristian_cena

HTML

<div class="content_float">
    <div>
        <h2>Titulo 1</h2>
        <p>
            texto de contenido de la caja número 1 
            alineado a la izquierda bla bla bla.
        </p>
    </div>
    <div>
        <h2>Titulo 2</h2>
        <p>
            texto de contenido de la caja número 2 
            alineado a la izquierda bla bla bla.
        </p>
    </div>
    <div>
        <h2>Titulo 3</h2>
        <p>
            texto de contenido de la caja número 3 
            alineado a la izquierda bla bla bla.
        </p>
    </div>
</div>

CSS

/*reset básico*/
*{margin:0; padding:0;}

/*tipografía*/
p, h2 {font-family:arial;}
p     {font-size:12px;}
h2    {font-size:16px; font-weight:bold;}

/*layout*/
.content_float{
    overflow:hidden; /*si no lo das el height será = a cero, googlea "limpiar los float"*/
    width:610px;        
    background:cyan;
}
.content_float div{
    float:left; /*flotas las columnas, los divs*/
    width:180px;
    padding:5px;  
    margin:10px 5px;
    background:#f7d6d6;
}
.content_float div:first-child{  margin-left:10px;}
.content_float div:last-child{   margin-right:10px;}        

/*180 width + (5*2) padding + (5*2) margin + (5*2) margin extra first/last = 610*/