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;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  border-radius: 2px;
}

.thumbnail_small:nth-child(even) {
  margin: 0 8px 8px 0px;
  width: calc(50% - 12px);
  float: right !important;
  display: block;
}

.thumb_img {
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
}

.id_layer {
  position: absolute;
  font: 700 90px/90px Arial;
  color: red;
  z-index: 3;
}

.clear {
  clear: both;
}

.clear_l {
  clear: left;
}

.clear_r {
  clear: right;
}