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.hidden {
  display: block;
  opacity: 0;
}

div#DIVguestBookingWarning.hide {
	animation: DIVguestBookingWarning_verso 1s linear forwards;
}
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;
	}
}

@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() {
let warn = document.getElementById("DIVguestBookingWarning");
	warn.classList.toggle("visible");
  
  if (warn.classList.contains('hidden')) {
		warn.classList.remove("hidden");
  } else {
		warn.classList.toggle("hide");
  }
});