JSFiddle - React, Tailwind, and code Playground

by tjnicolaides

HTML

<script src="http://fonts.googleapis.com/css?family=Roboto:400,700"></script>
<style type="text/css">
  .hadv-diagram-text {
    color: #fff;
    font-family: 'Roboto', serif;
    font-size: 20px;
    text-align: center;
    width: 150px;
    font-weight: 400;
    line-height: 1.4;
  }
  
  .hadv-diagram-text--nw {
    max-width: 160px;
  }
  
  .hadv-diagram-text--ne {
    width: 190px;
  }
  
  .hadv-diagram-text--w {
    width: 100px;
  }
  
  .hadv-diagram-text--center {
    color: #001b46;
    font-size: 36px;
    font-weight: 100;
    width: 100px;
    text-transform: uppercase;
    line-height: 1.2;
  }
  
  .hadv-diagram-link {
    transition: transform 500ms;
    background: url('http://i.imgur.com/7Nlcay7.jpg');
  }
  
  .hadv-diagram-link:hover {
    transform: scale(1.05);
  }
  
  .hadv-diagram-link-bg {
    opacity: 0;
    transition: opacity 500ms;
  }
  
  .hadv-diagram-link:hover .hadv-diagram-link-bg {
    opacity: 1;
  }
  
  .hadv-diagram-link--nw {
    transform-origin: 290px 260px;
  }
  
  .hadv-diagram-link--ne {
    transform-origin: 340px 240px;
  }
  
  .hadv-diagram-link--w {
    transform-origin: 250px 280px;
  }
  
  .hadv-diagram-link--e {
    transform-origin: 290px 290px;
  }
  
  .hadv-diagram-link--s {
    transform-origin: 270px 380px
  }

</style>
<div class="hadv-diagram">


  <svg width="660px" height="1311px" viewBox="-1 -1 613 1311" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <!-- Generator: Sketch 41 (35326) - http://www.bohemiancoding.com/sketch -->
    <desc>Created with Sketch.</desc>
    <defs>
      <path d="M252.642338,241.746614 L291.294897,184.922707 C292.756914,182.773623 293.538853,180.235067 293.538853,177.636593 L293.538853,27.4603382 C293.538853,20.0124429 287.273353,14.1014623 279.837442,14.5198947 C161.385147,21.2008306 61.5056547,97.3555108 20.3155377,202.897321 C17.627185,209.784977 21.3451408,217.516487 28.3696107,219.827352 L170.958159,266.747695...