JSFiddle - React, Tailwind, and code Playground

HTML

<div class="button">
	<h2>I am a heading</h2>
	<p>This is some subtext to the heading and is in a paragraph element</p>
	<div class="grid-link">
		<a href="#">Here's some link text that is hidden with CSS</a>
	</div>
</div>

CSS

.button {
	position: relative;
	width: 200px;
	height: 100px;
	background: #ddd;
}

.button:hover {
	background: #ccc;
}

.grid-link a {
	text-indent: -9999px;
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 3;
	width: 100%;
	height: 100%;
    background-color:#fff;
    opacity:0;
}