JSFiddle - React, Tailwind, and code Playground

by celine305

HTML

<div id="0"> Default HTML </div>
<div id="1"> Default HTML </div>

CSS

div{
    width: 390px;
    height: 150px;
    background: #4E4E4E;
    color: #FFF;
    line-height: 150px;
    text-align: center;
    font-size: 30px;
    border-radius: 10px;
    margin: 80px auto;
}

JavaScript

for(var i=0; i<2; i++){
function red() {
    $('#'+i+'').css('background','#B60C0C')
    .text('Screen Size RED');
}

function orange() {
    $('#'+i+'').css('background','#EBAE10')
    .text('Screen Size ORANGE');
}

function green() {
    $('#'+i+'').css('background','#83ba2b')
    .text('Screen Size GREEN');
}

var widths = [0, 500, 850];

function resizeFn() {
if (window.innerWidth>=widths[0] && window.innerWidth<widths[1]) {
red();
} else if (window.innerWidth>=widths[1] && window.innerWidth<widths[2]) {
orange();
} else {
green();
}
}
resizeFn();
window.onresize = resizeFn();
}