JSFiddle - React, Tailwind, and code Playground

HTML

<div class="clearfix wrap">
    <img src="http://placehold.it/200x400/00ff00" alt=""/><img src="http://placehold.it/200x400/green" alt=""/><img src="http://placehold.it/200x400/00ff00" alt=""/><img src="http://placehold.it/200x400/green" alt=""/><img src="http://placehold.it/200x400/00ff00" alt=""/><img src="http://placehold.it/200x400/green" alt=""/><img src="http://placehold.it/200x400/00ff00" alt=""/><img src="http://placehold.it/200x400/green" alt=""/><img src="http://placehold.it/200x400/00ff00" alt=""/><img src="http://placehold.it/200x400/green" alt=""/><img src="http://placehold.it/200x400/00ff00" alt=""/><img src="http://placehold.it/200x400/green" alt=""/>    
</div>

CSS

.clearfix:before, .clearfix:after {
	content: "\0020";
	display: block;
	height: 0;
	overflow: hidden;
}
	
.clearfix:after {
	clear: both;
}


.no-clearfix {
    clear: both;
}

.wrap {
    padding: 20px;
    background-color: #bad;
}

    .wrap img {
        float: left;
    }