JSFiddle - React, Tailwind, and code Playground

by Vitaliy

HTML

<h2>resize the window</h2>
<h3>window size: <i id="size"></i></h3>
<div class="info">text</div>

CSS

.info {
    position: relative;
    width: 775px;
    height: 720px;
    top: 5px;
    left: 30px;
}
@media (max-width: 1150px) and (min-width: 770px) {
.info {
        margin: 0 auto;
        width: 800px;
        background:#f0f;
    }
}
 
@media (max-width: 769px) and (min-width: 360px) {
.info {
    position: relative;
    width: 775px;
    height: 800px;
    top: 25px;
    left: 5px;
    background:#f00;
}
}
  h2,h3{
    text-align:center;
  }
  i{
    font-style:normal;
  }

JavaScript

var size = document.getElementById("size");
function showSize(){
	size.innerHTML = window.innerWidth + "px";
}
showSize();
window.onresize = showSize;