JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapper">
    <div id="one">
<a href="http://ironware.in/product-category/faucets/" style="text-decoration: none;">
    <div class="img_wrapper">
        <span class="helper"></span>
        <img  class="imagewidth" src="http://mangoesandmiles.com/wp-content/uploads/2015/07/grohe-bathroom-faucets-SGjy.jpg"/>
    </div>
<h3 class="imagewidth"  id="h11" style="padding: 9px; text-align:center;">Bathroom Facets</h3>
</a>

    </div>
    <div id="one">
<a href="http://ironware.in/product-category/faucets/" style="text-decoration: none;">
    <div class="img_wrapper">
        <span class="helper"></span>
        <img  class="imagewidth" src="http://www.vinodpatel.com.fj/media/catalog/category/paint_swatches.jpg"/>
    </div>
<h3 class="imagewidth"  id="h11" style="padding: 9px; text-align:center;">Bathroom </h3>
</a>

    </div>
    <div id="one">
<a href="http://ironware.in/product-category/faucets/" style="text-decoration: none;">
    <div class="img_wrapper">
        <span class="helper"></span>
        <img class="imagewidth" src="http://mangoesandmiles.com/wp-content/uploads/2015/07/grohe-bathroom-faucets-SGjy.jpg"/>
    </div>

<h3 class="imagewidth"  id="h11" style="padding: 9px; text-align:center;"> Facets</h3>
</a>

    </div>
</div>

CSS

.wrapper > div {
    width: 100%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding-bottom: 8%;
}
@media screen and (min-width: 600px) {
    .wrapper {
        height: auto;
    }
    #one {
        width: 33.3333%;
        float: left;
    }
    .img_wrapper {
        height: 33vw;
    }
    .helper {
        display: inline-block;
        height: 100%;
        vertical-align: middle;
    }
    .img_wrapper img {
         vertical-align: middle;
    }
}
#one:hover h3 {
    transition: border-color .5s ease-in-out;
    cursor: pointer;
    color:#ff0000;
    border-bottom-color: #ff0000;
}
#one h3 {
    color:#000000;
    border-bottom: 2px solid #e7e4da;
}
.imagewidth {
    width: 95%;
    max-width: 100%
}
.headding_line {
    width: 50px;
    margin-top: 0px;
    margin-bottom: 30px;
    border-top: 2px solid #e7e4da;
}