JSFiddle - React, Tailwind, and code Playground

HTML

<div id="products">
	<ul>
		<li class="product a">
			<a href="">
                <p class="name">Ordinary product description.</p>
				<div class="icon-product"></div>
			</a>
			<p class="name">Ordinary product description.</p>
		</li>
		<li class="product b">
			<a href="">
                <p class="name">That lenghty product description or whatever else that does not allow you have fixed height for these elements.</p>
				<div class="icon-product"></div>
			</a>
			<p class="name">That lenghty product description or whatever else that does not allow you have fixed height for these elements.</p>
		</li>
		<li class="product c">
			<a href="">
                <p class="name">Another ordinary product description.</p>
				<div class="icon-product"></div>
			</a>
			<p class="name">Another ordinary product description.</p>
		</li>
	</ul>
</div>

SCSS

#products {	
	ul { position: relative; overflow: hidden; text-align: center; font-size: 0; line-height: 0;  padding: 0; margin: 0;
		li { display: inline-block; vertical-align: top; width: 130px; padding: 0 0 130px 0; margin: 0; }
	}
	
	li {
		a { display: block; position: absolute; width: 130px; background: rgba(255,0,0,.5); z-index: 3; top: 0; bottom: 0;
			.icon-product { background: #ccc; width: 90px; height: 90px; position: absolute; left: 20px; bottom: 20px; }
            .name { opacity: 1; }
		}
		
		.name { position: relative; margin: 20px 10px 0; font-size: 14px; line-height: 18px; opacity: 0; }
		
		a:hover {
			background: #ddd; text-decoration: none;
		
			.icon-product { background: #333; }
		}
	}
}