JSFiddle - React, Tailwind, and code Playground

by kthornbloom

HTML

<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui voluptate maiores, temporibus officia rem fugiat aliquid repellat sint, dolore accusamus, eligendi repellendus facilis nulla, itaque animi quis reprehenderit tempore adipisci.</div>

CSS

div { background: #eee; padding: 1em;}

/*  below 500px, make bg blue*/
@media screen and (max-width: 500px){
  div { background: blue; }
}
/*  below 400px, make bg red*/
@media screen and (max-width: 400px){
  div { background: red; }
}
/*  below 300px, make bg yellow*/
@media screen and (max-width: 300px){
  div { background: yellow; }
}