Pagination

<div class="flex-1 flex items-center justify-center">
    <nav class="relative inline-flex font-bold text-blue space-x-1" aria-label="Pagination">
        <a href="#" class="relative inline-flex justify-center items-center h-8 w-8 hover:text-pink focus:outline-blue">
            <span class="sr-only">Previous</span>
            <i class="fas fa-chevron-left fa-lg"></i>
        </a>
        <a href="#" aria-current="page" tabindex="-1" class="bg-blue rounded text-light relative inline-flex justify-center items-center h-8 w-8"> 1 </a>
        <a href="#" class="relative inline-flex justify-center items-center h-8 w-8 hover:text-pink focus:outline-blue"> 2 </a>
        <a href="#" class="relative inline-flex justify-center items-center h-8 w-8 hover:text-pink focus:outline-blue"> 3 </a>
        <span class="relative inline-flex justify-center items-center h-8 w-8"> ... </span>
        <a href="#" class="relative inline-flex justify-center items-center h-8 w-8 hover:text-pink focus:outline-blue"> 8 </a>
        <a href="#" class="relative inline-flex justify-center items-center h-8 w-8 hover:text-pink focus:outline-blue"> 9 </a>
        <a href="#" class="relative inline-flex justify-center items-center h-8 w-8 hover:text-pink focus:outline-blue"> 10 </a>
        <a href="#" class="relative inline-flex justify-center items-center h-8 w-8 hover:text-pink focus:outline-blue">
            <span class="sr-only">Next</span>
            <i class="fas fa-chevron-right fa-lg"></i>
        </a>
    </nav>
</div>