JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
    <div id="background"></div>
    <div id="foreground">
        <h1>Here is some foreground Content</h1>
		Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque
        adipiscing sollicitudin est eget viverra. Nam luctus eros quis sapien aliquet
        facilisis. Sed id nisl vel nulla faucibus aliquet pulvinar et metus. Vestibulum
        a ullamcorper enim. Vestibulum ac nisl eros, non porttitor metus. Integer
        eu sodales felis. Praesent eget loremffffffffffff massa, ac semper urna.</div>
</div>

CSS

body {
    font-family:arial;
}
h1 {
    color:black;
    font-size:24px;
}
#container {
    margin-left:100px;
    margin-top:50px;
}
#background {
    width:400px;
    height:300px;
    position:absolute;
    z-index:-1;
    overflow:hidden;
}
#foreground {
    width:400px;
    height:300px;
    border:1px solid orange;
    color:grey;
}

JavaScript

if ($.browser.msie) {
    var xdr = new XDomainRequest();
    xdr.open("get", "http://upload.wikimedia.org/wikipedia/commons/3/32/Blank_US_Map.svg");
    xdr.onload = function () {
        mapBackground(xdr.responseText)
    };
    xdr.send();
} else {
    $.get(
        'http://upload.wikimedia.org/wikipedia/commons/3/32/Blank_US_Map.svg',

    function (data) {
        mapBackground(data);
    },
        "html");
}

function mapBackground(data) {
    var svg = $(data);

    svg.find('path').css({
        'fill': 'red'
    }).end().find('#CA').css({
        'fill': 'green'
    }).end().find('#WA').css({
         'stroke': 'purple'
        ,'stroke-width': '4px'
    });

    $('#background').append(svg);
}