JSFiddle - React, Tailwind, and code Playground

HTML

<div class="responsive-wrapper">
    <canvas  width=800 height=300></canvas>
    <div>Some iframe</div>
</div>

CSS

.responsive-wrapper {
    width:100%;
    max-width:800px;
    position:relative;
}

.responsive-wrapper > div {
    position:absolute;
    left:0;
    top:0;
    width:100%;
    height:100%;
    background-color:#CCC;
}

.responsive-wrapper canvas{
    width:100%;
    height:auto;
}