JSFiddle - React, Tailwind, and code Playground

HTML

<div id="hdr">Header goes here</div>
<div id="body">body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body </div>
<div id="ftr">Footer this is the Footer</div>
<button>Change</button>

CSS

div{position:relative;box-sizing:border-box;width:100%;}
#hdr{height:80px;background:black;color:white;text-align:center;}
#body{height:60vh;background:white;color:black;}
#ftr{height:80px;background:black;color:white;text-align:center;}
button{position:absolute;top:15px;right:15px;}

JavaScript

chg = 0;
$('button').click(function(){
	if (chg==0){
		$('#hdr').css({'background':'palegreen','color':'darkgreen'});
		$('#body').css({'background':'wheat','color':'orange'});
		$('#ftr').css({'background':'lightblue','color':'blue'});
    $('body').css({'max-width':'70%'});
    chg++;
  }else if(chg>0){
		$('#hdr').css({'background':'palegoldenrod','color':'orange'});
		$('#body').css({'background':'#ccc','color':'darkcyan'});
		$('#ftr').css({'background':'bisque','color':'red'});
    $('body').css({'max-width':'80%','margin':'0 auto'});
  }
});