JSFiddle - React, Tailwind, and code Playground

by Terry Mun

HTML

<div class="square">
    Square div
</div>
<div class="landscape">
    Landscape (4:3)
</div>
<div class="portrait">
    Portrait (4:3)
</div>

CSS

body {
    width: 500px;
}
div {
    background-color: #eee;
    width: 50%;
    height: 0;
    margin-bottom: 40px;
}
.square {
    padding-bottom: 50%;
}
.landscape {
    padding-bottom: 37.5%;
}
.portrait {
    padding-bottom: 66.6667%;
}