JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
  <div id="0" class="box"> Default HTML </div>
  <div id="1" class="box"> Default HTML </div>
</div>

CSS

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

JavaScript

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

var widths = [0, 500, 850];

function resizeFn() {
    if (window.innerWidth>=widths[0] &&window.innerWidth<widths[1]) {
    	changeColor('#B60C0C');
    } else if (window.innerWidth>=widths[1] && window.innerWidth<widths[2]) {
    	changeColor('#EBAE10');
    } else {
    	changeColor('#83ba2b');
    }
}

resizeFn();
$(window).resize(function() {
	console.log("resize");
	resizeFn();
})