JSFiddle - React, Tailwind, and code Playground

CSS

html, body {
				width: 100%;
				height: 100%;
				background: -webkit-linear-gradient(left top, rgba(117, 122, 191, .8) 0%, rgba(133, 131, 190, .8) 60%, rgba(234, 176, 209, .9) 100%);
				background: linear-gradient(right bottom, rgba(117, 122, 191, .8) 0%, rgba(133, 131, 190, .8) 60%, rgba(234, 176, 209, .9) 100%);
				margin: 0;
				padding: 0;
				color: white;
				font-family: Monospace;
				font-size: 16.5px;
			}
						
			p {
				margin: 0;
				padding: 0;
			}
			
			.mainDiv {
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
				-webkit-transform: translate(-50%, -50%);
				-moz-transform: translate(-50%, -50%);
			}

			.box {
				width: 100px;
				height: 100px;
				background: linear-gradient(#1E5799, #7db9e8);
				position: relative;
				float: left;
				margin: 5px;
				cursor: pointer;
			}
			.box:nth-child(odd) {border: 1px black solid;}
			.box:nth-child(even) {border: 1px red solid;}
			.box p, .content span {
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
				-webkit-transform: translate(-50%, -50%);
				-moz-transform: translate(-50%, -50%);
			}
			.content {
				width: 100%;
				height: 100%;
				background: linear-gradient(#1E5799, #7db9e8);
				position: absolute;
				top: 0;
				left: 0;
			}
			.box:nth-child(4n+1) {clear: left;}

JavaScript

function addDivs(n) {

    for(var i=1; i<=n; i++) {

        var parentP = $("<p>"+i+"</p>");
        var parentContent = $("<div class='content'></div>");

        var boxClassDiv = document.createElement("div");
        document.body.appendChild(boxClassDiv);
        boxClassDiv.setAttribute("class", "box");
        $("body").prepend(boxClassDiv, [parentP, parentContent]);
        }
    }

    window.onload = function getFuncs() {
        addDivs(16);
    }