JSFiddle - React, Tailwind, and code Playground

HTML

<footer>
	<one id="one" data-clicks="1">
    <p unselectable="on"></p>
    </one>
    <two id="two" data-clicks="1">
    <p unselectable="on"></p>
    </two>
    <three-info>
    </three-info>
    <three id="three" data-clicks="1">
    <p unselectable="on"></p>
    </three>
</footer>

CSS

footer {
	margin: 0;
	padding: 0;
	float: left;
	width: 100%;
	height: 115px;
	background-color: #4a4a4a;
	overflow: visible !important;
	-webkit-user-select: none; /* Chrome/Safari */        
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* IE10+ */

/* Rules below not implemented in browsers yet */
-o-user-select: none;
user-select: none;
}
one {
	margin: 0;
	padding: 0;
	float: left;
	width: 200px;
	background-color: pink;
	height: 115px;
	margin-left: 0px;
	display: block;
}
one,two,three {
	text-align: center;
	color: white;
	font-family: "Raleway", Arial, Helvetica, Trebuchet MS, Tahoma, sans-serif;
	font-weight: bold;
	font-size: 16px;
	line-height: 115px;
}
one:hover {
	background: black;
	margin: 0;
	padding: 0;
	height: 115px;
	float: left;
	transition: all 0.3s ease-out; 
	cursor: pointer;
}
two:hover {
	background: black;
	margin: 0;
	padding: 0;
	height: 115px;
	float: left; 
	transition: all 0.3s ease-out;
	cursor: pointer;
}
three:hover {
	background: black;
	margin: 0;
	padding: 0;
	height: 115px;
	float: left; 
	transition: all 0.3s ease-out;
	cursor: pointer;
}
two {
	margin: 0;
	padding: 0;
	float: left;
	width: 200px;
	background-color: gray;
	height: 115px;
	margin-left: 0px;
	display: block;
}
three {
	margin: 0;
	padding: 0;
	float: left;
	width: 200px;
	background-color: black;
	height: 115px;
	margin-left: 0px;
	display: block;
}

JavaScript

$(document).ready(function(){
$('#three').click(function() {
  var clicks = $(this).data('clicks');
  if (clicks) {
     $("#three").animate({marginLeft: $(window).width()-900 +'px'}, 745, 'linear');
  } else {
     $("#three").animate({marginLeft: 0 +'px'}, 800, 'linear');
  }
  $(this).data("clicks", !clicks);
   if ($("#two").css("marginLeft")==$(window).width()-900 +'px') {
     $("#two").animate({marginLeft: 0 +'px'}, 100, 'linear');
	 $("#three").animate({marginLeft: $(window).width()-900 +'px'}, 745, 'linear');
  }
  if ($("#one").css("marginLeft")==$(window).width()-900 +'px') {
     $("#one").animate({marginLeft: 0 +'px'}, 100, 'linear');
	 $("#three").animate({marginLeft: $(window).width()-900 +'px'}, 745, 'linear');
  } 
});
$('#two').click(function() {
  var clicks = $(this).data('clicks');
  if (clicks) {
     $("#two").animate({marginLeft: $(window).width()-900 +'px'}, 745, 'linear');
  } else {
     $("#two").animate({marginLeft: 0 +'px'}, 700, 'linear');
  }
  $(this).data("clicks", !clicks);
  if ($("#three").css("marginLeft")==$(window).width()-900 +'px') {
     $("#three").animate({marginLeft: 0 +'px'}, 100, 'linear');
	 $("#two").animate({marginLeft: $(window).width()-900 +'px'}, 745, 'linear');
  }
  if ($("#one").css("marginLeft")==$(window).width()-900 +'px') {
     $("#one").animate({marginLeft: 0 +'px'}, 100, 'linear');
	 $("#two").animate({marginLeft: $(window).width()-900 +'px'}, 745, 'linear');
  }  
});
$('#one').click(function() {
  var clicks = $(this).data('clicks');
  if (clicks) {
     $("#one").animate({marginLeft: $(window).width()-900 +'px'}, 745, 'linear');
  } else {
     $("#one").animate({marginLeft: 0 +'px'}, 700, 'linear');
  }
  $(this).data("clicks", !clicks);
  if ($("#two").css("marginLeft")==$(window).width()-900 +'px') {
     $("#two").animate({marginLeft: 0 +'px'}, 100, 'linear');
	 $("#one").animate({marginLeft: $(window).width()-900 +'px'}, 745, 'linear');
  }
  if...