Adding pagination to any web site can be a challenge. While I was working on a small project I needed to have a pagination. So pagination took my time and I want to share my knowledge that you could get something from here.
Eventually, we will built something like this in below picture.
First of all, where ever we want to put this pagination, we could place this pagination with absolute and insert-y, or x coordinates, and give direction with bottom, or top. important thing here is absolute keyword, we need to use this keyword to place in the web page. Otherwise, coordinates doesn’t help you at all. We put all the keyword here is in first div that carries all the belongings.
Secondly, numbers, we put numbers in second div, first div was carrying all the pagination box, we don’t use the first one any more, the second div is for our page numbers, and we give shape to our firs number and its box.
In above picture, we add al the materials. Like, bg-white, which means background white for our little page 1, and adding border with border ,and border-gray-300, gray is for color and 300 is making color dark or light , if you make 500, it will be darker. items-center is putting number in the middle of box, px-4, and py-2 is giving coordinates to make a box for page.
Last thing that we could add hover effect and focus effect to our page,
hover as you know, when we hover our mouse to page the color will change to red here, you add this effect with hover:border-red-500, and last thing that I want to add to this page number is focus effect, which means that when I click on the page the number of page color gets change. Like this in below picture.
I clicked the page 1 and the number and border color has got changed with
focus:border-red-500, focus:text-red-500
Resources
