JSFiddle - React, Tailwind, and code Playground

by thilakar

HTML

<div id="index_qa_nav" class="pagination_nav">
    <a class="previous_link" href>Prev</a>
    <a class="page_link first active_page" href style="display: inline-block;">1</a>
    <a class="page_link" href style="display: inline-block;">2</a>
    <a class="page_link" href style="display: inline-block;">3</a>
    <a class="page_link" href style="display: inline-block;">4</a>
    <a class="page_link last" href style="display: inline-block;">5</a>
    <a class="next_link" href>Next</a>
</div>

CSS

.pagination_nav {
    text-align: center;
    clear:both;
}

.pagination_nav .previous_link {
    float: left;
    margin-left: 12px;
    height: 16px;
    width: 11px;
    background: url(/gfx/pajination/pagination_arrows.png) no-repeat;
    text-indent: -9999px;
}

.pagination_nav .next_link {
    float: right;
    margin-right: 12px;
    height: 16px;
    width: 11px;
    background: url(/gfx/pajination/pagination_arrows.png) no-repeat -11px;
    text-indent: -9999px;
}

.pagination_nav .page_link {
    margin-bottom: 8px;
    margin-right: 4px;
    width: 9px;
    height: 11px;
    text-indent: -9999px;
    white-space: nowrap;
    background: url(/gfx/pajination/dots.png) no-repeat 0 1px;
}

.pagination_nav .active_page {
    width: 11px;
    height: 11px;
    background: url(/gfx/pajination/dots.png) no-repeat -8px;
}