JSFiddle - React, Tailwind, and code Playground

by Ken Watanabe

CSS

article {
  background:#eeeeee;
  text-align:center;
 position: relative;
top: 50%;
transform: translateY(-50%); 
}

.module {
    display: block;
    margin: auto;
    width: 50vw;
    height: calc((9/16)*50vw);
    float:left;
}

@media (min-aspect-ratio:16/9) {
    .module {
        height: 50vh;
        width: calc((16/9)*50vh);
    }
}