JSFiddle - React, Tailwind, and code Playground

by David

HTML

<section class="container">
    <article class="thumbnail_small">
        <img src="http://dummyimage.com/424x234/444444" width="100%">
    </article>
    <article class="thumbnail_small">
        <img src="http://dummyimage.com/424x645/444444" width="100%">
    </article>
    <article class="thumbnail_small">
        <img src="http://dummyimage.com/424x343/444444" width="100%">
    </article>
    <article class="thumbnail_small">
        <img src="http://dummyimage.com/424x643/444444" width="100%">
    </article>
    <article class="thumbnail_small">
        <img src="http://dummyimage.com/424x323/444444" width="100%">
    </article>
    <article class="thumbnail_small">
        <img src="http://dummyimage.com/424x234/444444" width="100%">
    </article>
    <article class="thumbnail_small">
        <img src="http://dummyimage.com/424x564/444444" width="100%">
    </article>
    <article class="thumbnail_small">
        <img src="http://dummyimage.com/424x465/444444" width="100%">
    </article>
    <article class="thumbnail_small">
        <img src="http://dummyimage.com/424x400/444444" width="100%">
    </article>
    <article class="thumbnail_small">
        <img src="http://dummyimage.com/424x456/444444" width="100%">
    </article>
    <article class="thumbnail_small">
        <img src="http://dummyimage.com/424x232/444444" width="100%">
    </article>
    <article class="thumbnail_small">
        <img src="http://dummyimage.com/424x543/444444" width="100%">
    </article>
    <article class="thumbnail_small">
        <img src="http://dummyimage.com/424x433/444444" width="100%">
    </article>
    <article class="thumbnail_small">
        <img src="http://dummyimage.com/424x376/444444" width="100%">
    </article>
</section>

CSS

.container {
    width: 848px;
}
.thumbnail_small:nth-child(odd) {
    margin:0 0px 8px 8px;
    width: calc(50% - 12px);
    float:left !important;
    display:block;
}
.thumbnail_small:nth-child(even) {
    margin:0 8px 8px 0px;
    width: calc(50% - 12px);
    float:right !important;
    display:block;
}
.clear {
    clear:both;
}
.clear_l {
    clear:left;
}
.clear_r {
    clear:right;
}