JSFiddle - React, Tailwind, and code Playground

HTML

<div class="plate">
  <span class="text">text</span>
</div>

SCSS

$color1: #f9b08a;

.plate {
  display: block;
  width: 300px;
  height: 300px;
  background-color: $color1;
  &:hover {
    background-color: lighten($color1, 5%);
  }
}

.text {
  font-size: 2em;
  display: block;
  color: darken($color1, 30%);
  background-color: lighten($color1, 20%);
}