JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
<div class="flexbox">
<div>
<span>
  TExT
</span></div>
</div>
</div>

CSS

.container {
  border: 2px black solid;
}
.flexbox {
  max-width: 854px;
  margin: 0 auto;
  display: flex;
  
  justify-content: center;
  align-content: center;
  align-items: center;
  background: yellow
}
.flexbox div {
  position: relative;

width: 100%;

padding-bottom: 56.25%;
}
flexbox div span {
  position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    border: none;

}
}