JSFiddle - React, Tailwind, and code Playground

by tfishell

HTML

<body id="home">

    <div class="container">
	</div>
	
	<div class="footer">
		<div class="link" id="portfolio">
		</div>
		
		<div class="link" id="hamumu">
		</div>
		
		<div class="link" id="beep">
		</div>
		
		<div class="link" id="jk">
		</div>
		
		<span class="stretch"></span>
	</div>

    <div class="footer2"></div>
    
</body>

CSS

* {
    margin: 0;
}

body#home {
    background-color: green;
}

html, body {
    height: 100%;
}

.container{
    min-height: 100%;
	height: auto !important;
	height: 100%;
	margin: 0 auto -125px;
}

.footer{
    margin-left: auto;
	margin-right: auto;
	height: 125px;
	width: 70%;
	background-color: blue;
	text-align: justify;
    -ms-text-justify: distribute-all-lines;
    text-justify: distribute-all-lines;
}

.footer2{
    position: relative;
    margin-left: auto;
	margin-right: auto;
	margin-top: -90px;
	height: 25px;
	width: 70%;
	background-color: red;
	text-align: justify;
	opacity: 0.5;
    -ms-text-justify: distribute-all-lines;
    text-justify: distribute-all-lines;
}

/*links*/
.link {
    position: relative;
	width: 40px;
	height: 40px;
	vertical-align: top;
	display: inline-block;
	*display: inline;
	top: -300px;
	zoom: 1;
}

#portfolio {
	background-color: yellow;
}

#hamumu {
	background-color: pink;
}

#beep {
	background-color: orange;
}

#jk {
	background-color: purple;
}

/*smokes*/
.smoke{
    position: relative;
	bottom: -35px;
	left: -20px;
	width: 80px;
	background-color: gray;
}

#smoke0 {
}

#smoke1 {
}

#smoke2 {
}

#smoke3 {
}

.stretch {
    width: 100%;
	display: inline-block;
	font-size: 0;
	line-height: 0;
}

#port1 {
    position: relative;
	top: 0px;
	margin-left: auto;
	margin-right: auto;
    width: 40px;
	height: 40px;
	background-color: blue;
}

JavaScript

var links = ["#portfolio", "#hamumu", "#beep", "#jk"];
var linkGlobal;
smokeGlobal = 0;

//home page functions
$(document).ready(function homePage() {
	
	//check collisions
	//initial animation
	for (var i=0; i<links.length; i++) {
		//animate links
        $(links[i]).animate({
		    top: '0'
	    }, { 
		    duration: 2000*(Math.random()*(2)+1), 
			easing: 'easeOutBounce',
            step: function() {
			
                if ($(links[i]).x > ($(".footer").x + $(".footer").width) 
				|| $(links[i]).y > ($(".footer").y + $(".footer").height) 
				|| ($(links[i]).x + $(links[i]).width) < $(".footer").x 
				|| ($(links[i]).y + $(links[i]).height) < $(".footer").y)
				{
				    $(links[i]).css("background-color", "yellow");
				} 
				else 
				{
				    $(links[i]).css("background-color", "red");
				}
			}
		})
	} 
})