JSFiddle - React, Tailwind, and code Playground

HTML

<div class="tnwrapper">
		<div class="tn">
				<img src="http://placehold.it/96x96" alt="" class="thumbnail">
		</div>

    <div class="children">    
      <div class="tn">
          <img src="http://placehold.it/96x96" alt="" class="thumbnail child">
      </div>

      <div class="tn">
          <img src="http://placehold.it/96x96" alt="" class="thumbnail child">
      </div>	
      <div class="tn">
          <img src="http://placehold.it/96x96" alt="" class="thumbnail child">
      </div>

      <div class="tn">
          <img src="http://placehold.it/96x96" alt="" class="thumbnail child">
      </div>	
    </div>
	</div>

CSS

.tnwrapper {
  background-color: #000;
  padding: 5px 5px 5px 9px;
  border-radius: 4px;
  display: inline-block;
  flex-direction: row;
  flex-wrap: wrap;
  float: left;
}
.children{
  float:left;
  position: relative;
}
.children .tn:nth-child(even) img{
  position: absolute;
  top: 55px;
  left: -55px;
}

.tnwrapper .tn {
  display: inline-block;
  float: left;
  vertical-align: top;
  position: relative;
  margin-right: 5px;
}
.tnwrapper .tn .thumbnail {
  display: block;
  padding: 4px;
  margin-bottom: 4px;
  line-height: 1.42857143;
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 4px;
}
.tnwrapper .tn .thumbnail.child {
  width: 40px;
}