JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
    <div class="input">input</div>
    <div class="bubble">bubble 1</div>
    <div class="input">input</div>
    <div class="bubble">bubble 2</div>
    <div class="input">input</div>
    <div class="bubble">bubble 3</div>
    <div class="input">input</div>
    <div class="bubble">bubble 4</div>
    <div class="input">input</div>
    <div class="bubble">bubble 5</div>
</div>

CSS

.container > div {
  display: inline-block;
  margin: 5px;
}

    .bubble:nth-child(4n+2) {
    background-color: #4a94ed;
    border-color: #4a64ed;
}

 .bubble:nth-child(4n+4) {
    background-color: #4df200;
    border-color: #00f23d;
}