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;"><img  class="imagewidth" src="http://mangoesandmiles.com/wp-content/uploads/2015/07/grohe-bathroom-faucets-SGjy.jpg"/>
<br>
<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;"><img  class="imagewidth" src="http://www.vinodpatel.com.fj/media/catalog/category/paint_swatches.jpg"/>
<br>
<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;"><img class="imagewidth" src="http://mangoesandmiles.com/wp-content/uploads/2015/07/grohe-bathroom-faucets-SGjy.jpg"/>
<br>
<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;
			
			}
			
			}
			
			
			
			#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: 98.5%;
			max-width: 100%
			}
			
			.headding_line
			{
			width: 50px;
			margin-top: 0px;
			margin-bottom: 30px;
			border-top: 2px solid #e7e4da;
			}