Tailwind CSS React Pagination

Use responsive pagination component with helper examples for buttons, arrows, previous & next pages. Use pagination in tables or with long content.

Basic example

Use the pagination utility classes to indicate a series of content for your website.

        
            
      import React from 'react';

      export default function App() {
        return (
          <nav aria-label="Page navigation example">
            <ul className="list-style-none flex">
                <li>
                    <a
                        className="relative block rounded bg-transparent px-3 py-1.5 text-sm text-neutral-600 transition-all duration-300 hover:bg-neutral-100 dark:text-white dark:hover:bg-neutral-700 dark:hover:text-white"
                        href="#">Previous</a>
                </li>
                <li>
                    <a
                        className="relative block rounded bg-transparent px-3 py-1.5 text-sm text-neutral-600 transition-all duration-300 hover:bg-neutral-100 dark:text-white dark:hover:bg-neutral-700 dark:hover:text-white"
                        href="#">1</a>
                </li>
                <li aria-current="page">
                    <a
                        className="relative block rounded bg-transparent px-3 py-1.5 text-sm text-neutral-600 transition-all duration-300 hover:bg-neutral-100 dark:text-white dark:hover:bg-neutral-700 dark:hover:text-white"
                        href="#">2</a>
                </li>
                <li>
                    <a
                        className="relative block rounded bg-transparent px-3 py-1.5 text-sm text-neutral-600 transition-all duration-300 hover:bg-neutral-100 dark:text-white dark:hover:bg-neutral-700 dark:hover:text-white"
                        href="#">3</a>
                </li>
                <li>
                    <a
                        className="relative block rounded bg-transparent px-3 py-1.5 text-sm text-neutral-600 transition-all duration-300 hover:bg-neutral-100 dark:text-white dark:hover:bg-neutral-700 dark:hover:text-white"
                        href="#">Next</a>
                </li>
            </ul>
        </nav>
        );
      }

Hey there 👋 we're excited about TW Elements for React and want to see it grow! If you enjoy it, help the project grow by sharing it with your peers. Every share counts, thank you!

Icons

The following example of a pagination component shows how the previous and next pages can be displayed using SVG icons instead.

        
            
      import React from 'react';

      export default function App() {
        return (
          <nav aria-label="Page navigation example">
            <ul className="list-style-none flex">
                <li>
                    <a
                        className="relative block rounded bg-transparent px-3 py-1.5 text-sm text-neutral-600 transition-all duration-300 hover:bg-neutral-100 dark:text-white dark:hover:bg-neutral-700 dark:hover:text-white"
                        href="#"
                        aria-label="Previous">
                        <span aria-hidden="true">&laquo;</span>
                    </a>
                </li>
                <li>
                    <a
                        className="relative block rounded bg-transparent px-3 py-1.5 text-sm text-neutral-600 transition-all duration-300 hover:bg-neutral-100 dark:text-white dark:hover:bg-neutral-700 dark:hover:text-white"
                        href="#">1</a>
                </li>
                <li aria-current="page">
                    <a
                        className="relative block rounded bg-transparent px-3 py-1.5 text-sm text-neutral-600 transition-all duration-300 hover:bg-neutral-100 dark:text-white dark:hover:bg-neutral-700 dark:hover:text-white"
                        href="#">2</a>
                </li>
                <li>
                    <a
                        className="relative block rounded bg-transparent px-3 py-1.5 text-sm text-neutral-600 transition-all duration-300 hover:bg-neutral-100 dark:text-white dark:hover:bg-neutral-700 dark:hover:text-white"
                        href="#">3</a>
                </li>
                <li>
                    <a
                        className="relative block rounded bg-transparent px-3 py-1.5 text-sm text-neutral-600 transition-all duration-300 hover:bg-neutral-100 dark:text-white dark:hover:bg-neutral-700 dark:hover:text-white"
                        href="#"
                        aria-label="Next"><span aria-hidden="true">&raquo;</span>
                    </a>
                </li>
            </ul>
        </nav>
        );
      }

Disabled and active states

Use the following styles to indicate a disabled adn active states of pagination.

        
            
      import React from 'react';

      export default function App() {
        return (
          <nav aria-label="Page navigation example">
            <ul className="list-style-none flex">
                <li>
                    <a
                        className="pointer-events-none relative block rounded bg-transparent px-3 py-1.5 text-sm text-neutral-500 transition-all duration-300 dark:text-neutral-400">Previous</a>
                </li>
                <li>
                    <a
                        className="relative block rounded bg-transparent px-3 py-1.5 text-sm text-neutral-600 transition-all duration-300 hover:bg-neutral-100  dark:text-white dark:hover:bg-neutral-700 dark:hover:text-white"
                        href="#!">1</a>
                </li>
                <li aria-current="page">
                    <a
                        className="relative block rounded bg-primary-100 px-3 py-1.5 text-sm font-medium text-primary-700 transition-all duration-300"
                        href="#!">2
                        <span
                            className="absolute -m-px h-px w-px overflow-hidden whitespace-nowrap border-0 p-0 [clip:rect(0,0,0,0)]">(current)</span>
                    </a>
                </li>
                <li>
                    <a
                        className="relative block rounded bg-transparent px-3 py-1.5 text-sm text-neutral-600 transition-all duration-300 hover:bg-neutral-100 dark:text-white dark:hover:bg-neutral-700 dark:hover:text-white"
                        href="#!">3</a>
                </li>
                <li>
                    <a
                        className="relative block rounded bg-transparent px-3 py-1.5 text-sm text-neutral-600 transition-all duration-300 hover:bg-neutral-100 dark:text-white dark:hover:bg-neutral-700 dark:hover:text-white"
                        href="#!">Next</a>
                </li>
            </ul>
        </nav>
        );
      }

Alignment

Change the alignment of pagination components with flexbox utilities. For example, with .justify-end:

        
            
      import React from 'react';

      export default function App() {
        return (
          <nav aria-label="Page navigation example">
            <ul className="list-style-none flex">
                <li>
                    <a
                        className="pointer-events-none relative block rounded bg-transparent px-3 py-1.5 text-sm text-neutral-500 transition-all duration-300 dark:text-neutral-400">Previous</a>
                </li>
                <li>
                    <a
                        className="relative block rounded bg-transparent px-3 py-1.5 text-sm text-neutral-600 transition-all duration-300 hover:bg-neutral-100  dark:text-white dark:hover:bg-neutral-700 dark:hover:text-white"
                        href="#!">1</a>
                </li>
                <li aria-current="page">
                    <a
                        className="relative block rounded bg-primary-100 px-3 py-1.5 text-sm font-medium text-primary-700 transition-all duration-300"
                        href="#!">2
                        <span
                            className="absolute -m-px h-px w-px overflow-hidden whitespace-nowrap border-0 p-0 [clip:rect(0,0,0,0)]">(current)</span>
                    </a>
                </li>
                <li>
                    <a
                        className="relative block rounded bg-transparent px-3 py-1.5 text-sm text-neutral-600 transition-all duration-300 hover:bg-neutral-100 dark:text-white dark:hover:bg-neutral-700 dark:hover:text-white"
                        href="#!">3</a>
                </li>
                <li>
                    <a
                        className="relative block rounded bg-transparent px-3 py-1.5 text-sm text-neutral-600 transition-all duration-300 hover:bg-neutral-100 dark:text-white dark:hover:bg-neutral-700 dark:hover:text-white"
                        href="#!">Next</a>
                </li>
            </ul>
        </nav>
        );
      }

Sizing

Pagination allows you to manipulate its proportions by changing text size and spacing.

        
            
      import React from 'react';

      export default function App() {
        return (
          <div>
            <nav aria-label="Page navigation example">

              <ul className="list-style-none flex">

                  <li>
                      <a
                          className="pointer-events-none relative block rounded bg-transparent px-5 py-3 text-lg text-neutral-500 transition-all duration-300 dark:text-neutral-400">Previous</a>
                  </li>

                  <li>
                      <a
                          className="relative block rounded bg-transparent px-5 py-3 text-lg text-neutral-600 transition-all duration-300 hover:bg-neutral-100  dark:text-white dark:hover:bg-neutral-700 dark:hover:text-white"
                          href="#!">1</a>
                  </li>

                  <li aria-current="page">
                      <a
                          className="relative block rounded bg-primary-100 px-5 py-3 text-lg font-medium text-primary-700 transition-all duration-300"
                          href="#!">2

                          <span
                              className="absolute -m-px h-px w-px overflow-hidden whitespace-nowrap border-0 p-0 [clip:rect(0,0,0,0)]">(current)</span>
                      </a>
                  </li>

                  <li>
                      <a
                          className="relative block rounded bg-transparent px-5 py-3 text-lg text-neutral-600 transition-all duration-300 hover:bg-neutral-100 dark:text-white dark:hover:bg-neutral-700 dark:hover:text-white"
                          href="#!">3</a>
                  </li>

                  <li>
                      <a
                          className="relative block rounded bg-transparent px-5 py-3 text-lg text-neutral-600 transition-all duration-300 hover:bg-neutral-100 dark:text-white dark:hover:bg-neutral-700 dark:hover:text-white"
                          href="#!">Next</a>
                  </li>
              </ul>
          </nav>
          <nav aria-label="Page navigation example" className='mt-5'>

              <ul className="list-style-none flex">

                  <li>
                      <a
                          className="pointer-events-none relative block rounded bg-transparent px-2 py-1 text-sm text-neutral-500 transition-all duration-300 dark:text-neutral-400">Previous</a>
                  </li>

                  <li>
                      <a
                          className="relative block rounded bg-transparent px-2 py-1 text-sm text-neutral-600 transition-all duration-300 hover:bg-neutral-100  dark:text-white dark:hover:bg-neutral-700 dark:hover:text-white"
                          href="#!">1</a>
                  </li>

                  <li aria-current="page">
                      <a
                          className="relative block rounded bg-primary-100 px-2 py-1 text-sm font-medium text-primary-700 transition-all duration-300"
                          href="#!">2

                          <span
                              className="absolute -m-px h-px w-px overflow-hidden whitespace-nowrap border-0 p-0 [clip:rect(0,0,0,0)]">(current)</span>
                      </a>
                  </li>

                  <li>
                      <a
                          className="relative block rounded bg-transparent px-2 py-1 text-sm text-neutral-600 transition-all duration-300 hover:bg-neutral-100 dark:text-white dark:hover:bg-neutral-700 dark:hover:text-white"
                          href="#!">3</a>
                  </li>

                  <li>
                      <a
                          className="relative block rounded bg-transparent px-2 py-1 text-sm text-neutral-600 transition-all duration-300 hover:bg-neutral-100 dark:text-white dark:hover:bg-neutral-700 dark:hover:text-white"
                          href="#!">Next</a>
                  </li>
              </ul>
          </nav>
          </div>
        );
      }

Shape

Use .rounded-full class to change the shape to a circle.

        
            
      import React from 'react';

      export default function App() {
        return (
          <nav aria-label="Page navigation example">
            <ul className="list-style-none flex">
                <li>
                    <a
                        className="pointer-events-none relative block rounded-full bg-transparent px-3 py-1.5 text-sm text-neutral-500 transition-all duration-300 dark:text-neutral-400">Previous</a>
                </li>
                <li>
                    <a
                        className="relative block rounded-full bg-transparent px-3 py-1.5 text-sm text-neutral-600 transition-all duration-300 hover:bg-neutral-100  dark:text-white dark:hover:bg-neutral-700 dark:hover:text-white"
                        href="#!">1</a>
                </li>
                <li aria-current="page">
                    <a
                        className="relative block rounded-full bg-primary-100 px-3 py-1.5 text-sm font-medium text-primary-700 transition-all duration-300"
                        href="#!">2
                        <span
                            className="absolute -m-px h-px w-px overflow-hidden whitespace-nowrap border-0 p-0 [clip:rect(0,0,0,0)]">(current)</span>
                    </a>
                </li>
                <li>
                    <a
                        className="relative block rounded-full bg-transparent px-3 py-1.5 text-sm text-neutral-600 transition-all duration-300 hover:bg-neutral-100 dark:text-white dark:hover:bg-neutral-700 dark:hover:text-white"
                        href="#!">3</a>
                </li>
                <li>
                    <a
                        className="relative block rounded-full bg-transparent px-3 py-1.5 text-sm text-neutral-600 transition-all duration-300 hover:bg-neutral-100 dark:text-white dark:hover:bg-neutral-700 dark:hover:text-white"
                        href="#!">Next</a>
                </li>
            </ul>
        </nav>
        );
      }

Color options

You can use each color from our color palette within a pagination.

        
            
      import React from 'react';

      export default function App() {
        return (
          <div>
            <nav aria-label="Page navigation example">
              <ul className="list-style-none mb-6 flex">
                  <li>
                      <a
                          className="pointer-events-none relative block rounded bg-transparent px-3 py-1.5 text-sm text-neutral-500 transition-all duration-300 dark:text-neutral-400">Previous</a>
                  </li>
                  <li>
                      <a
                          className="relative block rounded bg-transparent px-3 py-1.5 text-sm text-neutral-600 transition-all duration-300 hover:bg-neutral-100  dark:text-white dark:hover:bg-neutral-700 dark:hover:text-white"
                          href="#!">1</a>
                  </li>
                  <li aria-current="page">
                      <a
                          className="relative block rounded bg-primary-100 px-3 py-1.5 text-sm font-medium text-primary-700 transition-all duration-300"
                          href="#!">2
                          <span
                              className="absolute -m-px h-px w-px overflow-hidden whitespace-nowrap border-0 p-0 [clip:rect(0,0,0,0)]">(current)</span>
                      </a>
                  </li>
                  <li>
                      <a
                          className="relative block rounded bg-transparent px-3 py-1.5 text-sm text-neutral-600 transition-all duration-300 hover:bg-neutral-100 dark:text-white dark:hover:bg-neutral-700 dark:hover:text-white"
                          href="#!">3</a>
                  </li>
                  <li>
                      <a
                          className="relative block rounded bg-transparent px-3 py-1.5 text-sm text-neutral-600 transition-all duration-300 hover:bg-neutral-100 dark:text-white dark:hover:bg-neutral-700 dark:hover:text-white"
                          href="#!">Next</a>
                  </li>
              </ul>
          </nav>

          <nav aria-label="Page navigation example">
              <ul className="list-style-none mb-6 flex">
                  <li>
                      <a
                          className="pointer-events-none relative block rounded bg-transparent px-3 py-1.5 text-sm text-neutral-500 transition-all duration-300 dark:text-neutral-400">Previous</a>
                  </li>
                  <li>
                      <a
                          className="relative block rounded bg-transparent px-3 py-1.5 text-sm text-neutral-600 transition-all duration-300 hover:bg-neutral-100  dark:text-white dark:hover:bg-neutral-700 dark:hover:text-white"
                          href="#!">1</a>
                  </li>
                  <li aria-current="page">
                      <a
                          className="relative block rounded bg-secondary-100 px-3 py-1.5 text-sm font-medium text-secondary-800 transition-all duration-300"
                          href="#!">2
                          <span
                              className="absolute -m-px h-px w-px overflow-hidden whitespace-nowrap border-0 p-0 [clip:rect(0,0,0,0)]">(current)</span>
                      </a>
                  </li>
                  <li>
                      <a
                          className="relative block rounded bg-transparent px-3 py-1.5 text-sm text-neutral-600 transition-all duration-300 hover:bg-neutral-100 dark:text-white dark:hover:bg-neutral-700 dark:hover:text-white"
                          href="#!">3</a>
                  </li>
                  <li>
                      <a
                          className="relative block rounded bg-transparent px-3 py-1.5 text-sm text-neutral-600 transition-all duration-300 hover:bg-neutral-100 dark:text-white dark:hover:bg-neutral-700 dark:hover:text-white"
                          href="#!">Next</a>
                  </li>
              </ul>
          </nav>

          <nav aria-label="Page navigation example">
              <ul className="list-style-none mb-6 flex">
                  <li>
                      <a
                          className="pointer-events-none relative block rounded bg-transparent px-3 py-1.5 text-sm text-neutral-500 transition-all duration-300 dark:text-neutral-400">Previous</a>
                  </li>
                  <li>
                      <a
                          className="relative block rounded bg-transparent px-3 py-1.5 text-sm text-neutral-600 transition-all duration-300 hover:bg-neutral-100  dark:text-white dark:hover:bg-neutral-700 dark:hover:text-white"
                          href="#!">1</a>
                  </li>
                  <li aria-current="page">
                      <a
                          className="relative block rounded bg-success-100 px-3 py-1.5 text-sm font-medium text-success-700 transition-all duration-300"
                          href="#!">2
                          <span
                              className="absolute -m-px h-px w-px overflow-hidden whitespace-nowrap border-0 p-0 [clip:rect(0,0,0,0)]">(current)</span>
                      </a>
                  </li>
                  <li>
                      <a
                          className="relative block rounded bg-transparent px-3 py-1.5 text-sm text-neutral-600 transition-all duration-300 hover:bg-neutral-100 dark:text-white dark:hover:bg-neutral-700 dark:hover:text-white"
                          href="#!">3</a>
                  </li>
                  <li>
                      <a
                          className="relative block rounded bg-transparent px-3 py-1.5 text-sm text-neutral-600 transition-all duration-300 hover:bg-neutral-100 dark:text-white dark:hover:bg-neutral-700 dark:hover:text-white"
                          href="#!">Next</a>
                  </li>
              </ul>
          </nav>

          <nav aria-label="Page navigation example">
              <ul className="list-style-none mb-6 flex">
                  <li>
                      <a
                          className="pointer-events-none relative block rounded bg-transparent px-3 py-1.5 text-sm text-neutral-500 transition-all duration-300 dark:text-neutral-400">Previous</a>
                  </li>
                  <li>
                      <a
                          className="relative block rounded bg-transparent px-3 py-1.5 text-sm text-neutral-600 transition-all duration-300 hover:bg-neutral-100  dark:text-white dark:hover:bg-neutral-700 dark:hover:text-white"
                          href="#!">1</a>
                  </li>
                  <li aria-current="page">
                      <a
                          className="relative block rounded bg-danger-100 px-3 py-1.5 text-sm font-medium text-danger-700 transition-all duration-300"
                          href="#!">2
                          <span
                              className="absolute -m-px h-px w-px overflow-hidden whitespace-nowrap border-0 p-0 [clip:rect(0,0,0,0)]">(current)</span>
                      </a>
                  </li>
                  <li>
                      <a
                          className="relative block rounded bg-transparent px-3 py-1.5 text-sm text-neutral-600 transition-all duration-300 hover:bg-neutral-100 dark:text-white dark:hover:bg-neutral-700 dark:hover:text-white"
                          href="#!">3</a>
                  </li>
                  <li>
                      <a
                          className="relative block rounded bg-transparent px-3 py-1.5 text-sm text-neutral-600 transition-all duration-300 hover:bg-neutral-100 dark:text-white dark:hover:bg-neutral-700 dark:hover:text-white"
                          href="#!">Next</a>
                  </li>
              </ul>
          </nav>

          <nav aria-label="Page navigation example">
              <ul className="list-style-none mb-6 flex">
                  <li>
                      <a
                          className="pointer-events-none relative block rounded bg-transparent px-3 py-1.5 text-sm text-neutral-500 transition-all duration-300 dark:text-neutral-400">Previous</a>
                  </li>
                  <li>
                      <a
                          className="relative block rounded bg-transparent px-3 py-1.5 text-sm text-neutral-600 transition-all duration-300 hover:bg-neutral-100  dark:text-white dark:hover:bg-neutral-700 dark:hover:text-white"
                          href="#!">1</a>
                  </li>
                  <li aria-current="page">
                      <a
                          className="relative block rounded bg-warning-100 px-3 py-1.5 text-sm font-medium text-warning-700 transition-all duration-300"
                          href="#!">2
                          <span
                              className="absolute -m-px h-px w-px overflow-hidden whitespace-nowrap border-0 p-0 [clip:rect(0,0,0,0)]">(current)</span>
                      </a>
                  </li>
                  <li>
                      <a
                          className="relative block rounded bg-transparent px-3 py-1.5 text-sm text-neutral-600 transition-all duration-300 hover:bg-neutral-100 dark:text-white dark:hover:bg-neutral-700 dark:hover:text-white"
                          href="#!">3</a>
                  </li>
                  <li>
                      <a
                          className="relative block rounded bg-transparent px-3 py-1.5 text-sm text-neutral-600 transition-all duration-300 hover:bg-neutral-100 dark:text-white dark:hover:bg-neutral-700 dark:hover:text-white"
                          href="#!">Next</a>
                  </li>
              </ul>
          </nav>

          <nav aria-label="Page navigation example">
              <ul className="list-style-none mb-6 flex">
                  <li>
                      <a
                          className="pointer-events-none relative block rounded bg-transparent px-3 py-1.5 text-sm text-neutral-500 transition-all duration-300 dark:text-neutral-400">Previous</a>
                  </li>
                  <li>
                      <a
                          className="relative block rounded bg-transparent px-3 py-1.5 text-sm text-neutral-600 transition-all duration-300 hover:bg-neutral-100  dark:text-white dark:hover:bg-neutral-700 dark:hover:text-white"
                          href="#!">1</a>
                  </li>
                  <li aria-current="page">
                      <a
                          className="relative block rounded bg-info-100 px-3 py-1.5 text-sm font-medium text-info-700 transition-all duration-300"
                          href="#!">2
                          <span
                              className="absolute -m-px h-px w-px overflow-hidden whitespace-nowrap border-0 p-0 [clip:rect(0,0,0,0)]">(current)</span>
                      </a>
                  </li>
                  <li>
                      <a
                          className="relative block rounded bg-transparent px-3 py-1.5 text-sm text-neutral-600 transition-all duration-300 hover:bg-neutral-100 dark:text-white dark:hover:bg-neutral-700 dark:hover:text-white"
                          href="#!">3</a>
                  </li>
                  <li>
                      <a
                          className="relative block rounded bg-transparent px-3 py-1.5 text-sm text-neutral-600 transition-all duration-300 hover:bg-neutral-100 dark:text-white dark:hover:bg-neutral-700 dark:hover:text-white"
                          href="#!">Next</a>
                  </li>
              </ul>
          </nav>
          <nav aria-label="Page navigation example">
              <ul className="list-style-none mb-6 flex">
                  <li>
                      <a
                          className="pointer-events-none relative block rounded bg-transparent px-3 py-1.5 text-sm text-neutral-500 transition-all duration-300 dark:text-neutral-400">Previous</a>
                  </li>
                  <li>
                      <a
                          className="relative block rounded bg-transparent px-3 py-1.5 text-sm text-neutral-600 transition-all duration-300 hover:bg-neutral-100  dark:text-white dark:hover:bg-neutral-700 dark:hover:text-white"
                          href="#!">1</a>
                  </li>
                  <li aria-current="page">
                      <a
                          className="relative block rounded bg-neutral-50 px-3 py-1.5 text-sm font-medium text-neutral-600 transition-all duration-300"
                          href="#!">2
                          <span
                              className="absolute -m-px h-px w-px overflow-hidden whitespace-nowrap border-0 p-0 [clip:rect(0,0,0,0)]">(current)</span>
                      </a>
                  </li>
                  <li>
                      <a
                          className="relative block rounded bg-transparent px-3 py-1.5 text-sm text-neutral-600 transition-all duration-300 hover:bg-neutral-100 dark:text-white dark:hover:bg-neutral-700 dark:hover:text-white"
                          href="#!">3</a>
                  </li>
                  <li>
                      <a
                          className="relative block rounded bg-transparent px-3 py-1.5 text-sm text-neutral-600 transition-all duration-300 hover:bg-neutral-100 dark:text-white dark:hover:bg-neutral-700 dark:hover:text-white"
                          href="#!">Next</a>
                  </li>
              </ul>
          </nav>

          <nav aria-label="Page navigation example">
              <ul className="list-style-none flex">
                  <li>
                      <a
                          className="pointer-events-none relative block rounded bg-transparent px-3 py-1.5 text-sm text-neutral-500 transition-all duration-300 dark:text-neutral-400">Previous</a>
                  </li>
                  <li>
                      <a
                          className="relative block rounded bg-transparent px-3 py-1.5 text-sm text-neutral-600 transition-all duration-300 hover:bg-neutral-100  dark:text-white dark:hover:bg-neutral-700 dark:hover:text-white"
                          href="#!">1</a>
                  </li>
                  <li aria-current="page">
                      <a
                          className="relative block rounded bg-neutral-800 px-3 py-1.5 text-sm font-medium text-neutral-50 transition-all duration-300 dark:bg-neutral-900"
                          href="#!">2
                          <span
                              className="absolute -m-px h-px w-px overflow-hidden whitespace-nowrap border-0 p-0 [clip:rect(0,0,0,0)]">(current)</span>
                      </a>
                  </li>
                  <li>
                      <a
                          className="relative block rounded bg-transparent px-3 py-1.5 text-sm text-neutral-600 transition-all duration-300 hover:bg-neutral-100 dark:text-white dark:hover:bg-neutral-700 dark:hover:text-white"
                          href="#!">3</a>
                  </li>
                  <li>
                      <a
                          className="relative block rounded bg-transparent px-3 py-1.5 text-sm text-neutral-600 transition-all duration-300 hover:bg-neutral-100 dark:text-white dark:hover:bg-neutral-700 dark:hover:text-white"
                          href="#!">Next</a>
                  </li>
              </ul>
          </nav>
          </div>
        );
      }

If you are looking for more advanced options, try Bootstrap Pagination from MDBootstrap.

Pagination