JSFiddle - React, Tailwind, and code Playground

HTML

<div class="pagination-wrapper">
    
    <div class="pagination">
        <a href="#" class="first" data-action="first">&laquo;</a>
        <a href="#" class="previous" data-action="previous">&lsaquo;</a>
        <input type="text" readonly="readonly" data-max-page="40" />
        <a href="#" class="next" data-action="next">&rsaquo;</a>
        <a href="#" class="last" data-action="last">&raquo;</a>
    </div>
        
</div>

CSS

/* scroll right to the bottom, this is just the default jqPagination style */

.pagination {
    float: left;
    border: 1px solid #CDCDCD;
    border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
}

.pagination a {
    display: block;
    float: left;
    height: 20px;
    width: 20px;
    background-color: rgb(0,50,75);
    color: #555555;
    text-align: center;
    text-decoration: none;
    font-family: Times, 'Times New Roman', Georgia, Palatino; /* ATTN: need a better font stack */
    font-weight: bold;
    font-size: 16px;
    outline: none;
    vertical-align: middle;

    background: #F3F3F3; /* Old browsers */
    background: -moz-linear-gradient(top,  #F3F3F3 0%, #D3D3D3 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#F3F3F3), color-stop(100%,#D3D3D3)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #F3F3F3 0%,#D3D3D3 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #F3F3F3 0%,#D3D3D3 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #F3F3F3 0%,#D3D3D3 100%); /* IE10+ */
    background: linear-gradient(top,  #F3F3F3 0%,#D3D3D3 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#F3F3F3', endColorstr='#D3D3D3',GradientType=0 ); /* IE6-9 */

}

.pagination a:hover, .pagination a:focus, .pagination a:active {

    background: #CECECE; /* Old browsers */
    background: -moz-linear-gradient(top,  #E4E4E4 0%, #CECECE 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#E4E4E4), color-stop(100%,#CECECE)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #E4E4E4 0%,#CECECE 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #E4E4E4 0%,#CECECE 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #E4E4E4 0%,#CECECE 100%); /* IE10+ */
    background: linear-gradient(top,  #E4E4E4...