JSFiddle - React, Tailwind, and code Playground

by Joseph Rex

HTML

<div class="container">
    <div class="child">
    </div>
  </div>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/eqcss/1.6.0/EQCSS-polyfills.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/eqcss/1.6.0/EQCSS.min.js"></script>

CSS

.container{
  float: left;
  border: dashed 2px darkturquoise;
}
.child{
  width: 200px;
  height: 200px;
  border: solid 2px greenyellow;
}
@element '.container' and (min-width: 150px){
  .child{
    width: 100px;
    height: 100px;
  }
}