JSFiddle - React, Tailwind, and code Playground

HTML

<main>
    <article><img src="http://placehold.it/176x200">Product</article><!--
 --><article><img src="http://placehold.it/176x200">Product</article><!--
 --><article><img src="http://placehold.it/176x200">Product</article><!--
 --><article><img src="http://placehold.it/176x200">Product</article><!--
 --><article><img src="http://placehold.it/176x200">Product</article><!--
 --><article><img src="http://placehold.it/176x200">Product</article><!--
 --><article><img src="http://placehold.it/176x200">Product</article><!--
 --><article><img src="http://placehold.it/176x200">Product</article><!--
 --><article><img src="http://placehold.it/176x200">Product</article><!--
 --><article class="ad"><img src="http://placehold.it/376x200">Ad</article><!--
 --><article><img src="http://placehold.it/176x200">Product</article><!--
 --><article><img src="http://placehold.it/176x200">Product</article><!--
 --><article><img src="http://placehold.it/176x200">Product</article><!--
 --><article><img src="http://placehold.it/176x200">Product</article><!--
 --><article><img src="http://placehold.it/176x200">Product</article>
</main>

CSS

html {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

*, *::before, *::after {
    -webkit-box-sizing: inherit;
    box-sizing: inherit;
}

img {
    display: block;
    max-width: 100%;
    height: auto;
}

main {
    width: 1000px;    
}

article {
    display: inline-block;
    vertical-align: top;
    width: 20%;
    padding-left: 12px;
    padding-right: 12px;
    margin-bottom: 20px;
}

article.ad {
    width: 40%;
}