JSFiddle - React, Tailwind, and code Playground

by Jens Kühn

HTML

<h1 class="red" style="color: green">
test
</h1>

<svg width="400" height="110" class="red">
  <rect width="300" height="100" style="fill:blue;stroke:blue" />
</svg>



<svg width="400" height="110" class="red">
  <rect width="300" height="100" fill="blue" stroke="blue" />
</svg>

<svg width="400" height="110">
  <rect width="300" height="100" style="fill:var(--color1);stroke:var(--color1);" />
</svg>
<svg width="400" height="110">
  <rect width="300" height="100" fill="var(--color2)" stroke="var(--color1)" />
</svg>

CSS

html {
  --color1: yellow;
}

h1 {
  color: blue
}
.red {
  color: red !important;
}

svg.red rect {
  fill: red !important;
  stroke: red !important;
}

svg rect {
  fill: green !important;
}