JSFiddle - React, Tailwind, and code Playground

HTML

<header></header>
<div id="retangulo">
  {texto exemplo....}
</div>
<footer></footer>

CSS

header{
  width:100%;
  height:150px;
  background-color:#423142;
}

div#retangulo{
  width:50px;
  height:400px;
  background-color: green;
  position:absolute;
  top:220px;
  left:100px;
}

footer{
  height:200px;
  width:100%;
  background-color:red;
  position:absolute;
  top: 1500px;
}

@media screen and (max-width:700px), screen and (max-height: 600px) {
  div#retangulo{
    width:50px;
    height:200px;
    background-color: green;
    position:fixed;
    top:100px;
    left:100px;
  }
}