JSFiddle - React, Tailwind, and code Playground

Basic example of "Scalable Design/ SwD" in practical usage.

by Julien Etienne

HTML

<svg id='flash' width='1000' height='500' viewBox='0 0 500 500' preserveAspectRatio="xMidYMin meet"> <a xlink:href="#">
    <rect  id='rect' x="50" y="550" rx="6" filter="url(#f1)" />    
        <text id='text' x="50" y="50"  fill="red" >Contact</text>
    </a>
<text id='notice' x="50" y="400"   >Change the CSS font-size,</text>
<text id='notice' x="50" y="450"  >resize the window.</text>   
    <!-- Rendering -->
        <filter id="f1" width="200%" height="200%">
            <feOffset in="SourceGraphic" dx="2" dy="1" />
            <feGaussianBlur stdDeviation="2" />
            <feBlend in="SourceGraphic" in2="blurOut"  />
        </filter>
    
 <filter id="f2" width="200%" height="200%">
            <feOffset  in="SourceGraphic" dx="1" dy="0" />
            <feGaussianBlur stdDeviation="1" />
            <feBlend in="SourceGraphic" in2="blurOut"  />
</filter>

    
  <foreignObject x="50" y="80" width="500" height="150">
    <body id='bod' xmlns="http://www.w3.org/1999/xhtml">
      <div id='gg' >
<video width="100%" controls>
  <source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
  <source src="mov_bbb.ogg" type="video/ogg">
  Your browser does not support HTML5 video.
</video>         
        </div>
    </body>
  </foreignObject>
    
</svg>

CSS

@import url(http://fonts.googleapis.com/css?family=Roboto);
 rect {
}
svg {
    background: yellow;
}
html, body {
    margin: 0;
    padding: 0;
}
#text {
    font-family: Roboto;
    font-size: 20px;
    letter-spacing: 3px;
    fill: white;
    pointer-events:none;
}
rect {
    fill: #4656D4;
    transition: all 0.4s ease-in-out;
}
rect:hover {
    fill: #339966;
       filter: url(#f2);
    transition: all 0.2s ease;
}

rect:active {
    fill: #FF3300;
        transition: all 0.1s linear;
}
#notice{
    fill: black;
}

#gg{
    width: 50%;
}

#gg video{
    width:'100%';
}

JavaScript

var opts = {
    marginX: 15,
    marginY: 10
}



// Get the elements
var getEl = 'getElementsByTagName',
    svg = document[getEl]('svg')[0],
    navText = svg[getEl]('text')[0];
navBG = svg[getEl]('rect')[0];
var fo = svg[getEl]('foreignObject')[0];



function resize() {
    var w = parseInt(window.innerWidth, 10);
    var win = w > 300 ? win = w : win = 300;
    svg.setAttributeNS(null, 'width', win);
    fo.setAttributeNS(null, 'width', win);
}
window.addEventListener('resize', resize, false);
resize();
var mgX = opts.marginX;
var mgY = opts.marginY;




// get text box
var navFontSz = parseInt(window.getComputedStyle(navText, null).getPropertyValue("font-size"), 10);
var navTextWd = navText.getBBox().width + (mgX * 2);
var navTextHt = navText.getBBox().height + (mgY * 2);
var navTextX = navText.getAttribute('x') - mgX;
var navTextY = navText.getAttribute('y') - navFontSz - mgY;


// Get the elements attributes
navBG.setAttributeNS(null, 'width', navTextWd);
navBG.setAttributeNS(null, 'height', navTextHt);
navBG.setAttributeNS(null, 'x', navTextX);
navBG.setAttributeNS(null, 'y', navTextY);