JSFiddle - React, Tailwind, and code Playground

HTML

<div class="type1">
    <div class="block">Hello</div>
    <div class="block">Hello</div>
    <div class="block">Hello</div>
    <div class="block">Hello</div>
</div>

<div class="type2">
    <div class="block">Hello</div>
    <div class="block">Hello</div>
    <div class="block">Hello</div>
    <div class="block">Hello</div>
</div>

CSS

.type1, .type2 { overflow: hidden; }
div.block
{
    float: left;
    width: 100px;
    height: 100px;
    margin: 1px 1px 1px 0;
    background: red;
}

.type1 div.block:last-child {
    margin: 1px 0 1px 0;
}

.type2 .block + .type2 .block { margin: 1px 0px 1px 1px; }