JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://raw.github.com/DmitryBaranovskiy/raphael/master/raphael-min.js"></script>
<!DOCTYPE html>
<html>
<head>
    <title>Slide Test</title>
    <meta name="viewport" content="width=device-width, maximum-scale=1.0, minimum-scale=1.0">
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
</head>
<body>
    <div id="wrapper"><div id="holder"></div></div>
</body>
</html>

CSS

body {
    margin:0;
}
#holder {
    margin:0 auto;
    width:800px;
    height:600px;
}

JavaScript

function resize() {
    var width = $(document.body).width();
    var height = (3 * width) / 4; //4:3 aspect ratio
    window.paper.setSize(width, height);
    window.paper.setViewBox(0, 0, 800, 600, true);
}

$(function() {
    $(window).resize(function() {
        resize();
    });
    window.element = "holder";
    window.paper = Raphael(window.element, "800", "600");
    window.paper.setStart();
    window.paper.circle(200, 200, 50);
    var st = window.paper.setFinish();
    st.attr({
        fill: "red"
    });
    resize();
});