JSFiddle - React, Tailwind, and code Playground

by panchroma

HTML

<div class="body">
    <p>hello world</p>
</div>

CSS

/* set default  */
.body{
    width:800px;
    background-color:grey;
    min-height:1000px;
  }

@media screen and (max-width:400px) {

.body {
    width:260px;
        background-color:teal;
}
}

@media screen and (min-width: 401px) and (max-width:640px) { 
    .body {
        width:480px;
        background-color:olive;
    }
}



@media screen and (min-width: 641px) and (max-width: 800px) { 
    .body {
        width:600px;
        background-color:green;
    }

}

@media screen and (min-width: 801px) and (max-width: 1024px)  { 
.body{
    width:800px;
        background-color:pink;
}
}