JSFiddle - React, Tailwind, and code Playground

by danield770

HTML

<svg class="play" width="252" height="252" xmlns="http://www.w3.org/2000/svg">
 <!-- Created with SVG-edit - http://svg-edit.googlecode.com/ -->
 <g>
  <title>Layer 1</title>
  <circle class="outer" r="123.16656" cy="128" cx="128" 0 fill="#000000"/>
  <circle class="inner" r="97" cy="127" cx="128" fill="#ffffff"/>
  <path class="triangle" transform="rotate(89.2704 134.893 125.778)" id="svg_6" d="m93.75,161.77814l41.14282,-72l41.14288,72l-82.28571,0z" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null"  fill="#000000"/>
 </g>
</svg>

CSS

body
{
    background: silver;
}
.play:hover .outer, .play:hover .triangle
{
    fill: #fff;
}
.play:hover .inner
{
    fill: #000;
}