JSFiddle - React, Tailwind, and code Playground
HTML
<div id="container">
<div id="content"></div>
</div>
CSS
#container{
position: relative;
width: 100%;
}
#container:before{
content: '';
display: block;
padding-top:100%;
}
#content{
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background:
/* 1st row */
url(http://upload.wikimedia.org/wikipedia/commons/3/3a/Kleurencirkel.svg) no-repeat 0 0 / 25%,
url(http://upload.wikimedia.org/wikipedia/commons/3/3a/Kleurencirkel.svg) no-repeat 33.3% 0 / 25%,
url(http://upload.wikimedia.org/wikipedia/commons/3/3a/Kleurencirkel.svg) no-repeat 66.6% 0 / 25%,
url(http://upload.wikimedia.org/wikipedia/commons/3/3a/Kleurencirkel.svg) no-repeat 100% 0 / 25%,
/* 2nd row */
url(http://upload.wikimedia.org/wikipedia/commons/3/3a/Kleurencirkel.svg) no-repeat 0 33.3% / 25%,
url(http://upload.wikimedia.org/wikipedia/commons/3/3a/Kleurencirkel.svg) no-repeat 33.3% 33.3% / 25%,
url(http://upload.wikimedia.org/wikipedia/commons/3/3a/Kleurencirkel.svg) no-repeat 66.6% 33.3% / 25%,
url(http://upload.wikimedia.org/wikipedia/commons/3/3a/Kleurencirkel.svg) no-repeat 100% 33.3% / 25%,
/* 3rd row */
url(http://upload.wikimedia.org/wikipedia/commons/3/3a/Kleurencirkel.svg) no-repeat 0 66.6% / 25%,
url(http://upload.wikimedia.org/wikipedia/commons/3/3a/Kleurencirkel.svg) no-repeat 33.3% 66.6% / 25%,
url(http://upload.wikimedia.org/wikipedia/commons/3/3a/Kleurencirkel.svg) no-repeat 66.6% 66.6% / 25%,
url(http://upload.wikimedia.org/wikipedia/commons/3/3a/Kleurencirkel.svg) no-repeat 100% 66.6% / 25%,
/* 4th row */
url(http://upload.wikimedia.org/wikipedia/commons/3/3a/Kleurencirkel.svg) no-repeat 0 100% / 25%,
url(http://upload.wikimedia.org/wikipedia/commons/3/3a/Kleurencirkel.svg) no-repeat 33.3% 100% / 25%,
url(http://upload.wikimedia.org/wikipedia/commons/3/3a/Kleurencirkel.svg) no-repeat 66.6% 100% / 25%,
...