JSFiddle - React, Tailwind, and code Playground

by Alex

HTML

<span>
<div class="amarelo"></div>
<div class="azul"></div>
<div class="cinza"></div>
<div class="verde"></div>
<div class="roxo"></div>
</span>

SCSS

div{
    height:50px;
    margin-bottom:10px;
    &.amarelo{background-color:yellow;}
    &.azul{background-color:blue;}
    &.cinza{background-color:gray;}
    &.verde{background-color:green;}
    &.roxo{
        background-color:purple;
        &:hover{background-color:#e9e9e9;}
    }
}