JSFiddle - React, Tailwind, and code Playground

by Naveen Kumar

HTML

<div class="pics">
    
<div id="prev"><</div>
<div id="next">></div>
    <img id="pic0" src="fileView.php?id=1" alt="9&quot; x 13&quot; Cake" width="80%" class="curr" />
<p id="cost" style="float:left;"><b>Price: $15.00</b></p>
  </div>

CSS

.pics{
float:left;
    position:relative;
}
#prev, #next{
float:left;
cursor:pointer;
height:30px;
width:30px;
display: table-cell;
vertical-align: middle;
    position:absolute;
    margin-top:40%;
}
#prev{
background:url(fancybox/fancy_nav_left.png) no-repeat center;
}#next{
background:url(fancybox/fancy_nav_right.png) no-repeat center;
margin-left:200px;
}
*[id*='pic']{
margin-left:40px;
margin-right:10px;
}