<div class="flex m-2"> <a class="rounded p-1 bg-yellow-500 hover:bg-white text-white hover:text-yellow-400 m-1" href="#"><ion-icon name="arrow-back-outline"></ion-icon></a> <a class="rounded p-1 bg-yellow-500 hover:bg-white text-white hover:text-yellow-400 m-1" href="#">1</a> <a class="rounded p-1 bg-yellow-500 hover:bg-white text-white hover:text-yellow-400 m-1" href="#">2</a> <a class="rounded p-1 bg-yellow-500 hover:bg-white text-white hover:text-yellow-400 m-1" href="#">3</a> <a class="rounded p-1 bg-yellow-500 hover:bg-white text-white hover:text-yellow-400 m-1" href="#">...</a> <a class="rounded p-1 bg-yellow-500 hover:bg-white text-white hover:text-yellow-400 m-1" href="#"><ion-icon name="arrow-forward-outline"></ion-icon></a> </div> <script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script> <script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>

<div class="flex flex-row m-2 shadow-xl rounded-2xl "> <a class="rounded p-1 hover:bg-black font-medium hover:rounded-full m-2 hover:text-white" href="#"><ion-icon name="arrow-back-outline"></ion-icon></a> <a class="rounded p-1 hover:bg-black font-medium hover:rounded-full m-2 hover:text-white" href="#">1</a> <a class="rounded p-1 hover:bg-black font-medium hover:rounded-full m-2 hover:text-white" href="#">2</a> <a class="rounded p-1 hover:bg-black font-medium hover:rounded-full m-2 hover:text-white" href="#">3</a> <a class="rounded p-1 hover:bg-black font-medium hover:rounded-full m-2 hover:text-white" href="#">...</a> <a class="rounded p-1 hover:bg-black font-medium hover:rounded-full m-2 hover:text-white" href="#"><ion-icon name="arrow-forward-outline"></ion-icon></a> </div> <script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script> <script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>

<div class="flex flex-row m-2 rounded-2xl "> <a class="rounded p-1 hover:bg-blue-500 font-medium hover:rounded-full m-2 hover:text-white shadow-lg border px-2 " href="#"><ion-icon name="arrow-back-outline"></ion-icon></a> <a class="rounded p-1 hover:bg-blue-500 font-medium hover:rounded-full m-2 hover:text-white shadow-lg border px-2 " href="#">1</a> <a class="rounded p-1 hover:bg-blue-500 font-medium hover:rounded-full m-2 hover:text-white shadow-lg border px-2 " href="#">2</a> <a class="rounded p-1 hover:bg-blue-500 font-medium hover:rounded-full m-2 hover:text-white shadow-lg border px-2 " href="#">3</a> <a class="rounded p-1 hover:bg-blue-500 font-medium hover:rounded-full m-2 hover:text-white shadow-lg border px-2 " href="#">...</a> <a class="rounded p-1 hover:bg-blue-500 font-medium hover:rounded-full m-2 hover:text-white shadow-lg border px-2 " href="#"><ion-icon name="arrow-forward-outline"></ion-icon></a> </div> <script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script> <script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>

<div class="flex flex-row m-2 rounded-2xl "> <a class="rounded-full hover:bg-blue-500 font-medium m-2 hover:text-white shadow-lg border px-2 " href="#"><ion-icon name="chevron-back-outline"></ion-icon></a> <a class="rounded-full hover:bg-blue-500 font-medium m-2 hover:text-white shadow-lg border px-2 " href="#">1</a> <a class="rounded-full hover:bg-blue-500 font-medium m-2 hover:text-white shadow-lg border px-2 " href="#">2</a> <a class="rounded-full hover:bg-blue-500 font-medium m-2 hover:text-white shadow-lg border px-2 " href="#">3</a> <a class="rounded-full hover:bg-blue-500 font-medium m-2 hover:text-white shadow-lg border px-2 " href="#">..</a> <a class="rounded-full hover:bg-blue-500 font-medium m-2 hover:text-white shadow-lg border px-2 " href="#"><ion-icon name="chevron-forward-outline"></ion-icon></a> </div> <script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script> <script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>

<div class="flex flex-row m-2 rounded-2xl "> <a class="rounded-full hover:bg-blue-500 font-medium m-2 hover:text-white shadow-lg border px-2 " href="#"><ion-icon name="arrow-back-circle-outline" class="text-lg"></ion-icon></a> <a class="rounded-full hover:bg-blue-500 font-medium m-2 hover:text-white shadow-lg border px-2 " href="#">1</a> <a class="rounded-full hover:bg-blue-500 font-medium m-2 hover:text-white shadow-lg border px-2 " href="#">2</a> <a class="rounded-full hover:bg-blue-500 font-medium m-2 hover:text-white shadow-lg border px-2 " href="#">3</a> <a class="rounded-full hover:bg-blue-500 font-medium m-2 hover:text-white shadow-lg border px-2 " href="#">..</a> <a class="rounded-full hover:bg-blue-500 font-medium m-2 hover:text-white shadow-lg border px-2 " href="#"><ion-icon name="arrow-forward-circle-outline" class="text-lg"></ion-icon></a> </div> <script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script> <script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>

<div class="flex flex-row m-2 rounded-2xl p-1 bg-gray-200"> <a class="rounded-full hover:bg-green-400 font-medium m-2 hover:text-white shadow-lg border px-2 " href="#"><ion-icon name="chevron-back-outline"></ion-icon></a> <a class="rounded-full hover:bg-green-400 font-medium m-2 hover:text-white shadow-lg border px-2 " href="#">1</a> <a class="rounded-full hover:bg-green-400 font-medium m-2 hover:text-white shadow-lg border px-2 " href="#">2</a> <a class="rounded-full hover:bg-green-400 font-medium m-2 hover:text-white shadow-lg border px-2 " href="#">3</a> <a class="rounded-full hover:bg-green-400 font-medium m-2 hover:text-white shadow-lg border px-2 " href="#">..</a> <a class="rounded-full hover:bg-green-400 font-medium m-2 hover:text-white shadow-lg border px-2 " href="#"><ion-icon name="chevron-forward-outline"></ion-icon></a> </div> <script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script> <script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>

<div class="flex flex-row m-2 rounded-2xl p-1 "> <a class=" hover:bg-green-500 font-medium m-1 hover:text-white shadow-lg border border-green-500 px-2 text-green-500 " href="#"><ion-icon name="chevron-back-outline"></ion-icon></a> <a class=" hover:bg-green-500 font-medium m-1 hover:text-white shadow-lg border border-green-500 px-2 text-green-500 " href="#">1</a> <a class=" hover:bg-green-500 font-medium m-1 hover:text-white shadow-lg border border-green-500 px-2 text-green-500 " href="#">2</a> <a class=" hover:bg-green-500 font-medium m-1 hover:text-white shadow-lg border border-green-500 px-2 text-green-500 " href="#">3</a> <a class=" hover:bg-green-500 font-medium m-1 hover:text-white shadow-lg border border-green-500 px-2 text-green-500 " href="#">..</a> <a class=" hover:bg-green-500 font-medium m-1 hover:text-white shadow-lg border border-green-500 px-2 text-green-500 " href="#"><ion-icon name="chevron-forward-outline"></ion-icon></a> </div> <script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script> <script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>

<div class="flex flex-row m-2 rounded-2xl p-1 "> <a class=" hover:bg-red-500 rounded-xl font-medium m-1 hover:text-white shadow-lg px-2 text-red-500 " href="#">Prev</a> <a class=" hover:bg-red-500 rounded-xl font-medium m-1 hover:text-white shadow-lg px-2 text-red-500 " href="#">1</a> <a class=" hover:bg-red-500 rounded-xl font-medium m-1 hover:text-white shadow-lg px-2 text-red-500 " href="#">2</a> <a class=" hover:bg-red-500 rounded-xl font-medium m-1 hover:text-white shadow-lg px-2 text-red-500 " href="#">3</a> <a class=" hover:bg-red-500 rounded-xl font-medium m-1 hover:text-white shadow-lg px-2 text-red-500 " href="#">..</a> <a class=" hover:bg-red-500 rounded-xl font-medium m-1 hover:text-white shadow-lg px-2 text-red-500 " href="#">Next</a> </div> <script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script> <script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>

<div class="flex flex-row m-2 rounded-2xl p-1 "> <a class=" hover:bg-cyan-500 border font-medium m-1 hover:text-white shadow-lg px-2 text-cyan-500 " href="#"><ion-icon name="arrow-undo-circle"></ion-icon></a> <a class=" hover:bg-cyan-500 border font-medium m-1 hover:text-white shadow-lg px-2 text-cyan-500 " href="#">1</a> <a class=" hover:bg-cyan-500 border font-medium m-1 hover:text-white shadow-lg px-2 text-cyan-500 " href="#">2</a> <a class=" hover:bg-cyan-500 border font-medium m-1 hover:text-white shadow-lg px-2 text-cyan-500 " href="#">3</a> <a class=" hover:bg-cyan-500 border font-medium m-1 hover:text-white shadow-lg px-2 text-cyan-500 " href="#">..</a> <a class=" hover:bg-cyan-500 border font-medium m-1 hover:text-white shadow-lg px-2 text-cyan-500 " href="#"><ion-icon name="arrow-redo-circle"></ion-icon></a> </div> <script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script> <script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>

<div class="flex flex-row m-2 p-1 "> <a class=" bg-cyan-500 border-r border-black font-medium text-white shadow-lg px-2 hover:bg-white hover:text-cyan-500 " href="#">Prev</a> <a class=" bg-cyan-500 border-r border-black font-medium text-white shadow-lg px-2 hover:bg-white hover:text-cyan-500 " href="#">1</a> <a class=" bg-cyan-500 border-r border-black font-medium text-white shadow-lg px-2 hover:bg-white hover:text-cyan-500 " href="#">2</a> <a class=" bg-cyan-500 border-r border-black font-medium text-white shadow-lg px-2 hover:bg-white hover:text-cyan-500 " href="#">3</a> <a class=" bg-cyan-500 border-r border-black font-medium text-white shadow-lg px-2 hover:bg-white hover:text-cyan-500 " href="#">..</a> <a class=" bg-cyan-500 font-medium text-white shadow-lg px-2 hover:bg-white hover:text-cyan-500 " href="#">Next</a> </div> <script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script> <script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>