JSFiddle - React, Tailwind, and code Playground

by Alexandru Gatea

HTML

<div>
    <span data-content="gray" class="gray"></span>
    <span data-content="light-gray" class="light-gray"></span>
    <span data-content="dark-gray" class="dark-gray"></span>
</div>

SCSS

div {
  display: flex;
  width: 100%;
  height: 100vh;
  justify-content: center;
  align-items: center;
  span {
    display: flex;
    width: 100px;
    height: 100px;
    justify-content: center;
    align-items: center;
    &::before {
      content: attr(data-content);
    }
  }
}
.gray {
  background-color: gray;
}
.light-gray {
  background-color: lightgray;
}
.dark-gray {
  background-color: darkgray;
}