JSFiddle - React, Tailwind, and code Playground

HTML

<html>
    <body>
        <div class='container'>
            <div class='relative_container' style='background-color:blue;'>
            <svg viewBox="0 0 1500 1000" preserveAspectRatio="none" version="1.1" xmlns="http://www.w3.org/2000/svg">
    <rect x="0" y="0" width="100" height="50" stroke="black" fill="red" stroke-width="5"/>
</svg>
            
            </div>
        </div>
        <div class='container'>
            <div class='relative_container' style='background-color:red;'>
            </div>
        </div>
    </body>
</html>

CSS

.container
{
    position:relative;
    width:50%;/*half the width of the whole page*/
    margin:auto;/*center the whole thing*/
}
.relative_container
{
    padding-bottom:50%;
    position:relative;
    float:left;
    width:100%;
    height:100%;
}