JSFiddle - React, Tailwind, and code Playground

by Ricardo Ruiz

HTML

<p>
  Window inner width: <span></span>
</p>

CSS

body {
  margin: 0;
}

p {
  margin: 0;
  background-color: dodgerblue;
  font-size: 3em;
}

@media (max-width: 700px) {
  body::after {
    font-size: 10em;
    content: "700px";
  }
}

JavaScript

$(window).on("resize", function() {
  var innderWidth = $(this).innerWidth();
  $("span").text(innderWidth + "px");
  if (innderWidth <= 700) {
    $("body").css("background-color", "gold");
  } else {
    $("body").css("background-color", "");
  }
});