JSFiddle - React, Tailwind, and code Playground

by rlemon

HTML

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<?xml-stylesheet type="text/css" href="demo.css" ?>  

<svg height="100%" width="100%" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink= "http://www.w3.org/1999/xlink" onload="init(evt)">
    <script type="text/ecmascript" xlink:href="demo.js" />
    <script type="text/ecmascript"><![CDATA[
        function init(evt) {
            if ( window.svgDocument == null )
                svgDocument = evt.target.ownerDocument;
        }
    ]]></script>
    <defs>
        <linearGradient id="enabled" x1="0" x2="1" y1="0" y2="1">
            <stop offset="0%" stop-color="#AFF"/>
            <stop offset="100%" stop-color="blue"/>
        </linearGradient>        
        <linearGradient id="disabled" x1="0" x2="1" y1="0" y2="1">
            <stop offset="0%" stop-color="#AAA"/>
            <stop offset="100%" stop-color="#AAA"/>
        </linearGradient>
    </defs>
    <image xlink:href="Modern_Office.jpg" x="0" y="0" height="100%" width="100%"/>
    
    <g class="line">
    <line x1="820" y1="120" x2 ="790" y2="180" class="SaaS"/>
    <line x1="905" y1="180" x2 ="700" y2="370" class="PM"/>
    <line x1="1060" y1="240" x2 ="920" y2="250" class="SBDR"/>
    <line x1="1140" y1="310" x2 ="900" y2="350" class="DS"/>
    
    <line x1="1140" y1="500" x2 ="1180" y2="400" class="HaaS"/>
    <line x1="1040" y1="560" x2 ="885" y2="440" class="Surv"/>
    <line x1="920" y1="630" x2 ="890" y2="510" class="EMA"/>
    <line x1="820" y1="700" x2 ="750" y2="550" class="Tele"/>
    
    <line x1="650" y1="700" x2 ="720" y2="595" class="VoIP"/>
    <line x1="560" y1="630" x2 ="550" y2="450" class="RMA"/>
    <line x1="420" y1="560" x2 ="510" y2="450" class="Secu"/>
    <line x1="320" y1="500" x2 ="405" y2="455" class="IITD"/>
    
    <line x1="320" y1="310" x2 ="455" y2="415" class="PS"/>
    <line x1="420" y1="240" x2 ="535" y2="340"...

CSS

.button{
    rx:10;
    ry:10;
}
.button:hover{
    cursor:pointer;
}
.line{
    stroke-linecap:round;
    stroke-width:4;
}

.SaaS{stroke:url(#disabled); fill:url(#disabled);}
.PM{stroke:url(#disabled); fill:url(#disabled);}
.SBDR{stroke:url(#enabled); fill:url(#enabled);}
.DS{stroke:url(#enabled); fill:url(#enabled);}
.HaaS{stroke:url(#enabled); fill:url(#enabled);}
.Surv{stroke:url(#enabled); fill:url(#enabled);}
.EMA{stroke:url(#enabled); fill:url(#enabled);}
.Tele{stroke:url(#enabled); fill:url(#enabled);}
.VoIP{stroke:url(#enabled); fill:url(#enabled);}
.RMA{stroke:url(#enabled); fill:url(#enabled);}
.Secu{stroke:url(#enabled); fill:url(#enabled);}
.IITD{stroke:url(#enabled); fill:url(#enabled);}
.PS{stroke:url(#enabled); fill:url(#enabled);}
.VM{stroke:url(#enabled); fill:url(#enabled);}
.Infr{stroke:url(#enabled); fill:url(#enabled);}
.HD{stroke:url(#enabled); fill:url(#enabled);}


@media (max-width: 600px) {
    text {
     font-size: 5em;       
    }
}