Pagination

<div class="pagination">
    <div class="counts">
        <p>
            Showing
            <span>1</span>
            to
            <span>10</span>
            of
            <span>97</span>
            <i class="fa-light fa-pipe text-xs items-center"></i>
            results to show:
        </p>
        <div class="dropdown" tabindex="0">
                <button type="button" class="btn-default">
                    10
                    <i class="fa-light fa-chevron-down text-xs items-center"></i>
                </button>
                <div class="dropdown-content direction-down" tabindex="-1">
                    <div class="dropdown-menu">
                        <a href="#" tabindex="-1">10</a>
                        <a href="#" tabindex="-1">50</a>
                        <a href="#" tabindex="-1">100</a>
                    </div> 
                </div>
        </div>
    </div>
    <nav aria-label="Pagination">
        <a href="#" class="arrow">
            <i class="fa-light fa-chevron-left text-xs items-center"></i>
        </a>
        <a  href="#" aria-current="page" class="active">1</a>
        <a href="#" >2</a>
        <a href="#" >3</a>
        <span >...</span>
        <a href="#" >8</a>
        <a href="#" >9</a>
        <a href="#" >10</a>
        <a class="arrow" href="#" class="arrow">
            <i class="fa-light  fa-chevron-right text-xs items-center "></i>
        </a>
    </nav>
</div>

<div class="pagination">
    <nav aria-label="Pagination">
        <a href="#" class="arrow">
            <i class="fa-light fa-chevron-left text-xs items-center"></i>
        </a>
        <a  href="#" aria-current="page" class="active">1</a>
        <a href="#" >2</a>
        <a href="#" >3</a>
        <span >...</span>
        <a href="#" >8</a>
        <a href="#" >9</a>
        <a href="#" >10</a>
        <a class="arrow" href="#" class="arrow">
            <i class="fa-light  fa-chevron-right text-xs items-center "></i>
        </a>
    </nav>
    <div class="counts">
        <p>
            Showing
            <span>1</span>
            to
            <span>10</span>
            of
            <span>97</span>
            <i class="fa-light fa-pipe text-xs items-center"></i>
            results to show:
        </p>
        <div class="dropdown" tabindex="0">
                <button type="button" class="btn-default">
                    10
                    <i class="fa-light fa-chevron-down text-xs items-center"></i>
                </button>
                <div class="dropdown-content direction-down" tabindex="-1">
                    <div class="dropdown-menu">
                        <a href="#" tabindex="-1">10</a>
                        <a href="#" tabindex="-1">50</a>
                        <a href="#" tabindex="-1">100</a>
                    </div> 
                </div>
        </div>
    </div>

</div>

<div class="pagination justify-center">
    <nav aria-label="Pagination">
        <a href="#" class="arrow">
            <i class="fa-light fa-chevron-left text-xs items-center"></i>
        </a>
        <a  href="#" aria-current="page" class="active">1</a>
        <a href="#" >2</a>
        <a href="#" >3</a>
        <span >...</span>
        <a href="#" >8</a>
        <a href="#" >9</a>
        <a href="#" >10</a>
        <a class="arrow" href="#" class="arrow">
            <i class="fa-light  fa-chevron-right text-xs items-center "></i>
        </a>
    </nav>
</div>