JSFiddle - React, Tailwind, and code Playground

by springuper

HTML

<!-- ratio box -->
<div class="outer">
    <div class="wrapper">
        <div class="content"></div>
    </div>
</div>

CSS

.outer {
    width:200px;
}
.wrapper {
    position:relative;
    height:0;
    padding-top:75%;
    background:blue;
}
.content {
    position:absolute;
    width:100%;
    height:100%;
    top:0;
    left:0;
    background:green;
}