JSFiddle - React, Tailwind, and code Playground

HTML

<div class="hover-container">
	<p>text</p>
	<a class="hover-content" href="#">
	<p>
	hier soll der link hin
	</p>
	</a>
	</div>

CSS

.hover-container {
	width: 370px;
	height: 220px;
	position: relative;
	overflow: hidden;
	border: 1px solid #BDBDBD;	
	transition: background-color 1.5s;
}

 .hover-content {
	display: none;
	width: 90%;
	height: 98%;
	padding: 1% 5%;
	position: absolute;
	overflow: hidden;
	top: 0;
	left: 0;
}


 a.hover-content {
	text-decoration: none;
	
}

 .hover-container:hover .hover-content {
	display: block;	
	background-color: #CA3427;
}