JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container dev-container">
    <div class="stack stack1" index="1">1</div>
    <div class="stack stack2" index="2">2</div>
    <div class="stack stack3" index="3">3</div>
    <div class="stack stack4" index="4">4</div>
    <div class="stack stack5" index="5">5</div>
    <div class="stack stack6" index="6">6</div>
    <div class="stack stack7" index="7">7</div>
</div>

CSS

body{
    padding: 0;
    margin: 0;
}
.container{
    padding: 0;
    margin: 0;
    width:500px;
    height:500px;
    border-width:1px;
    border-style:solid;
    border-color:cyan;
}

.stack{
    font-size:50;
    position:absolute;
    border-width:1px;
    border-style:solid;
    border-color:#000;
}

.stack>img{
    width:100%;
    height:100%;
}

JavaScript

//scale = focusLength/(focusLength + distance);
var focusLength = 3000;
var containerWidth = 500;
var containerHeight = 500;
var actualWidth = 100;
var actualHeight = 100;
var initialDistance = 0;
var gap = 1000;
var xGap = 100;
var yGap = 0;
var xmlArray = ["http://www.mactrast.com/wp-content/uploads/2011/08/Apple-Logo-100x100.jpg", "http://www.mactrast.com/wp-content/uploads/2011/08/Apple-Logo-100x100.jpg","http://www.mactrast.com/wp-content/uploads/2011/08/Apple-Logo-100x100.jpg", "http://www.mactrast.com/wp-content/uploads/2011/08/Apple-Logo-100x100.jpg","http://www.mactrast.com/wp-content/uploads/2011/08/Apple-Logo-100x100.jpg", "http://www.mactrast.com/wp-content/uploads/2011/08/Apple-Logo-100x100.jpg","http://www.mactrast.com/wp-content/uploads/2011/08/Apple-Logo-100x100.jpg", "http://www.mactrast.com/wp-content/uploads/2011/08/Apple-Logo-100x100.jpg","http://www.mactrast.com/wp-content/uploads/2011/08/Apple-Logo-100x100.jpg", "http://www.mactrast.com/wp-content/uploads/2011/08/Apple-Logo-100x100.jpg","http://www.mactrast.com/wp-content/uploads/2011/08/Apple-Logo-100x100.jpg", "http://www.mactrast.com/wp-content/uploads/2011/08/Apple-Logo-100x100.jpg"]
var rightDivs = [];//[{selector:".stack3"},{selector:".stack2"},{selector:".stack1"}];
var leftDivs = [];//[{selector:".stack5"},{selector:".stack6"},{selector:".stack7"}];
var centerDiv= {};/*{
	selector:".stack4"
};*/
var totalDivs = 6;
var centerZIndex = 1000;

$(".stack").width(100);
$(".stack").height(100);

initHTMLLayout();
calculatePositions()
draw();

//This function will parse throgh the xml arry (xmlArray) and create the required html tags.
function initHTMLLayout(){
    var imageURL;
    var imageCount = xmlArray.length;
    var divStr = '<div class="stack stackindex1" index="index1"><img src="url"/></div>';
    var tempStr;
    var regEx;
    //Empty the dev container incase its not
    $(".dev-container").empty();
    //loop through xmlArray
    for(var index = 0; index < imageCount; index++){
...