JSFiddle - React, Tailwind, and code Playground

by Angeli Schwartz

HTML

<div id="bigsquare" style="height:600px;width:900px;border:2px solid gray;">
       <div id="littlesquare" style= "color: white">Abby&Cera</div>
       </div>
  <script type="text/javascript" src="js/config.js"></script>

CSS

#littlesquare {
  text-color: white;
  font-size: 80px;
  text-align: center;
  font-style: italic;
  position: relative;
}

JavaScript

/* config.js */
function showSquare(id, config){

	var el = document.getElementById(id);
	
		el.style.backgroundColor = config.color;
		el.style.top = config.top+ "px";
		el.style.left = config.left+ "px";
		el.style.width = config.width+ "px";
		el.style.height = config.height+ "px";
		
}
var config = {color:"#0000ff", top: 30, left: 40, width: 700, height: 100 };
showSquare("littlesquare", config);