JSFiddle - React, Tailwind, and code Playground

HTML

<ul>

<li>
  <img src="http://lorempixum.com/200/200/food" />
  <h2>price is $20 only</h2>
  <span class="twenty-percent rotate"/>price is $20 only 20% </span>
</li>
 
</ul>

CSS

.rotate {

/* Safari */
-webkit-transform: rotate(-90deg);

/* Firefox */
-moz-transform: rotate(-90deg);

/* IE */
-ms-transform: rotate(-90deg);

/* Opera */
-o-transform: rotate(-90deg);

/* Internet Explorer */
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);

}

li{position:relative;float:left;margin:15px;background:yellow;display:inline}

.twenty-percent{
background:url(http://canadianneighborpharmacy.net/images/cnp/discount_20.png);position:absolute; right:-15px; top:-5px; width:45px; height:45px}