JSFiddle - React, Tailwind, and code Playground

HTML

<div class="banner">
    <div class="block">
        <div class="badge"></div>
    </div>

    <div class="block">
        <div class="badge"></div>
    </div>

    <div class="block">
        <div class="badge"></div>
    </div>

    <div class="block">
        <div class="badge"></div>
    </div>
</div>

CSS

body {
   margin:0; 
}
.banner {
    background: #299ed5 url(http://www.benbaker.co.uk//assets/img/header-bg.png) repeat-y;
    /* overflow: auto;  */
}
.block {
    float: left;
    width: 100px;
    height: 100px;
    background-color: #fff;
    margin: 10px;
}
.block:nth-child(1) { background-color: red; }
.block:nth-child(2) { background-color: yellow; }
.block:nth-child(3) { background-color: lime; }
.block:nth-child(4) { background-color: cyan; }