JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrap">
    <div class="flex-c">
        <div class="flex-i big"></div>
        <div class="flex-i"></div>
        <div class="flex-i"></div>
        <div class="flex-i"></div>
        <div class="flex-i"></div>
        <div class="flex-i"></div>
        <div class="flex-i"></div>
        <div class="flex-i"></div>
        <div class="flex-i"></div>
        <div class="flex-i"></div>
        <div class="flex-i"></div>
        <div class="flex-i"></div>
        <div class="flex-i"></div>
        <div class="flex-i"></div>
        <div class="flex-i"></div>
    </div>
</div>

CSS

.flex-c {
    display: block;
    height: 450px;
    width: auto;
}

.flex-i {
    height: 100px;
    width: 100px;
    float:left;
    background: gray;
    margin: 0 10px 10px 0;
}

.big {
    width: 210px;
    height: 210px;
    float:left;
}

.wrap {
    display: inline-block;
}