JSFiddle - React, Tailwind, and code Playground

by Tyler Brown

HTML

<div class="con3">
  <div class="con2">
    <div class="con1">
      hi
    </div>
  </div>
</div>

CSS

div {
  box-sizing: border-box;
}
.con3 {
  border: 2px solid black;
  width: 200px;
  height: 200px;
}
.con2 {
  border: 2px solid skyblue;
  width: 100%;
  aspect-ratio: 9 / 16;
  max-height: 100%;
}
.con1 {
  border: 2px solid violet;
  height: 100%;
  aspect-ratio: 9 / 16;
  max-width: 100%;
}