JSFiddle - React, Tailwind, and code Playground

HTML

<div class="area">1</div>
<div class="area">2</div>
<div class="area">3</div>
<div class="area">4</div>

CSS

.area{
  height: 100px;
  width: 100px;
}

.area:first-of-type{
  background-color: red;
}

.area:last-of-type{
  background-color: green;
}