JSFiddle - React, Tailwind, and code Playground

by ijdonnelly11

HTML

<div id="crys">
  <svg id="crystal" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1552.59 1053.68">
      <a href="http://ijdonnelly.com/2018/01/22/a3-logo-animation/">
      <polyline points="154.59 396.52 154.59 291.75 77.29 239.37 0 291.75 0 396.52 0.27 396.7 0 396.7 0 658.44 0 694.63 0 763.21 77.29 815.59 154.59 763.21 154.59 658.44" fill="url(#img1)" id="one" />
      </a>
      <a href="http://ijdonnelly.com/2018/01/21/together-after-effects-short-film/">
    <polyline points="387.58 295.93 387.58 191.16 310.29 138.78 233 191.16 233 295.93 233.27 296.11 233 296.11 233 759.02 233 779.94 233 863.79 310.29 916.17 387.58 863.79 387.58 759.02" fill="url(#img2)" id="two" />
    </a>
    <a href="http://ijdonnelly.com/2018/01/21/afterglow-maya-premiere/">
    <polyline points="620.59 232.27 620.59 127.5 543.29 75.12 466 127.5 466 232.27 466.27 232.45 466 232.45 466 823.96 466 876.7 466 928.72 543.29 981.11 620.59 928.72 620.59 823.96" fill="url(#img3)" id="three" />
    </a>
    <a href="http://ijdonnelly.com/2017/10/03/scanning-electron-microscopy-to-vr-assets/">
    <polyline points="853.59 157.15 853.59 52.38 776.29 0 699 52.38 699 143.33 699 157.15 699 896.53 699 905.99 699 1001.3 776.29 1053.68 853.59 1001.3 853.59 896.53 853.06 896.17" fill="url(#img4)" id="four" />
    </a>
    <a href="http://ijdonnelly.com/2018/01/18/dslr-automata-max-msp/">
    <polyline points="1398 658.44 1398 763.21 1475.29 815.59 1552.59 763.21 1552.59 658.44 1552.32 658.26 1552.59 658.26 1552.59 396.52 1552.59 360.32 1552.59 291.75 1475.29 239.37 1398 291.75 1398 396.52" fill="url(#img5)" id="five" />
    </a>
    <a href="http://ijdonnelly.com/2017/10/03/melodi-musical-puzzle-game-unity-c/">
    <polyline points="1165 759.02 1165 863.79 1242.29 916.17 1319.59 863.79 1319.59 759.02 1319.32 758.84 1319.59 758.84 1319.59 295.93 1319.59 275.02 1319.59 191.16 1242.29 138.78 1165 191.16 1165 295.93" fill="url(#img6)" id="six" />
    </a>
    <a...

CSS

@import url('https://fonts.googleapis.com/css?family=Arvo');

.home {
  -webkit-touch-callout: none;
-webkit-user-select: none;
}

.customize-unpreviewable {
  display:none;
}


.site-title{
  font-family: 'Arvo', sans-serif;
}

.section-inner.thin {
    max-width: 760px;
  top:-350px;
}

.site-header {
  padding:20px 0;
}

.home .title {
  display: none;
}

.home .site-footer {
  display: none;
}

.home {
  overflow: hidden;}

#crystal {
  z-index:1000;
  padding-top:2%;
  padding-bottom:2%;
  display:fixed;
}


#one {

   -webkit-transition: all .2s ease-in-out;  
}

@media (pointer: coarse) { 
#one:active{
      -webkit-filter: grayscale(0);
      
        transform: scale(1.01,1.01);
  transform-origin: center;
    }
}

@media (pointer: fine) { 
#one:hover{
      -webkit-filter: grayscale(0);
      cursor: pointer;
        transform: scale(1.01,1.01);
  transform-origin: center;
    }
}
#two {

   -webkit-transition: all .2s ease-in-out;
  -webkit-user-select: none;
-webkit-touch-callout: none; 
}

#two:hover, #two.hover_effect,
#two:active{
    cursor: pointer;
    filter: none;
      -webkit-filter: grayscale(0);
        transform: scale(1.01,1.01);
  transform-origin: center;
      
    }

#three {

   -webkit-transition: all .2s ease-in-out;
  
}

#three:hover {
    cursor: pointer;
    filter: none;
      -webkit-filter: grayscale(0);
        transform: scale(1.01,1.01);
  transform-origin: center;
      
    }

#four {

   -webkit-transition: all .2s ease-in-out;
  
}

#four:hover {
    cursor: pointer;
    filter: none;
      -webkit-filter: grayscale(0);
      transform: scale(1.01,1.01);
  transform-origin: center;
    }

#five {

   -webkit-transition: all .2s ease-in-out;
  
}

#five:hover {
    cursor: pointer;
    filter: none;
      -webkit-filter: grayscale(0);
  transform: scale(1.01,1.01);
  transform-origin: center;
      
    }

#six {

   -webkit-transition: all .2s ease-in-out;
  
}

#six:hover {
    cursor: pointer;
    filter: none;
   ...

JavaScript

var images = new Array()
			function preload() {
				for (i = 0; i < preload.arguments.length; i++) {
					images[i] = new Image()
					images[i].src = preload.arguments[i]
				}
			}
			preload(
				"http://ijdonnelly.com/wp-content/uploads/2018/01/a3min.gif",
				"http://ijdonnelly.com/wp-content/uploads/2018/01/togethergifmin.gif",
				"http://ijdonnelly.com/wp-content/uploads/2018/01/afterglowmin.gif",
        "http://ijdonnelly.com/wp-content/uploads/2018/01/antmin.gif",
        "http://ijdonnelly.com/wp-content/uploads/2018/01/Shuttermin.gif",
        "http://ijdonnelly.com/wp-content/uploads/2018/01/melodimin-1.gif",
        "http://ijdonnelly.com/wp-content/uploads/2018/01/harp.gif"
			)

var sOne = "http://ijdonnelly.com/wp-content/uploads/2017/12/A3cover-2.png";
var lOne = "http://ijdonnelly.com/wp-content/uploads/2018/01/a3min.gif";

var sTwo =  "http://ijdonnelly.com/wp-content/uploads/2017/12/TogetherCover.jpg";
var lTwo =  "http://ijdonnelly.com/wp-content/uploads/2018/01/togethergifmin.gif";

var sThree =  "http://ijdonnelly.com/wp-content/uploads/2017/09/Still-glow.png";
var lThree =  "http://ijdonnelly.com/wp-content/uploads/2018/01/afterglowmin.gif";

var sFour =  "http://ijdonnelly.com/wp-content/uploads/2017/12/AntCover-2.jpg";
var lFour =  "http://ijdonnelly.com/wp-content/uploads/2018/01/antmin.gif";

var sFive =  "http://ijdonnelly.com/wp-content/uploads/2018/01/shutstil-1.jpg";
var lFive =  "http://ijdonnelly.com/wp-content/uploads/2018/01/Shuttermin.gif";

var sSix =  "http://ijdonnelly.com/wp-content/uploads/2018/01/melodistillll.jpg";
var lSix =  "http://ijdonnelly.com/wp-content/uploads/2018/01/melodimin-1.gif";

var sSeven =  "http://ijdonnelly.com/wp-content/uploads/2018/01/harppic.jpg";
var lSeven =  "http://ijdonnelly.com/wp-content/uploads/2018/01/harp.gif";

$(function() {
  $("#one").hover(function() {
      var value = $('#img1 image');
      value.attr('xlink:href', lOne);
      value.attr('x', '-224');
      var value2 =...