JSFiddle - React, Tailwind, and code Playground

by ignaciocorreia

HTML

<li class="mainSuggestion">
    <img class="mainImg" src="http://placehold.it/100x100"/>
    <div class="overlay">
        <img class="icon"/>
        <span>
            <a>Text Here</a>
        </span>
    </div>
</li>

CSS

li.mainSuggestion{
    position: relative;
}

img.mainImg{
    position: relative;
    z-index: 2;
}

li.mainSuggestion .overlay{
    position: absolute;
    bottom: 0;
    width: 100%
    height: 30%;
    color: #000;
    opacity: .4;
    z-index: 15;
}