JSFiddle - React, Tailwind, and code Playground

HTML

<div class="feature" style="background: url(http://californiamonstersalads.com/skin/frontend/cms/default/images/bkg.jpg) no-repeat top center!important; background-size: cover!important;">
<div class="feature-bottom"><h3>h</h3><h2>h</h2></div>

<!-- Added 2nd div with copy of the class -->
<div class="feature-bottom2"><h3>category</h3><h2>Some title belongs here</h2></div>

CSS

.feature { position: relative; float: left; width: 465px; height: 170px; margin-top: 24px; margin-right: 30px; }
.feature.last { margin-right: 0; }

/*Copy of feature bottom*/
.feature-bottom2 {
	background: none;
	position: absolute;
	bottom: 0;
	left: 0;
	padding: 0 30px 6px;
	width: 100%;
	z-index: 200;
	line-height: 1;
}
.feature-bottom {
        color: transparent;
	background: none;
	position: absolute;
	bottom: 0;
	left: 0;
	padding: 0 30px 6px;
	width: 100%;
	z-index: 200;
	line-height: 1;
}
.feature-bottom::after {
    content: "";
    position: absolute;
    bottom: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    z-index: 100;
    background: rgba(0,0,0,0);
	background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.5) 50%, rgba(0,0,0,0.5) 100%);
	background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(0,0,0,0)), color-stop(50%, rgba(0,0,0,0.5)), color-stop(100%, rgba(0,0,0,0.5)));
	background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.5) 50%, rgba(0,0,0,0.5) 100%);
	background: -o-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.5) 50%, rgba(0,0,0,0.5) 100%);
	background: -ms-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.5) 50%, rgba(0,0,0,0.5) 100%);
	background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.5) 50%, rgba(0,0,0,0.5) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#000000', GradientType=0 );
}
/* Copy of below*/
.feature-bottom2 h3 { color: #FFF; font-size: 15px; font-weight: 400; margin: 0; }
.feature-bottom2 h2 { color: #FFF; font-size: 24px; font-weight: 400; margin: 0; }

.feature-bottom h3 { font-size: 15px; font-weight: 400; margin: 0; }
.feature-bottom h2 { font-size: 24px; font-weight: 400; margin: 0; }