JSFiddle - React, Tailwind, and code Playground

by joshmoto

HTML

<div id="resize">
  <div class="card">
    Test
  </div>
</div>

SCSS

#resize {
  container-type: size;
  container-name: resize;
  resize: both;
  overflow: auto;
  background: red;
  color: white;
  width: 300px;
  height: 300px;
}

.card {
    font-size: 1rem;
  }

@container resize (min-height: 400px) and (min-width: 400px) {
  .card {
    font-size: 2rem;
  }
}