JSFiddle - React, Tailwind, and code Playground

HTML

<div class="bottom_nav_wrap">
<div class="bottom_nav">
<ul>
<li class="previuos"><a href="#">&#171; Previous</a></li>
<li class="pages active"><a href="#">1</a></li>
<li class="pages"><a href="#">2</a></li>
<li class="pages"><a href="#">3</a></li>
<li class="next"><a href="#">Next &#187;</a></li>
</ul>
</div>
 
</div>

CSS

.bottom_nav_wrap{
padding:10px 0;
background: url(../img/content-border.png) top left repeat-x;
}
 
.bottom_nav_wrap .bottom_nav{
padding:10px;
font-size:20px;
font-weight:bold;
background: rgb(223,237,245);
border:1px solid rgb(197,226,243);
position:relative;
}
.bottom_nav ul{
    padding:0 150px;
    text-align: center;
} 
.bottom_nav ul li {
display:inline-block;
background:rgb(165,191,207);
}
 
.bottom_nav ul li a{
text-decoration:none;
padding:14px;
color:rgb(255,255,255);
display:block;
}
 
.bottom_nav ul li a:hover{
background:rgb(33,140,200);
}
 
ul li.pages{
background:rgb(33,140,200);
}
 
ul li.next{
position:absolute;
top:30px;
right:10px;
}
ul li.previuos{
position:absolute;
top:30px;
left:10px;
}
 
.bottom_nav ul li.active{
background:rgb(18,92,135);
 
}