JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
        <div class="color-wrapper">
          <span></span>
          <span></span>
          <span></span>
          <span></span>
        </div>

CSS

.color-wrapper span {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            display: inline-block;
        }

        .color-wrapper span:nth-child(1)  {
            background-color: #f00;
        }

        .color-wrapper span:nth-child(2) {
            background-color: #0f0;
        }

.color-wrapper span:nth-child(3)  {
    background-color: #0ff;
}
.color-wrapper span:nth-child(4)  {
    background-color: #ff0;
}