JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
	<header>
		<nav id="connection">
			как связаться?
			<br>
			<br>
				<div class="menu">
					телефон:
					<br>
					+7----------
					<br>
					<br>
					телеграмм:
					<br>
					@-----------
				</div>
		</nav>
  </header>
  </body>
</html>

CSS

#connection {
	font-weight: 500;
	font-size: 30px;
	font-style: normal;
	width: 300px;
	height: 30px;
	color: black;
	position: absolute;
	top: 50px;
	left: 100px;
	transition: 1.5s;
}
#connection:hover .menu{
	opacity: 1;
}
#connection .menu:hover{
	opacity: 0;
}
.menu {
	font-weight: 600;
	font-size: 18px;
	font-style: normal;
	color: black;
	padding: 30px;
	border: 2px solid yellow;
	background: white;
	position: absolute;
	right: 130px;
	opacity: 0;
	transition: 0.7s;
}