JSFiddle - React, Tailwind, and code Playground

HTML

<div class="tablenav-pages"><a class="prev page-numbers" href="../tutkimusjulkaisut/tyopapereita/?wpfb_list_page=2">&laquo; Edellinen</a><a class='page-numbers' href='../tutkimusjulkaisut/tyopapereita/?wpfb_list_page=1'>1</a><a class='page-numbers' href='../tutkimusjulkaisut/tyopapereita/?wpfb_list_page=2'>2</a><span class='page-numbers current'>3</span><a class='page-numbers' href='../tutkimusjulkaisut/tyopapereita/?wpfb_list_page=4'>4</a><a class="next page-numbers" href="../tutkimusjulkaisut/tyopapereita/?wpfb_list_page=4">Seuraava &raquo;</a></div>

CSS

.tablenav-pages {
        clear: both;
        border-radius: 0;
        font-family: 'Gotham A','Gotham B', sans-serif;
        font-weight: 300;
        padding: 6px 14px;
        font-size: 15px;
    }
    .tablenav-pages a, .tablenav-pages span {
        text-decoration: none;
        color: #a30083;
        background-color: #fff;
        border: 1px solid #ddd;
        padding: 6px 14px;
        display: inline-block;
    }
    .tablenav-pages a:hover {
        border-color: #a30083;
        background-color: #fff;
        padding: 6px 14px;
    }
    .tablenav-pages span.current {
        background-color: #a30083;
        border-color: #a30083;
        color: #fff;
        padding: 6px 14px;
        display: inline-block;
     }
    div.tablenav-pages {
        padding-left: 0;
        padding-right: 0;
        float: left;
    }