JSFiddle - React, Tailwind, and code Playground

JavaScript

$(document).ready(function(){
$('#three').click(function() {
  var clicks = $(this).data('clicks');
  if (clicks) {
     $("#three").animate({marginLeft: $(window).width()-900 +'px'}, 746, 'linear');
	 $("#three-info").css("visibility" , "visible");
	 $("#ignore-three").css("visibility" , "visible");
	 $("#ignore-three").fadeIn(3000);
  } else {
	  if ($("#three").css("marginLeft")=='0px') {
		  $("#ignore-three").css("visibility" , "visible");
		  $("#ignore-three").fadeIn(3000);
		  }
     else {
		 $("#three").animate({marginLeft: 0 +'px'}, 700, 'linear');
	 	 $("#ignore-three").css("visibility" , "hidden");
	 };
  }
  $(this).data("clicks", !clicks);
   if ($("#two").css("marginLeft")==$(window).width()-900 +'px') {
	 $("#ignore-three").css("visibility" , "visible");
     $("#two").animate({marginLeft: 0 +'px'}, 63, 'linear');
	 $("#three").animate({marginLeft: $(window).width()-900 +'px'}, 746, 'linear');
	 $("#ignore-two").css("visibility" , "hidden");
  }
  if ($("#one").css("marginLeft")==$(window).width()-900 +'px') {
     $("#one").animate({marginLeft: 0 +'px'}, 63, 'linear');
	 $("#three").animate({marginLeft: $(window).width()-900 +'px'}, 746, 'linear');
	 $("#ignore-one").css("visibility" , "hidden");
  } 
});
$('#two').click(function() {
  var clicks = $(this).data('clicks');
  if (clicks) {
     $("#two").animate({marginLeft: $(window).width()-900 +'px'}, 746, 'linear');
	 $("#two-info").css("visibility" , "visible");
	 $("#ignore-two").css("visibility" , "visible");
  } else {
	  if ($("#two").css("marginLeft")=='0px') {
		  $("#ignore-two").css("visibility" , "visible");
		  }
     else {
		 $("#two").animate({marginLeft: 0 +'px'}, 700, 'linear');
	 	 $("#ignore-two").css("visibility" , "hidden");
	 };
  }
  $(this).data("clicks", !clicks);
  if ($("#three").css("marginLeft")==$(window).width()-900 +'px') {
	 $("#ignore-two").css("visibility" , "visible");
     $("#three").animate({marginLeft: 0 +'px'}, 63, 'linear');
	...