JSFiddle - React, Tailwind, and code Playground

HTML

<div class="one">
  <button class="two"> // 1 button </button>
  <button class="two"> // 2 button </button>
  <button class="two"> // 3 button </button>
</div>
<div class="one">
  <button class="two"> // 4 button </button>
  <button class="two"> // 5 button </button>
  <button class="two"> // 6 button</button>
</div>

SCSS

@import url('https://fonts.googleapis.com/css2?family=Neucha&display=swap');


* {
  box-sizing: inherit;
}

html {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: 'Neucha', cursive;
}
.one {
  &:nth-child(1) {
    .two {
      &:nth-child(1) {
        background: red;
      }
      &:nth-child(2) {
        background: blue;
      }
      &:nth-child(3) {
        background: yellow;
      }
    }
  }
}