JSFiddle - React, Tailwind, and code Playground

HTML

<div class="footernav"> <a href="javascript:void(0)">
        <figure> <img src="http://lorempixel.com/200/200/fashion/" class="fluid">
                <figcaption>
                        <h3>Product Name</h3>
                </figcaption>
        </figure>
        </a> <a href="javascript:void(0)">
        <figure> <img src="http://lorempixel.com/200/200/fashion/">
                <figcaption>
                        <h3>Product Name</h3>
                </figcaption>
        </figure>
        </a> <a href="javascript:void(0)" class="active">
        <figure>
                <div class="img-holder"> <img src="http://lorempixel.com/200/200/fashion/"> </div>
                <figcaption>
                        <h3>Product Name</h3>
                </figcaption>
        </figure>
        </a> <a href="javascript:void(0)">
        <figure>
                <div class="img-holder"> <img src="http://lorempixel.com/200/200/fashion/"> </div>
                <figcaption>
                        <h3>Product Name</h3>
                </figcaption>
        </figure>
        </a> <a href="javascript:void(0)">
        <figure>
                <div class="img-holder"> <img src="http://lorempixel.com/200/200/fashion/"> </div>
                <figcaption>
                        <h3>Product Name</h3>
                </figcaption>
        </figure>
        </a> <a href="javascript:void(0)">
        <figure>
                <div class="img-holder"> <img src="http://lorempixel.com/200/200/fashion/"> </div>
                <figcaption>
                        <h3>Product Name</h3>
                </figcaption>
        </figure>
        </a> <a href="javascript:void(0)">
        <figure>
                <div class="img-holder"> <img src="http://lorempixel.com/200/200/fashion/"> </div>
                <figcaption>
                        <h3>Product Name</h3>
                </figcaption>
        </figure>
        </a> <a href="javascript:void(0)">
        <figure>
               ...

CSS

.footernav {white-space;no-wrap; padding-top: 0.2%; border-top: 1px solid white; overflow: hidden; white-space:nowrap; padding-bottom: 1.9%;width: 100%;}
.footernav a { text-decoration: none; font-weight: bold; display: inline-block; padding-right: 1.5%; padding-left: 1.5%; text-align: center; margin-top: 1.1em; overflow:auto; width: 100%;}
.footernav figure:last-child { margin-right: 0; }
.footernav img { min-width: 118px; max-width: 118px; padding:3px;  }
figure{margin:0}
.footernav a:hover,
.footernav a.selected { border-top-left-radius: 15px;
border-top-right-radius: 15px; background:red}
.footernav h3 { color: #000; font-weight: 700; margin-top: 0; margin-bottom: 0.3em; font-size: 1.1em; text-transform: uppercase; margin-top:0.5em }