JSFiddle - React, Tailwind, and code Playground

by v423

HTML

<div id="box">
    <article>
      this is a test,this is a test,this is a test,this is a test,this is a test,this is a test,this
      is a test,this is a test,this is a test,this is a test,this is a test,this is a test,this is a
      test,this is a test,this is a test,this is a test,this is a test,this is a test,this is a
      test,this is a test,this is a test,
      this is a test,this is a test,this is a test,this is a test,this is a test,this is a test,this
      is a test,this is a test,this is a test,this is a test,this is a test,this is a test,this is a
      test,this is a test,this is a test,this is a test,this is a test,this is a test,this is a
      test,this is a test,this is a test,
      this is a test,this is a test,this is a test,this is a test,this is a test,this is a test,this
      is a test,this is a test,this is a test,this is a test,this is a test,this is a test,this is a
      test,this is a test,this is a test,this is a test,this is a test,this is a test,this is a
      test,this is a test,this is a test,

    </article>
  </div>

CSS

#box {
      container: box/inline-size;
      height: 200px;
    }

    @container box (height > 50px) {
      article {
        background: skyblue ;
      }
    }

    @container box (width > 50px) {
      article {
        color: blue;
      }
    }