JSFiddle - React, Tailwind, and code Playground

by Tan

HTML

<!-- Device Test -->

<div class="container">

<div class="s320">320px</div>
<div class="s480">480px</div>
<div class="s768">768px</div>
<div class="s1024">1024px</div>
<div class="s1280">1280px</div>


</div>

CSS

body {margin:0;}

.s320, .s480, .s768, .s1024, .s1280 {text-align:center;font-size:32px;display:none;}

@media (min-width:320px) {.container {width:320px;margin:auto;} .s320 {background-color:green;display:block;} .s480, .s768, .s1024, .s1280 {display:none;}}

@media (min-width:480px) {.container {width:480px;margin:auto;} .s480 {background-color:red;display:block;} .s320, .s768, .s1024, .s1280 {display:none;}}

@media (min-width:768px) {.container {width:768px;margin:auto;} .s768 {background-color:blue;display:block;} .s320, .s480, .s1024, .s1280 {display:none;}}

@media (min-width:1024px) {.container {width:1024px;margin:auto;} .s1024 {background-color:yellow;display:block;} .s320, .s480, .s768, .s1280 {display:none;}}

@media (min-width:1280px) {.container {width:1280px;margin:auto;} .s1280 {background-color:orange;display:block;} .s320, .s480, .s768, .s1024 {display:none;}}