JSFiddle - React, Tailwind, and code Playground

HTML

<div class="content" >
  <div class="title"></div>
</div>

CSS

@media (max-width: 400px) {
  .title:after {
      content :"Resize Me!";
    }
}
@media (min-width: 400px) {
    .content {
        background-color: silver;
    }
    .title:after {
      content :"First Step";
    }
}
@media (min-width: 500px) {
    .content {
        background-color: gray;
    }
   .title:after{
      content :"Secound Step";
      color:white;
    }
}
@media (min-width: 600px) {
    .content {
        background-color: maroon;
        }
         .title:after{
      content :"Third Step";
    }
    
}
@media (min-width: 700px) {
    .content {
        background-color: blue;
        }
         .title:after{
      content :"Fourth Step";
    }
}
@media (min-width: 800px) {
    .content {
        background-color: yellow;
        }
    .title:after{
      content :"Fifth Step";
      color:black;
    }
}
@media (min-width: 900px) {
    .content {
        background-color: green;
        }
         .title:after{
      content :"Sixth Step";
    }
}
@media (min-width: 1000px) {
    .content {
        background-color: lime;
    }
          .title:after{
      content :"Seventh Step";
    }
}
@media (min-width: 1100px) {
    .content {
        background-color: teal;
    }
          .title:after{
      content :"Eighth Step";
    }
}