JSFiddle - React, Tailwind, and code Playground

by Abhisek DasGupta

HTML

<div class="page-wrapper">
  <div class="text">
  This is some text I want resized
  </div>
</div>

CSS

.page-wrapper{
    width: 100vw; 
    height: 68.60vw; /* height:width ratio = 9/16 = .5625  */
    max-height: 100vh;
    max-width: 145.7vh; /* 16/9 = 1.778 */
    margin: auto;
    position: absolute;
    top:0;bottom:0; /* vertical center */
    left:0;right:0; /* horizontal center */
    border: 5px solid #000;
    box-sizing: border-box;
}

.text{
	position: absolute;
	width:100%;
	top:36%;
	left:0;
	right:0;
	font-size: 5.625vw;
	color:#2d90db;
	text-align:center;
}

@media (min-aspect-ratio: 16/9) {
  .text {
    color: red;
    font-size: 12vh;
  }
}