JSFiddle - React, Tailwind, and code Playground

HTML

<div class="home-featured-class"> <a href="products.html"><img name="retroproducts" src="http://i.ytimg.com/vi/8-0e-t-42ss/maxresdefault.jpg" width="298" height="148" alt="retro products" style="background-color: #3366FF" /></a>

    
<h2 class="products"><a href="#">retro products</a></h2>

</div>

CSS

h2 {
    font-family:arial, verdana, helvetica, sans-serif;
    font-size:18px;
    color:#201c1f;
    text-decoration:none;
    text-transform:uppercase;
    font-weight:100;
    margin:0;
    padding:10px;
    background:#DB1D1D;
    text-align:center;
    border-top:1px solid #211c20;
}
h2 a:visited {
    color:#201c1f;
    text-decoration:none;
}
h2 a:link {
    color:#201c1f;
    text-decoration:none;
}
h2 a:hover {
    color:#201c1f;
    text-decoration:underline;
}
.home-featured-class {
    width:298px;
    height:auto;
    margin:0 30px 0 0;
    border: 1px solid #211c20;
    float:left;
}
.home-featured-class:hover .products {
    text-decoration: underline;
}