JSFiddle - React, Tailwind, and code Playground

JavaScript

window.addEventListener("resize", debounce(function(event) {
							eventWidth=document.body.clientWidth;
							console.log(eventWidth + ' wide by ');
							bigIcon();
							if (eventWidth>1002){
								clearTimeout(tid1);
								clearTimeout(tid2);
								if (slidePosition==true){
									$(".slider").addClass("slider-transform");
								}else{
									$(".slider").removeClass("slider-transform");
								}
								return slider1();
							}else{
								clearTimeout(tid1);
								clearTimeout(tid2);
								if (slidePosition==true){
								$(".slider").addClass("slider-transform-2");
								}else{
									$(".slider").removeClass("slider-transform-2");
								}
								return slider2();
							}
							
							},500));

						
var big =function bigIcon(){
			console.log("read main");
			if (document.body.clientWidth<768){
				$(".hcontact").find(".fa-1x").addClass("fa-2x");
				$(".hcontact").find(".fa-1x").removeClass("fa-1x");
				console.log(document.body.clientWidth);
				
			} else {
				console.log(document.body.clientWidth);
				$(".hcontact").find(".fa-2x").addClass("fa-1x");
				$(".hcontact").find(".fa-2x").removeClass("fa-2x");
			}
			
		}
		var eventWidth = null;
		function checkWidth(eventWidth){/*
							window.addEventListener("resize", debounce(function(event) {
							eventWidth=document.body.clientWidth;
							console.log(eventWidth + ' wide by ' + document.body.clientHeight+' high');
							clearTimeout(eventWidth);
							return slideReset();
							
						
	
					},250));*/
}
function debounce(func, wait, immediate) {
	var timeout;
	return function() {
		var context = this, args = arguments;
		var later = function() {
			timeout = null;
			if (!immediate) func.apply(context, args);
		};
		var callNow = immediate && !timeout;
		clearTimeout(timeout);
		timeout = setTimeout(later, wait);
		if (callNow) func.apply(context, args);
	};
}
var tid1;
var tid2;
var slidePosition=true;
function slider1() {
					if...