JSFiddle - React, Tailwind, and code Playground

by Ken Watanabe

HTML

<div class="page">


<div id="wrapper">
    <div id="first">
        <svg xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" height="300px" viewBox="0 0 253.2 300">
            <path d="M194.5,296.7l-21.4-69.2H80.1l-21.4,69.2H0L99.4,3.3h54.5l99.4,293.5H194.5z M126.6,75.4l-31,101.9h62L126.6,75.4z" />
        </svg>
    </div> <!-- END | #first -->
    
    <div id="second">
        <svg xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" height="300px" viewBox="0 0 260.346 300">
            <path d="M211.3,101.4c-13-34-36.9-51.1-72.5-51.1c-23.9,0-44,8.4-60,25.6C63.3,93,55.3,117.7,55.3,150s8,57,23.5,74.2 c15.9,17.2,36.1,25.6,60,25.6c35.6,0,59.5-17.2,72.5-51.1l49.1,12.6c-13.8,56.6-57.9,88.9-121.6,88.9c-39,0-71.7-13.4-98.5-39.8 S0,197,0,150S13.4,66.2,40.2,39.7C67.1,13.3,99.8-0.1,138.8-0.1c63.7,0,107.7,32.3,121.6,88.9L211.3,101.4z" />
        </svg>
    </div> <!-- END | #second -->
    
    <div id="third">
        <div class="b">
            <svg class="b01" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" height="300px" viewBox="0 0 54.5 300">
                <rect x="0" y="3.3" width="54.5" height="293.5" />
            </svg>
            <svg class="b02" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" height="300px" viewBox="0 0 1500 300">
                <path d="M1456,136.6c18.4-9.6,28.9-30.2,28.9-54.1c0-52-32.3-79.2-83.8-79.2H0v50.3h1396.9c23.9,0,35.6,8.8,35.6,31.9s-11.3,31.9-34.4,31.9H0v50.3h1398.1c31.4,0,47.4,13,47.4,39.4c0,26.4-15.9,39.4-47.4,39.4H0v50.3h1403.2c60.4,0,96.8-31.9,96.8-88.5C1500,172.6,1485.3,148.7,1456,136.6z" />
            </svg>
        </div> <!-- END | #third -->
    </div>
    
     </div>

CSS

body, html {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
}

.page {
    height: 100%;
    width: 90%;
    max-width: 55em;
    margin: 0 auto;
}

#wrapper {
    width: 70%;
    overflow: hidden; /* ? */
}
#first {
    height: 100%;
    width: auto;
    float:left;
}
#second {
    height: 100%;
    width: auto;
    float:left;
}
#third {
    height: 100%;
    width: 40%;
    overflow: hidden; /* ? */
}

svg {
    height: 20%;
}

.b {
    height: 100%;
    width: 100%;
    min-width: 206.264px;
    overflow: hidden;
}
.b01 {
    position: absolute;
    z-index: 2;
}
.b02 {
    position: relative;
    float: right;
    z-index: 1;
}