JSFiddle - React, Tailwind, and code Playground

by Kaleb Hornsby

HTML

<!--svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="5811.6" height="5110.0" viewBox="-25468,-22465 58116,51100">
<g stroke="black" fill="none" stroke-linejoin="round" stroke-width="92" clip-path="url(#state_clip_path)">
<use xlink:href="#state_outline" fill="white" stroke-width="406" />
</g>
<use xlink:href="#Greene" stroke="none" fill="red" />
</svg-->
<div id="paper"></div>

JavaScript

var R = Raphael("paper",394.52,435.82);
var map = {
    Barry: R.path("m -23280.783 27323.271 -4.978 260.648 76.474 2.035 -6.334 209.515 -2.037 85.524 0 19.232 -1.131 13.802 0.227 19.233 -1.132 23.983 -1.131 15.837 -3.167 78.737 0 23.757 -2.263 58.149 -3.168 76.248 -5.43 140.053 -2.037 43.669 -91.86 -1.358 -288.477 -3.395 -29.413 -0.226 -169.014 -2.715 -56.791 -0.904 -19.232 -0.227 -342.326 -6.561 26.02 -622.659 12.216 -208.383 -12.896 0 17.875 -259.517 z")
  , Barton: R.path("m -24191.466 25514.121 -5.431 144.578 -24.888 586.232 -1067.027 -57.017 1.131 -45.93 14.48 -637.818 0.906 -43.668 z")
  , Cedar: R.path("m -24165.447 24855.034 507.267 30.772 -5.431 147.972 366.99 12.897 -7.467 218.563 45.253 3.168 -18.554 419.028 -89.372 -3.168 -141.637 -4.299 -81.225 -2.035 -46.609 -2.264 -560.665 -16.969 5.431 -144.578 10.859 -292.549 -4.751 1.131 z")
  , Christian: R.path("m -23272.865 26883.88 365.632 9.277 74.439 2.036 653.43 16.517 328.524 3.846 -1.132 42.084 -2.714 225.351 -7.241 363.144 -0.904 71.723 -232.14 -6.11 -318.117 -9.502 -256.349 -6.109 -73.081 0.226 17.196 -441.88 -551.388 -12.218 z")
  , Dade: R.path("m -23277.389 25687.434 0 10.181 -4.525 88.92 -9.504 265.173 -11.764 372.192 -860.229 -30.998 -63.805 -3.392 5.431 -144.579 24.888 -586.232 560.665 16.969 46.609 2.264 81.225 2.035 141.637 4.299 z")
  , Dallas: R.path("m -22185.247 24864.085 430.567 18.101 -12.671 438.26 30.318 1.131 -15.838 598.675 -438.712 -6.788 -1.81 175.35 -216.98 -8.598 19.684 -775.156 -35.974 -1.132 6.561 -190.055 11.992 -256.124 z")
  , Greene: R.path("m -23291.418 26051.708 881.045 28.508 216.98 8.598 -8.145 363.142 35.975 1.131 -10.861 278.748 -2.94 179.875 -653.43 -16.517 -74.439 -2.036 -365.632 -9.277 11.54 -458.849 -41.857 -1.131 z")
  , Hickory: R.path("m -22170.088 24465.646 -15.159 398.439 -222.863 -6.336 -11.992 256.124 -349.566 -12.67 -31.224 -1.131 -391.199 -14.935 1.132 -34.164 8.145 1.133 8.597 -217.434 109.057 4.299 22.172 -400.927 327.169 10.635 33.712 1.131 z")
  ,...