JSFiddle - React, Tailwind, and code Playground

HTML

<main>
    <div class="layer">
        <h1>I'm plain!</h1>
    </div>
    <div class="layers layers-dotted">
        <div class="layer layer-dotted">
            <h2>I have dots!</h2>
        </div>
        <div class="layer layer-dotted">
            <h2>I also have dots.</h2>
        </div>
    </div>
    <div class="layer layer-dark">
        I'm dark and mysterious.
    </div>
</main>

SCSS

.layers-dotted {
    background: linear-gradient(90deg, gold 10px, transparent 1%) center, linear-gradient(#eee 10px, transparent 1%);
    background-size: 11px 11px;
    background-repeat: repeat;
    background-color: red;
}

.layer {
    padding: 2rem 1rem;
}

.layer-dotted {
    h2 {
        display: inline-block;
        background: #eee;
    }
}

.layer-dark {
    background: darkblue;
    color: white;
}