JSFiddle - React, Tailwind, and code Playground

HTML

<div class="my-container">
    <p class="stuff">Some stuff</p>
    <p class="stuff">Some stuff</p>
    <p class="stuff">Some stuff</p>
    <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, .my-container:after, .my-container *:first-child:before, .my-container *:first-child:after {
    content: '';
    height: 5px;
    width: 5px;
    position: absolute;
    background: #777;
    border-radius: 50%;
}
/* .my-container:after {
    right: 0;
    top: 0;
} */
.my-container *:first-child:before {
    left: 0;
    bottom: 0;
}
.my-container *:first-child:after {
    bottom: 0;
    right: 0;
}

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