JSFiddle - React, Tailwind, and code Playground

by Vladimir

HTML

<svg version="1.1" height="30px" width="120px">
  <rect x="0" y="0" width="30px" height="30px" fill="var(--block1)"/>
  <rect x="30" y="0" width="30px" height="30px" fill="var(--block2)"/>
  <rect x="60" y="0" width="30px" height="30px" fill="var(--block3)"/>
  <rect x="90" y="0" width="30px" height="30px" fill="var(--block4)"/>
</svg>

CSS

svg {
  --block1: red; 
  --block2: green; 
  --block3: blue; 
  --block4: orange;
  cursor: pointer;
}
svg:hover {
  --block1: purple; 
  --block2: yellow; 
  --block3: black; 
  --block4: lime;
}