ui-humix-lib/components/html/elements/pagination-examples/example-01.html

A simple package for implementinghumix design components in react-based or node.js based projects.

<div class="flex items-center justify-between w-full h-16 px-3 border-t border-neutral-200">
    <p class="pl-2 text-sm text-gray-700">Showing <span class="font-medium">1</span> to <span class="font-medium">10</span> of <span class="font-medium">89</span> results</p>
    <nav>
        <ul class="flex items-center text-sm leading-tight bg-white border border-neutral-200/70 rounded h-[34px] text-neutral-500">
            <li class="h-full">
                <a href="#" class="relative inline-flex items-center h-full px-3 rounded-l group hover:bg-blue-600 hover:text-white">
                    <span>Previous</span>
                </a>
            </li>
            <li class="hidden h-full md:block">
                <a href="#" class="relative inline-flex items-center h-full px-3 text-white bg-blue-600 group">
                    <span>1</span>
                </a>
            </li>
            <li class="hidden h-full md:block">
                <a href="#" class="relative inline-flex items-center h-full px-3 group hover:bg-blue-600 hover:text-white">
                    <span>2</span>
                </a>
            </li>
            <li class="hidden h-full md:block">
                <a href="#" class="relative inline-flex items-center h-full px-3 group hover:bg-blue-600 hover:text-white">
                    <span>3</span>
                </a>
            </li>
            <li class="hidden h-full md:block">
                <div class="relative inline-flex items-center h-full px-2.5 bg-neutral-100 group">
                    <span>...</span>
                </div>
            </li>
            <li class="hidden h-full md:block">
                <a href="#" class="relative inline-flex items-center h-full px-3 group hover:bg-blue-600 hover:text-white">
                    <span>6</span>
                </a>
            </li>
            <li class="hidden h-full md:block">
                <a href="#" class="relative inline-flex items-center h-full px-3 group hover:bg-blue-600 hover:text-white">
                    <span>7</span>
                </a>
            </li>
            <li class="hidden h-full md:block">
                <a href="#" class="relative inline-flex items-center h-full px-3 group hover:bg-blue-600 hover:text-white">
                    <span>8</span>
                </a>
            </li>
            <li class="h-full">
                <a href="#" class="relative inline-flex items-center h-full px-3 rounded-r group hover:bg-blue-600 hover:text-white">
                    <span>Next</span>
                </a>
            </li>
        </ul>
    </nav>
</div>