JSFiddle - React, Tailwind, and code Playground

HTML

<html>
<head>
</head>
<body>
<div id="container">
<span id="fade-in">Fadein</span>||
<span id="fade-out">FadeOut</span>
<div id="fading-div" style="width:100px;height:100px;background:green;opacity=1"></div>
</div>
</body>
</html>

JavaScript

var fade_in_btn  = document.getElementById('fade-in'),
		fade_out_btn = document.getElementById('fade-out'),
		fading_div   = document.getElementById('fading-div');
	
	function sleep(milliseconds) {
		var start = new Date().getTime();
		for (var i = 0; i < 1e7; i++) {
			if ((new Date().getTime() - start) > milliseconds){
			break;
			}
		}
	}
	
	fade_out_btn.onclick = function(){
		for (var i=100; i >= 0; i--) {
			sleep(0010);
			opacity_function(i);
		}
	}
	
	fade_in_btn.onclick = function(){
		for (var i=1; i <= 100; i++) {
			sleep(0010);
			opacity_function(i);
		}
	}
	
	
	
	function opacity_function(opacity_value){
		fading_div.style.opacity = opacity_value / 100;
		fading_div.style.filter = 'alpha(opacity=' + opacity_value + ')';
		console.log(fading_div.style.opacity);
	}