JSFiddle - React, Tailwind, and code Playground
HTML
<div id="container">
<article class="left
">
<img src="http://placehold.it/180x180" />
</article>
<article class="left">
<img src="http://placehold.it/180x180" />
</article>
<article class="left
">
<img src="http://placehold.it/180x180" />
</article>
<article class="cover">
<img src="http://placehold.it/180x180" />
</article>
<article class="left">
<img src="http://placehold.it/180x180" />
</article>
<article class="right">
<img src="http://placehold.it/180x180" />
</article>
<article class="cover">
<img src="http://placehold.it/180x180" />
</article>
<article class="left">
<img src="http://placehold.it/180x180" />
</article>
<article class="right">
<img src="http://placehold.it/180x180" />
</article>
<article class="participants-thumbnail">
<img src="http://placehold.it/180x180" />
</article>
<article class="cover">
<img src="http://placehold.it/180x180" />
</article>
<article class="left">
<img src="http://placehold.it/180x180" />
</article>
<article class="right">
<img src="http://placehold.it/180x180" />
</article>
<article class="cover">
<img src="http://placehold.it/180x180" />
</article>
<article class="left">
<img src="http://placehold.it/180x180" />
</article>
<article class="right">
<img src="http://placehold.it/180x180" />
</article>
<article class="cover">
<img src="http://placehold.it/180x180" />
</article>
<article class="left">
<img src="http://placehold.it/180x180" />
</article>
<article class="right">
<img src="http://placehold.it/180x180" />
</article>
</div>
CSS
article.cover {
width: 180px;
float: left;
margin-right: 73px;
margin-bottom: 73px;
}
article.left:nth-of-type(4n) {
margin-right: 0;
}
article.right:nth-of-type(4n+1) {
margin-left: 18px;
margin-right: 73px;
}