JSFiddle - React, Tailwind, and code Playground

by Addictorator

HTML

<div class="wrapper">
  <p id="lorem">
    This text should scale with div only.
  </p>
</div>

CSS

body {
  background-color:white;
}
.wrapper {
  width: 95vw;
  height: calc(95vw * 9/16);
  max-height: 95vh;
  max-width: calc(95vh * 16/9);
  background: center;
  background-color: blue;
  background-size:contain;
  margin: auto;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}
#lorem {
  color: aqua;
  font-size:10vmin;
	text-align:center;
  position:absolute;
	transform: translate(-50%, -50%);
  top: 50%;
	left: 50%;
  margin:auto;
}