JSFiddle - React, Tailwind, and code Playground

by orjan

HTML

<div id="article"><p><img src="http://dummyimage.com/600x400/000/fff" class="imgLeft"><img src="http://dummyimage.com/600x400/000/fff" class="imgLeft"><img src="http://dummyimage.com/600x400/000/fff" class="imgLeft"></p><p class="break">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque pretium sem at libero rhoncus, non ultrices leo maximus. Praesent urna nisi, lobortis ut volutpat ut, pretium et justo. Vivamus at lorem eget felis ornare mollis. Aliquam quis mollis arcu. In porta ligula sit amet tellus dictum scelerisque. Nullam feugiat blandit lorem ut pretium. Aenean risus odio, feugiat eu dapibus ac, iaculis eu elit. Phasellus volutpat finibus arcu, eget euismod dui sagittis nec. Duis sed libero felis. Cras in fringilla erat. Vestibulum eu eros lorem. Mauris ornare, risus ultrices efficitur tristique, urna quam volutpat tellus, pulvinar blandit justo dolor et massa. Pellentesque id tincidunt justo, nec eleifend ipsum. Cras diam nisl, rhoncus tincidunt semper vel, malesuada ac ipsum.
    </p>
</div>

CSS

#article {
    margin: 20px;
    padding: 10px 20px;
    border: 1px solid #ccc;
}

.imgLeft {
    width: 30%;
    margin-right: 15px;
    margin-bottom: 1em;
    display: block;
    float: left;
}
.break {
    clear:both;  
}