JSFiddle - React, Tailwind, and code Playground

by newblt123

HTML

<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 width="329px" height="784.6px" viewBox="200 0 329 784.6" enable-background="new 200 0 329 784.6" xml:space="preserve">
<g>
	<g>
		<path...

CSS

svg path { cursor: pointer; cursor: hand; }

JavaScript

$($('svg path')).mouseenter(function(e){
    e.stopPropagation();
    $(this).stop().animate({
    opacity: 0.25,
  }, 500, function() {
    // Animation complete.
  });
});

$($('svg path')).mouseleave(function(e){
    e.stopPropagation();
    $(this).stop().animate({
    opacity: 1,
  }, 500, function() {
    // Animation complete.
  });
});