JSFiddle - React, Tailwind, and code Playground

by zainshaikh

HTML

<div class="container">
<div class="div-1cm" id="div-1cm">
    1cm
</div>

<div><i>1cm = <b id="cm-width"></b></i></div>

<div class="div-10cm">
    Your screen width is below <b>10cm</b>
</div>

<div class="div-20cm">
Your screen width is between <b>10cm - 20cm</b>
</div>

<div class="div-30cm">
Your screen width is between <b>20cm - 30cm</b>
</div>
</div>

CSS

.container {margin: 0 auto;text-align: center}
div {font-size: 0.5cm}
.div-10cm b, .div-20cm b, .div-30cm b{}
.div-10cm{display:none}
.div-20cm{display:none}
.div-30cm{display:none}
.div-1cm {width: 1cm; height: 1cm; border: 1px solid #000;font-size:12px; margin: 0 auto}

@media (min-width:0cm) and (max-width: 10cm) {
    body {background-color: #e9e9e9}
    .div-10cm{display:block}
    .div-20cm{display:none}
    .div-30cm{display:none}
}
@media (min-width:10cm) and (max-width: 20cm) {
    body {background-color: #ff9900}
    .div-10cm{display:none}
    .div-20cm{display:block}
    .div-30cm{display:none}
}

@media (min-width:20cm) and (max-width: 30cm) {
    body {background-color: #f000f0}
    .div-10cm{display:none}
    .div-20cm{display:none}
    .div-30cm{display:block}
}

JavaScript

var o = document.getElementById('div-1cm').offsetWidth;
var b = document.getElementById('cm-width');
b.innerHTML = o + 'px';