JSFiddle - React, Tailwind, and code Playground

HTML

<p>
lorem ipsum
</p>
<div class="box"></div>

CSS

body, html {
  font-size:16px;
}
@media ( min-resolution: 2dppx) {
  body, html {
    font-size: 8px;
  }
}

.box {
  border: 1px green solid;
  background-color:green;
  width:10em;
  height:10em;
}

@media (min-width:36em) {
  .box {
    width: 36em;
    border:1px red solid;
    background-color:red;
  }
}

@media (min-width:62em) {
  .box {
    width: 62em;
    border:1px blue solid;
    background-color:blue;
  }
}
 
@media (min-width:85em) {
  .box {
    width: 85em;
    border:1px orange solid;
    background-color:orange;
  }
}