JSFiddle - React, Tailwind, and code Playground

by Deepak Yadav

HTML

<div class="showcase">
							<ul>
							    <li class="item">
						            <h1><a href="#">Aaryogyam 1.7A One + One
								        	<small>
								        		<del>Rs. 6000</del>
								        		<span> Rs. 3000</span>
								        	</small>
								        </a>
							            </h1>
							            <span class="pic"><a href="#"><img src="https://cdn0.iconfinder.com/data/icons/iicon/512/buy-Cart-48.png" alt=""></a></span>
							    </li>
							    <li class="item">
						            <h1><a href="#">Aaryogyam 1.7A One + One
								        	<small>
								        		<del>Rs. 6000</del>
								        		<span> Rs. 3000</span>
								        	</small></a>
							            </h1>
						            <span class="pic"><a href="#"><img src="https://cdn0.iconfinder.com/data/icons/iicon/512/buy-Cart-48.png" alt=""></a></span>
							    </li>
							</ul>
						</div>

CSS

.showcase ul {list-style-type: none;padding: 0;margin: 0 5px;}
.showcase li.item {border-bottom:1px solid #000;}
.showcase li.item a {display: block;color:#000;clear:both;}
.showcase li.item span.pic img {float: right;width:50px;height:50px;float:right;}

.showcase li.item h1 {text-transform: uppercase;font-family: 'fauna_oneregular' serif;white-space: normal;font-size: 0.8em;}
.showcase li.item h1 a {color:#000 !important;text-decoration: none}
.showcase li.item h1 small {color:#a51c10;display: block;}
.showcase li.item h1 small span {color:#79a510;}