JSFiddle - React, Tailwind, and code Playground

HTML

<!doctype html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Personal-Website Build-5</title>
		
		<link rel="stylesheet" href="style.css">
		
	</head>

	<body>
		<div class="test_div cursorInteraction">
			<a href="" class="test_button cursorInteraction_Negative"> Test Link </a>
		</div>
		
		<!-- Custom-Cursor START -->
		<div class="cursor"></div>
		<div class="cursor_2"></div>
		
		<script src="scripts/customCursor.js"></script>
		<!-- Custom-Cursor END -->
	</body>
</html>

CSS

@charset "UTF-8";
/* CSS Document */

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	list-style: none;
	cursor: none;
}

a {
	text-decoration: none;
	color: black;
}

a:hover {
	color: white;
}

body {
	background-color: black;
}

body, html {
	height: 100%; /* <- Firefox needs this. – This might not be necessary in the final website, because there will be objects spanning the whole viewport. */
}

.test_div {
	background-color: white;
	position: fixed;
	width: 400px;
	height: 200px;
	margin: 15px;
	
	display: flex;
	justify-content: center;
	align-items: center;
}

.test_button {
	border: 1px solid black;
	height: 50px;
	width: 150px;
	line-height: 50px;
	text-align: center;
	font-family: proxima-nova, sans-serif;
}

.test_button:hover {
	background-color: black;
}

/* Custom Cursor START */
.cursor {
	z-index: 10;
	width: .5rem;
	height: .5rem;
	border-radius: 50%;
	background-color: white;
	position: fixed;
	transform: translate(-50%, -50%);
	pointer-events: none;
	display: none;
}

.cursor_2 {
	z-index: 9;
	width: 2rem;
	height: 2rem;
	border-radius: 50%;
	background-color: white;
	opacity: .3;
	position: fixed;
	transform: translate(-50%, -50%);
	pointer-events: none;
	display: none;
	
	transition: all .1s ease-out;
}
/* Custom Cursor END */

JavaScript

var cursor = document.querySelector(".cursor");
var cursor2 = document.querySelector(".cursor_2");

var detectIfCursorStatic = undefined;

window.addEventListener('mousemove', function(e){
	// Chain "cursor" and "cursor2" to mouse-position. START
	cursor.style.top = e.y + "px";
	cursor.style.left = e.x + "px";
	
	cursor2.style.top = e.y + "px";
	cursor2.style.left = e.x + "px";
	// Chain "cursor" and "cursor2" to mouse-position. END
	
	cursor.style.display = "block";
	cursor2.style.display = "block";
	
	cursor2.style.transform = "translate(-50%, -50%) scale(1)";
	
	// Change cursor2, when mouse sits still. START
	clearTimeout(detectIfCursorStatic);
	detectIfCursorStatic = setTimeout(function(){
		
		cursor2.style.transform = "translate(-50%, -50%) scale(1.3)";
		setTimeout(function(){
			cursor2.style.transform = "translate(-50%, -50%) scale(0)";
		}, 200);
		
	}, 500);
	// Change cursor2, when mouse sits still. END
});

// Make it, so that when the cursor leaves the viewport, "cursor" and "cursor2" instantly disappear, but when entering the viewport, they blend in. START
document.addEventListener('mouseout', function(){
	cursor.style.opacity = "0";
	cursor2.style.opacity = "0";
	
	setTimeout(function(){
		cursor.style.transition = "opacity .5s linear"
	}, 500);
});

document.addEventListener('mouseover', function(){
	cursor.style.opacity = "1";
	cursor2.style.opacity = ".3";
	
	setTimeout(function(){
		cursor.style.transition = "opacity 0s linear"
	}, 500);
});
// … END

// Make it, so that, when the cursor is hovering over an object, with the class: "cursorInteraction", "cursor" and "cursor2" change colour. START
var cursorInteractionObjects = document.querySelectorAll(".cursorInteraction");

cursorInteractionObjects.forEach(function(element){
	element.addEventListener('mouseenter', function(){
		cursor.style.backgroundColor = "black";
		cursor2.style.backgroundColor = "black";
		cursor2.style.opacity = ".2";
	});
	
	element.addEventListener('mouseleave',...