JSFiddle - React, Tailwind, and code Playground

by Softlink

HTML

<div class="wrap">
    <div class="inner"><img src="http://alpatriott.ru/works/primer/images/romashki.jpg" alt=""></div>
    <div class="inner"><img src="http://alpatriott.ru/works/primer/images/romashki.jpg" alt=""></div>
    <div class="inner"><img src="http://alpatriott.ru/works/primer/images/romashki.jpg" alt=""></div>
    <div class="inner"><img src="http://alpatriott.ru/works/primer/images/romashki.jpg" alt=""></div>
    <div class="inner"><img src="http://alpatriott.ru/works/primer/images/romashki.jpg" alt=""></div>
    <div class="inner"><img src="http://alpatriott.ru/works/primer/images/romashki.jpg" alt=""></div>
    <div class="inner"><img src="http://alpatriott.ru/works/primer/images/romashki.jpg" alt=""></div>
    <div class="inner"><img src="http://alpatriott.ru/works/primer/images/romashki.jpg" alt=""></div>
</div>

CSS

.wrap{
        margin: 50px;
        overflow: hidden;
    }

    .inner{
        float: left;
        width: 24%;
        margin: 0 14% 20px 0;
    }

    .inner:nth-child(3n+3){
        float: right;
        margin: 0;
    }

    .inner img{
        display: block;
        width: 100%;
    }