JSFiddle - React, Tailwind, and code Playground

by slawe

HTML

<div id="portfolio" data-uk-scrollspy="{cls:'portfolio'}" class="content">
        <h2>PORTFOLIO</h2><img id="tree" usemap="#tree" src="http://marcchatila.holdings/assets/img/STABLO.JPG" alt="portfolio">
  <map id="map" name="tree"></map>
        <div id="links">
          <ul>
            <li><a href="http://www.mcholding.info" data-title="Marc Chatila Holding" class="roll">Marc Chatila Holding</a></li>
            <li><a href="http://www.inventorz.ch" data-title="Inventorz" class="roll">Inventorz</a></li>
            <li><a href="http://www.adamascapital.ch" data-title="Adamas Capital" class="roll">Adamas Capital</a></li>
            <li><a>Marc Chatila Energy One</a></li>
            <li><a href="http://www.sonadigital.ch" data-title="Sona" class="roll">Sona</a></li>
            <li><a href="http://www.abc-cybernetics.com" data-title="ABC Cybernetics" class="roll">ABC Cybernetics</a></li>
          </ul>
          <ul>
            <li><a href="http://www.abcdesign.rs" data-title="ABC Design" class="roll">ABC Design</a></li>
            <li><a href="http://www.codeion.com" data-title="CodeIon" class="roll">CodeIon</a></li>
            <li><a>WatchMe</a></li>
            <li><a>Benzyne</a></li>
            <li><a href="http://www.www.euroicc.com" data-title="EuroICC" class="roll">EuroICC</a></li>
            <li><a>Toman Home Automation</a></li>
          </ul>
        </div>
      </div>

CSS

#portfolio {
    text-align: center;
}
#portfolio h2 {
    text-align: left;
}
#portfolio .column {
    text-align: center;
}
#portfolio .column:last-child img {
    width: 100%;
    max-width: 280px;
    margin-top: 10px;
}
#portfolio #links {
    text-align: center;
}
#portfolio #links ul {
    display: inline-block;
    margin: 0 auto;
    padding: 0;
    list-style: none;
}
#portfolio #links ul:first-child {
    margin-right: 10px;
}
#portfolio #links ul:first-child li {
    text-align: right;
}
#portfolio #links ul:last-child {
    margin-left: 10px;
}
#portfolio #links ul:last-child li {
    text-align: left;
}
#portfolio #links ul li {
    padding: 2px 0;
}
#portfolio #links ul li a {
    position: relative;
    display: inline-block;
    outline: none;
    color: #6e9acf;
    vertical-align: bottom;
    text-decoration: none;
    white-space: nowrap;
    cursor: default;
}
#portfolio #links ul li a:link {
    cursor: pointer;
}
#portfolio #links ul li a:link:before {
    visibility: hidden;
    position: absolute;
    top: 0;
    left: 0;
    padding: 1.8em 1em 1em 3.7em;
    min-width: 200px;
    height: 200%;
    background: #001c3e url(http://marcchatila.holdings/img/link.svg) no-repeat -3em 50%;
    background-size: auto 40%;
    content: attr(href);
    white-space: pre-wrap;
    word-break: break-all;
    font-weight: 600;
    font-size: 100%;
    line-height: 1.2;
    opacity: 0;
    -webkit-transition: all 300ms;
    -moz-transition: all 300ms;
    -o-transition: all 300ms;
    transition: all 300ms;
    -webkit-transition-delay: 100ms;
    -moz-transition-delay: 100ms;
    -o-transition-delay: 100ms;
    transition-delay: 100ms;
    -webkit-transform: scale(0.5);
    -moz-transform: scale(0.5);
    -o-transform: scale(0.5);
    -ms-transform: scale(0.5);
    transform: scale(0.5);
    pointer-events: auto;
    text-align: left;
}
#portfolio #links ul li a:link:hover,
#portfolio #links ul li a:link:focus {
    text-decoration: underline;
   ...

JavaScript

function MapingImage()
{
    var __map = document.getElementById('map'),
            __tree = document.getElementById('tree'),
            __tree_width = __tree.clientWidth;

    if (__tree_width >= 600)
    {
        __map.innerHTML =
                '<area shape="rect" coords="275, 55, 475, 230" href="http://marcchatila.holdings" alt="Marc Chatila Holding">' +
                '<area shape="rect" coords="72, 300, 200, 380" href="http://inventorz.ch" alt="Inventorz">' +
                '<area shape="rect" coords="340, 300, 420, 420" href="http://adamascapital.ch" alt="Adamas Capital">' +
//                '<area shape="rect" coords="546, 294, 673, 420" href="#" alt="Marc Chatila Energy One">' +
                '<area shape="rect" coords="0, 395, 105, 466" href="http://www.sonadigital.ch" alt="Sona">' +
                '<area shape="rect" coords="169, 390, 242, 474" href="http://www.abc-cybernetics.com" alt="ABC Cybernetics">' +
                '<area shape="rect" coords="0, 485, 105, 559" href="http://www.abcdesign.rs" alt="ABC Design">' +
                '<area shape="rect" coords="169, 485, 242, 525" href="http://www.codeion.com" alt="Codeoion">' +
                '<area shape="rect" coords="278, 485, 381, 559" href="http://www.euroicc.com" alt="EuroICC">'; //+
//                '<area shape="rect" coords="384, 485, 481, 559" href="#" alt="Toman Home Automation">' +
//                '<area shape="rect" coords="0, 573, 105, 636" href="http://watchmeboutique.com" alt="WatchMe">'+
//                '<area shape="rect" coords="169, 553, 242, 636" href="#" alt="Benzyne">';
    }
    else
    {
        __map.innerHTML =
                '<area shape="rect" coords="137, 29, 247, 121" href="http://marcchatila.holdings" alt="Marc Chatila Holding">' +
                '<area shape="rect" coords="30, 151, 150, 201" href="http://inventorz.ch" alt="Inventorz">' +
                '<area shape="rect" coords="168, 151, 220, 226" href="http://adamascapital.ch" alt="Adamas...