JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
    <li><span class="twenty-percent">-20%</span><img src="http://lorempixum.com/300/400/"><span class="description">Good Product</span></li>
   <li><span class="twenty-percent">-20%</span><img src="http://lorempixum.com/300/400/"></li>
    <li><span class="twenty-percent">-20%</span><img src="http://lorempixum.com/300/400/"></li>
    <li><span class="twenty-percent">-20%</span><img src="http://lorempixum.com/300/400/"><span class="description">Good Product</span></li>
    <li><span class="twenty-percent">-20%</span><img src="http://lorempixum.com/300/400/"></li>
    <li><span class="twenty-percent">-20%</span><img src="http://lorempixum.com/300/400/"></li>
   <li><span class="twenty-percent">-20%</span><img src="http://lorempixum.com/300/400/"><span class="description">Good Product</span></li>
    <li><span class="twenty-percent">-20%</span><img src="http://lorempixum.com/300/400/"></li>

</ul>

CSS

body {
    margin: 0;
    padding: 0;
    font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
}
ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
li {
    float: left;
    width: 18%;
    
    padding: 0;position:relative;float:left;
margin:15px;background:yellow;display:inline
}
img {
    width: 100%;
}

li img{display:block;}

.twenty-percent {
    content: '';
    background:url(http://canadianneighborpharmacy.net/images/cnp/discount_20.png) no-repeat;
    position:absolute;
    right:-15px;
    top:-2px;
    width:10%;
    height:10%; text-indent:-9999px
}

.description {display:block; font-size:1em;}