JSFiddle - React, Tailwind, and code Playground

HTML

<section id="main-catalogs-section">
		
		<div style="clear: both"></div>

		<div class="catalog-display">
					<div class="catalog-item" data-categories="2">
						<div class="item-title"><img style="visibility: hidden" src="/Content/images/white_square_icon.gif" alt="menu-icon" /><div style="visibility: hidden" class="favorite-icon-inactive"></div></div>
						<a href="/ClassicWeb/ecatalog/list.asp?aliasid=&pjid=&divid=&cat=2016480728" target="_blank">
							<img class="supplier-logo" src="http://orig09.deviantart.net/30b8/f/2011/278/1/4/modified_ubuntu_logo_by_evanc9606-d4bw6mp.png" alt="Ubuntu Shoes logo" />
						</a>
						<div class="supplier-name">Ubuntu Shoes</div>
						<div class="supplier-info">
							<span><a href="#" target="_blank">Program Info</a></span>
							<span class="contact-info">Contact Info</span>
						</div>
					</div>
					<div class="catalog-item" data-categories="2,3">
						<div class="item-title"><img style="visibility: hidden" src="/Content/images/white_square_icon.gif" alt="menu-icon" /><div style="visibility: hidden" class="favorite-icon-inactive"></div></div>
						<a href="/ClassicWeb/ecatalog/list.asp?aliasid=&pjid=&divid=&cat=2016480728" target="_blank">
							<img class="supplier-logo" src="http://silvercreekart.weebly.com/uploads/3/7/3/0/37300503/9869404.png" alt="Silvercreek Beds &amp; Boots logo" />
						</a>
						<div class="supplier-name">Silvercreek Beds &amp; Boots</div>
						<div class="supplier-info">
							<span><a href="#" target="_blank">Program Info</a></span>
							<span class="contact-info">Contact Info</span>
						</div>
					</div>
					<div class="catalog-item" data-categories="1">
						<div class="item-title"><img style="visibility: hidden" src="/Content/images/white_square_icon.gif" alt="menu-icon" /><div style="visibility: hidden" class="favorite-icon-inactive"></div></div>
						<a href="/ClassicWeb/ecatalog/list.asp?aliasid=&pjid=&divid=&cat=2016480728" target="_blank">
							<img...

CSS

/* catalogs themselves */
.catalog-display {
	margin-top: 10px;
}

.catalog-item {
	width: 150px;
	height: 175px;
	margin-right: 20px;
	/*margin-bottom: 20px;*/
	margin-bottom: 60px;
	background-color: white;
	border: 1px solid #0E80B4;
	display: inline-block;
	vertical-align: top;
	position: relative;
	-moz-transition: height .4s;
	-webkit-transition: height .4s;
	-o-transition: height .4s;
	transition: height .4s;
	text-align: center;
}

	.catalog-item:hover {
		height: 215px;
		margin-bottom: 0;
	}

		.catalog-item:hover .item-title {
			opacity: 1;
			-moz-transition: all .3s;
			-webkit-transition: all .3s;
			-o-transition: all .3s;
			transition: all .3s;
		}

	.catalog-item .item-title {
		background-color: #656262;
		width: 100%;
		/* height: 25px; */
		height: 15px;
		opacity: 0;
	}



	.catalog-item:hover .item-title div.favorite-icon-active::before {
		color: red;
	}

	.catalog-item .item-title img {
		position: absolute;
		left: 6px;
		top: 4px;
		cursor: pointer;
	}

	.catalog-item .item-title div {
		position: absolute;
		top: -6px;
		right: 6px;
		font-size: 24px;
		cursor: pointer;
		color: white;
	}

		.catalog-item .item-title div.favorite-icon-active::before {
			content: "\2665";
			color: white;
		}

		.catalog-item .item-title div.favorite-icon-active:hover::before {
			content: "\2661";
			color: white;
		}

		.catalog-item .item-title div.favorite-icon-inactive::before {
			content: "\2661";
		}

		.catalog-item .item-title div.favorite-icon-inactive:hover::before {
			content: "\2665";
			color: red;
		}

	.catalog-item .supplier-logo {
		height: 78px;
		margin: 5px 0;
	}

	.catalog-item .supplier-name {
		color: #0E80B4;
		font-weight: bold;
		cursor: pointer;
		padding: 5px 5px 0 5px;
		border-top: 1px solid #656262;
		
	}

	.catalog-item .supplier-info {
		color: #656262;
		font-weight: bold;
		bottom: 0;
		position: absolute;
		border-top: 1px solid #656262;
		opacity: 0;
		-moz-transition: all .2s;
		-webkit-transition: all...