JSFiddle - React, Tailwind, and code Playground

HTML

<div id="launchmain" >

<div id="box1"></div>
<div id="box2"></div>
<div id="box3"></div>
<div id="box4"></div>
    <div id ="maininvite">
        <h2> header</h2>
        <p>not a lot of text here but still overflowing</p>
        
    </div>
<div id="box6"></div>
<div id="box7"></div>
<div id="box8"></div>
<div id="box9"></div>

</div>

CSS

html, body {
 height: 100%;
 width: 100%;    
}
    @media all and (min-width: 50px) {  body  {   font-size:0.1em;  } }
    @media all and (min-width: 100px) {  body  {   font-size:0.2em;  } }
    @media all and (min-width: 200px) {  body  {   font-size:0.4em;  } }
    @media all and (min-width: 300px) {  body  {   font-size:0.6em;  } }
    @media all and (min-width: 400px) {  body  {   font-size:0.8em;  } }
	@media all and (min-width: 500px) {  body  {   font-size:1.0em;  } }
	@media all and (min-width: 600px) {  body  {   font-size:1.2em;  } }
	@media all and (min-width: 700px) {  body  {   font-size:1.4em;  } }
	@media all and (min-width: 800px) {  body  {   font-size:1.6em;  } }
	@media all and (min-width: 900px) {  body  {   font-size:1.8em;  } }
	@media all and (min-width: 1000px) {  body  { font-size:2.0em;  } }
	@media all and (min-width: 1100px) {  body  { font-size:2.2em;  } }
	@media all and (min-width: 1200px) {  body  { font-size:2.4em;  } }
	@media all and (min-width: 1300px) {  body  { font-size:2.6em;  } }
	@media all and (min-width: 1400px) {  body  { font-size:2.8em;  } }
	@media all and (min-width: 1500px) {  body  { font-size:3.0em;  } }
	@media all and (min-width: 1500px) {  body  { font-size:3.2em;  } }
	@media all and (min-width: 1600px) {  body  { font-size:3.4em;  } }
	@media all and (min-width: 1700px) {  body  { font-size:3.6em;  } }



#launchmain {
 width: 70%;
 display: inline-block;
 position: relative;
    top:10%;
    left:25%;
   

}
#launchmain:after {
    padding-top: 79.26%; 
    display: block;
    content: '';
    margin-top: 10px;
}
#box1
{
    border: 1px solid #000000;
  
    position: absolute;
    width:25.37%; 
    height:21.88%            
}
#box2
{
    border: 1px solid #000000;
    width: 48.48%;
    height:21.88%;
    position: absolute;
    left:25.64%
}
#box3
{
    border: 1px solid #000000;
    width:25.37%; 
    height:21.88%;
    position: absolute;
    left:74.39%;
}
#box4
{
    border: 1px solid #000000;
   ...