JSFiddle - React, Tailwind, and code Playground

HTML

<div>
	<ul>
		<li>
            <a href="#" class="link1">Sport</a>
            <img src="http://lorempixel.com/sport/360/240"/>    
        </li>
		<li>
            <a href="#" class="link2">City</a>
            <img src="http://lorempixel.com/city/360/240"/>
        </li>
		<li>
            <a href="#" class="link3">Abstract</a>
            <img src="http://lorempixel.com/abstract/360/240"/>            
        </li>
		<li>
            <a href="#" class="link4">Food</a>
            <img src="http://lorempixel.com/food/360/240"/>
            
        </li>
		<li>
            <a href="#" class="link5">Cats</a>
            <img src="http://lorempixel.com/cats/360/240"/>
        </li>
	</ul>
</div>

CSS

ul {
    list-style: none;
    position: relative;
    padding: 0;
}
li {
    display: inline-block;
}

a {
    display: block;
    padding: 6px 12px;
    border: 1px solid #dcdcdc;
    border-radius: 4px;
    text-decoration: none;
    color: #444444;
}

img {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 10px;
}

a:hover + img {
    display: block;
}