JSFiddle - React, Tailwind, and code Playground

HTML

<div class="pagination_wrap">
<a href="#" class="prev_arrow disabled"></a>

<ul>
<li class="current"><a href="#"><img src="http://i9.dainikbhaskar.com/thumbnail/51x51/web2images/www.bhaskar.com/2015/04/07/players_1428406480.jpg" alt="" /><span>1</span></a></li>
<li><a href="#"><span>2</span> <img src="http://i9.dainikbhaskar.com/thumbnail/51x51/web2images/www.bhaskar.com/2015/04/07/players_1428406480.jpg" alt="" /></a></li>
 <li><a href="#"><span>3</span> <img src="http://i9.dainikbhaskar.com/thumbnail/51x51/web2images/www.bhaskar.com/2015/04/07/players_1428406480.jpg" alt="" /></a></li>
</ul>


</div>

CSS

*{ margin:0; padding:0;} ul li { list-style:none;} a { text-decoration:none;}
.pagination_wrap * { box-sizing:border-box;}
.pagination_wrap { float:left; width:680px; box-sizing:border-box; position:relative; margin-top:25px;}
.pagination_wrap ul { display:table; text-align:center; width:620px; margin:auto;}
.pagination_wrap li { display:table-cell; vertical-align:middle;}
.pagination_wrap li a {display:block; width:51px; height:51px; border-radius:50%; border:2px solid #dadada; background:#e2e2e2; margin:auto;overflow:hidden;}
.pagination_wrap li a:after {content:"";display: inline-block;height: 100%;margin-left: -4px;vertical-align: middle;width:0;}
.pagination_wrap li img { display:none; margin-left:-4px; vertical-align:middle;}
.pagination_wrap li span {vertical-align:middle;display:inline-block;font-family:Arial, Helvetica, sans-serif;color:#000;font-size:19px;line-height:47px;}
.pagination_wrap li a:hover img, .pagination_wrap li.current img { display:inline-block;}
.pagination_wrap li a:hover span, .pagination_wrap li.current span { display:none;}
a.prev_arrow, a.next_arrow {height:25px;width:15px;background-image:url("http://i9.dainikbhaskar.com/dainikbhaskar2010/images/pagination/slide_nav.jpg"); position:absolute;}
a.prev_arrow.disabled {background-position:left -28px; cursor:default;}
a.next_arrow.disabled {background-position:right -28px; cursor:default;}
a.prev_arrow { float:left; background-position:left top; left:0; top:12px;}
a.next_arrow { float:right; background-position:right top; right:0; top:13px;}