JSFiddle - React, Tailwind, and code Playground

by jitendravyas

HTML

<ul>
    <li class="twenty-percent"><img src="http://lorempixum.com/300/400/"></li>
    <li><img src="http://lorempixum.com/300/400/"></li>
    <li><img src="http://lorempixum.com/300/400/"></li>
    <li><img src="http://lorempixum.com/300/400/"></li>
    <li><img src="http://lorempixum.com/300/400/"></li>
    <li><img src="http://lorempixum.com/300/400/"></li>
    <li><img src="http://lorempixum.com/300/400/"></li>
     <li><img src="http://lorempixum.com/300/400/"></li>
    <li><img src="http://lorempixum.com/300/400/"></li>
    <li><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:before {
    content: '';
    background:url(http://canadianneighborpharmacy.net/images/cnp/discount_20.png) no-repeat;
    position:absolute;
    right:-15px;
    top:-2px;
    width:45px;
    height:45px
}