JSFiddle - React, Tailwind, and code Playground

HTML

<a href="#" onclick="winOpen();">Войти</a><br><br>
	<div id="divWin">
		<div id="closetButton" onclick="winCloset();">
			Х
		</div>
	</div>

CSS

#divWin {
		position:absolute; 
		width:300px; 
		height:200px; 
		border:3px solid green; 
		background:white; 
		visibility:hidden; 
		padding:20px; 
		text-align:center;
	}
	#divWin div div{
		float: left;
	}
	#closetButton {
		position:absolute; 
		top:0; 
		right:0; 
		border-bottom:3px solid green; 
		border-left:3px solid green; 
		font-weight:bold; 
		cursor:pointer; 
		padding:2px 4px
	}
	p{
		cursor:pointer;
	}

JavaScript

function winOpen(){
		var obj=document.getElementById("divWin").style;
		obj.visibility="visible";
		winOpen2(3, 0, obj);
	};
	 
	function winOpen2(s, o, obj){//показываем окно
		o+=s;
		if(o<100){
			obj.opacity=o/100;
			obj.filter='alpha(opacity='+o+')';
			setTimeout(function(){
					winOpen2(s, o, obj);
				}, 55);
			}
		else{//показать полностью
			obj.opacity=1;
			obj.filter='alpha(opacity=100)';
		};
	};
	 
	function winCloset(){
		winCloset2(5, 100, document.getElementById("divWin").style);
	};
	 
	function winCloset2(s, o, obj){//скрываем окно
		o-=s;
		if(o>0){
			obj.opacity=o/100;
			obj.filter='alpha(opacity='+o+')';
			setTimeout(function(){
					winCloset2(s, o, obj);
				}, 55);
		}
		else{//обнуляем на выходе
			obj.opacity=0;
			obj.filter='alpha(opacity=0)';
			obj.visibility="hidden";
		};
	};