JSFiddle - React, Tailwind, and code Playground

by imtheman

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"...

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: all .4s;
    -webkit-transition: all .4s;
    -o-transition: all .4s;
    transition: all .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;
   ...