JSFiddle - React, Tailwind, and code Playground

by JakobJingleheimer

HTML

<div class="my-container">
    <p class="stuff">Some stuff</p>
</div>

CSS

body {
    margin: 10px; /* for visibility */
}

.my-container {
    background-color: #eee; /* for visibility */
    position: relative;
}

.my-container:before {
    background:
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' x='0px' y='0px' width='8px' height='8px'><circle fill='#ff0000' cx='50%' cy='50%' r='50%'/></svg>") top left no-repeat,
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' x='0px' y='0px' width='8px' height='8px'><circle fill='#ff0000' cx='50%' cy='50%' r='50%'/></svg>") top right no-repeat,
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' x='0px' y='0px' width='8px' height='8px'><circle fill='#ff0000' cx='50%' cy='50%' r='50%'/></svg>") bottom left no-repeat,
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' x='0px' y='0px' width='8px' height='8px'><circle fill='#ff0000' cx='50%' cy='50%' r='50%'/></svg>") bottom right no-repeat
    ;
    content: '';
    display: block;
    height: 100%;
    position: absolute;
    width: 100%;
}

.my-container .stuff {
    padding: 20px;
}