JSFiddle - React, Tailwind, and code Playground

by Renan Ribeiro Brando

HTML

<p>
Hello world
</p>

CSS

@media (min-width:320px) { /* smartphones, portrait iPhone, portrait 480x320 phones (Android) */
p {background: pink}
}
@media (min-width:480px) { /* smartphones, Android phones, landscape iPhone */ 
p {background: blue}}
@media (min-width:600px) { /* portrait tablets, portrait iPad, e-readers (Nook/Kindle), landscape 800x480 phones (Android) */ 
p {background: green}}
@media (min-width:801px) { /* tablet, landscape iPad, lo-res laptops ands desktops */
p {background: yellow}}
@media (min-width:1025px) { /* big landscape tablets, laptops, and desktops */
p {background: rebeccapurple}}
@media (min-width:1281px) { /* hi-res laptops and desktops */ 
p {background: black}
}

p {
  width: 100px;
  height: 100px;
}