JSFiddle - React, Tailwind, and code Playground

by chimir

HTML

<svg style="display: none">
  <symbol viewBox="247.3 382.56 100.678 76.891" id="icon-play">
    <title>icon-play</title>
    <g>
      <g>
        <path class="video__svg-path" d="M344.255,400.708c0,0-0.92-7.008-3.785-10.078c-3.632-4.041-7.674-4.066-9.541-4.297 c-13.326-1.023-33.303-1.023-33.303-1.023h-0.051c0,0-19.978,0-33.304,1.023c-1.867,0.23-5.908,0.256-9.54,4.297 c-2.84,3.096-3.786,10.078-3.786,10.078s-0.896,8.211-0.896,16.422v7.699c0,8.21,0.947,16.421,0.947,16.421 s0.921,7.009,3.785,10.078c3.632,4.041,8.364,3.913,10.487,4.349c7.622,0.767,32.356,1.022,32.356,1.022 s20.003-0.025,33.329-1.048c1.867-0.23,5.908-0.256,9.54-4.298c2.84-3.069,3.786-10.078,3.786-10.078s0.946-8.21,0.946-16.421 v-7.699C345.202,408.919,344.255,400.708,344.255,400.708z"
        />
        <path class="ggg" fill="#FFFFFF" d="M297.614,459.449h-0.016c-1.015-0.011-24.946-0.266-32.604-1.037l-0.14-0.014l-0.137-0.028 c-0.271-0.056-0.668-0.107-1.126-0.167c-2.503-0.328-7.159-0.938-10.839-5.019c-3.354-3.616-4.377-10.771-4.483-11.576 l-0.005-0.043c-0.039-0.342-0.965-8.463-0.965-16.736v-7.699c0-8.266,0.875-16.378,0.912-16.72l0.009-0.071 c0.108-0.802,1.155-7.928,4.474-11.557c3.996-4.439,8.531-4.899,10.712-5.121c0.192-0.02,0.37-0.037,0.529-0.058l0.126-0.013 c13.277-1.019,33.312-1.031,33.514-1.031h0.051c0.201,0,20.236,0.013,33.514,1.031l0.126,0.013 c0.159,0.021,0.337,0.038,0.529,0.058c2.179,0.221,6.71,0.682,10.704,5.112c3.354,3.616,4.377,10.771,4.483,11.577l0.005,0.043 c0.039,0.342,0.965,8.459,0.99,16.753v7.708c0,8.273-0.926,16.395-0.965,16.736l-0.007,0.053 c-0.108,0.805-1.156,7.953-4.478,11.562c-3.994,4.435-8.527,4.896-10.707,5.117c-0.193,0.02-0.371,0.037-0.53,0.057l-0.126,0.013 c-13.276,1.02-33.334,1.057-33.535,1.058L297.614,459.449L297.614,459.449z M265.67,452.952 c7.477,0.729,31.216,0.989,31.968,0.997c0.657-0.001,20.135-0.049,33.047-1.036c0.178-0.021,0.371-0.041,0.58-0.062 c1.836-0.186,4.608-0.468,7.186-3.335l0.026-0.029c1.825-1.974,2.853-6.928,3.075-8.552c0.059-0.514,0.926-8.358,0.926-16.08...

CSS

.background {
  position: relative;
  width: 200px;
  height: 200px;
  background-color: #444444;
  cursor: pointer;
}

.background .video__svg {
   fill: #63D1BB;
}

.background:hover .video__svg {
   fill: blue; 
}