JSFiddle - React, Tailwind, and code Playground

by Jayson Buquia

HTML

<div class="cards">
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
</div>

SCSS

.cards {
  
}

.card {
  width: 50px;
  height: 30px;
  margin-bottom: 2px;
  background-color: teal;
  
  &:nth-child(n + 6) {
    background-color: rgba(teal, .5);
  }
}