JSFiddle - React, Tailwind, and code Playground

HTML

<span class="r"></span>
<span class="g"></span>
<span class="b"></span>
<br>
<span class="color">Цвет: </span>

CSS

.r,.g,.b{
    display:inline-block;
    width:15px;
    height:15px;
}
.r{
    background:#f00;
}
.r:hover ~ .color:after{
    color:#f00;
    content:'Красный';
}
.g{
    background:#0f0;
}
.g:hover ~ .color:after{
    color:#0f0;
    content:'Зеленый'
}
.b{
    background:#00f;
}
.b:hover ~ .color:after{
    color:#00f;
    content:'Синий'
}
.color:after{
    color:#f00;
    content:'Красный'
}