JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">max-width = </div>

CSS

.container {
  max-width: 30rem;
  min-width: 100px;
  min-height: 100px;
  background: orange;
}

.container:after {
    content: '30rem';
  }


@media all and (max-width: 700px) {
  .container {
    max-width: 10rem;
  }
  .container:after {
    content: '10rem';
  }
}