JSFiddle - React, Tailwind, and code Playground

by persianturtle

HTML

<?xml version="1.0" encoding="UTF-8" standalone="no"?>

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="959" height="593">

<g id="fl">
	<title>Florida</title>
	<path d="m 759.8167,439.1428 2.26566,7.3186 3.7297,9.74226 5.33479,9.3763 3.71819,6.30476 4.84982,5.49646 4.04151,3.71819 1.6166,2.90989 -1.13162,1.29328 -0.8083,1.29328 2.90988,7.43639 2.90989,2.90988 2.58657,5.3348 3.55653,5.81978 4.52649,8.24468 1.29329,7.59804 0.48498,11.96288 0.64664,1.77826 -0.32332,3.39487 -2.42491,1.29329 0.32332,1.93992 -0.64664,1.93993 0.32332,2.4249 0.48498,1.93993 -2.74822,3.23321 -3.07155,1.45494 -3.87985,0.16166 -1.45495,1.61661 -2.4249,0.96996 -1.29329,-0.48498 -1.13162,-0.96996 -0.32332,-2.90989 -0.80831,-3.39487 -3.39487,-5.17314 -3.55653,-2.26324 -3.87985,-0.32332 -0.8083,1.29328 -3.07155,-4.36483 -0.64664,-3.55653 -2.58657,-4.04151 -1.77826,-1.13163 -1.61661,2.10159 -1.77826,-0.32332 -2.10159,-5.01148 -2.90989,-3.87985 -2.90989,-5.33479 -2.58656,-3.07155 -3.55653,-3.71819 2.10158,-2.42491 3.23321,-5.49646 -0.16166,-1.6166 -4.52649,-0.96996 -1.61661,0.64664 0.32333,0.64664 2.58656,0.96996 -1.45494,4.5265 -0.8083,0.48498 -1.77827,-4.04151 -1.29328,-4.84982 -0.32332,-2.74823 1.45494,-4.68815 0,-9.53797 -3.07155,-3.71819 -1.29328,-3.07155 -5.17314,-1.29328 -1.93992,-0.64664 -1.61661,-2.58657 -3.39487,-1.61661 -1.13162,-3.39487 -2.74823,-0.96996 -2.42491,-3.71819 -4.20317,-1.45494 -2.90989,-1.45495 -2.58656,0 -4.04152,0.80831 -0.16166,1.93992 0.80831,0.96996 -0.48499,1.13163 -3.07154,-0.16166 -3.71819,3.55653 -3.55654,1.93992 -3.87985,0 -3.23321,1.29329 -0.32332,-2.74823 -1.6166,-1.93993 -2.90989,-1.13162 -1.6166,-1.45495 -8.08303,-3.87985 -7.59804,-1.77826 -4.36483,0.64664 -5.98144,0.48498 -5.98144,2.10159 -3.47924,0.61296 -0.23792,-8.04975 -2.58657,-1.93992 -1.77827,-1.77827 0.32332,-3.07156 10.18462,-1.29328 25.5424,-2.90989 6.78975,-0.64664 5.436,0.28027 2.58657,3.87986 1.45494,1.45494 8.09816,0.51522 10.81975,-0.64664 21.51239,-1.29329 5.44572,-0.67437...

CSS

svg .state {
	fill: #E0E0E0;
	stroke:#646464;
    stroke-width:1;
	stroke-opacity:1;

    -webkit-transition: stroke 0.5s, stroke-width 0.5s;
    -o-transition: stroke 0.5s, stroke-width 0.5s;
    transition: stroke 0.5s, stroke-width 0.5s;
}

svg .state:hover , .state.active {
    cursor: pointer;
    stroke-width: 4;
    stroke-alignment: inner;
    stroke: #000;
    z-index: 100;
}

svg.border {
	opacity:1;
	fill:none;
	stroke:#A9A9A9;
	stroke-width:2;
}