JSFiddle - React, Tailwind, and code Playground

HTML

<div id="test">test</div>

<div id="DIVguestBookingWarning" class="hidden">coucou</div>

CSS

div#DIVguestBookingWarning {
	position: absolute;
	top: 19vw;
	left: 28vw;
	max-width: 40vw;
	border-radius: 1vw;
	padding: 1vw;
	background-color: rgba(0, 102, 102, 1);
	color: rgba(255, 255, 255, 1);
	
}



div#DIVguestBookingWarning.visible {
	animation: DIVguestBookingWarning_recto 1s linear forwards;
}
@keyframes DIVguestBookingWarning_recto {
	from {
		display: none;
		opacity: 0;
	}
	1% {
		display: block;
		opacity: 0;
	}
	to {
		display: block;
		opacity: 1;
	}
}

div#DIVguestBookingWarning.hidden {
	animation: DIVguestBookingWarning_verso 1s linear forwards;
}
@keyframes DIVguestBookingWarning_verso {
	from {
		display: block;
		opacity: 1;
	}
	99% {
		display: block;
		opacity: 0;
	}
	to {
		display: none;
		opacity: 0;
	}
}

JavaScript

document.getElementById("test").addEventListener("click", function() {
	document.getElementById("DIVguestBookingWarning").classList.toggle("visible");
	document.getElementById("DIVguestBookingWarning").classList.toggle("hidden");
});