JSFiddle - React, Tailwind, and code Playground

by agib

HTML

<div class="base unit-1">Number 1</div>
<div class="base unit-2">Number 2</div>
<div class="base unit-3">Number 3</div>
<div class="base unit-4">Number 4</div>
<div class="base unit-5">Number 5</div>
<div class="base">Number 6</div>
<div class="base unit-7">Number 7</div>
<div class="base unit-8">Number 8</div>
<div class="base unit-9">Number 9</div>
<div class="base">Number 10</div>
<div class="base unit-11">Number 11</div>
<div class="base unit-12">Number 12</div>

SCSS

body {
  padding: 2rem;
  font-family: sans-serif;
}
.base {
  background-color: mediumseagreen;
  color: white;
  padding: 1rem;
  margin-bottom: .5rem;
  &:not([class*="unit"]) {
    background-color: dodgerblue;
  }
}