ui-humix-lib/components/html/elements/pagination.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 divide-x rounded h-9 text-neutral-500 divide-neutral-200 border-neutral-200">
            <li class="h-full">
                <a href="#" class="relative inline-flex items-center h-full px-3 ml-0 rounded-l group hover:text-neutral-900">
                    <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-neutral-900 group bg-gray-50">
                    <span>1</span>
                    <span class="box-content absolute bottom-0 left-0 w-full h-px -mx-px translate-y-px border-l border-r bg-neutral-900 border-neutral-900"></span>
                </a>
            </li>
            <li class="hidden h-full md:block">
                <a href="#" class="relative inline-flex items-center h-full px-3 group hover:text-neutral-900">
                    <span>2</span>
                    <span class="box-content absolute bottom-0 w-0 h-px -mx-px duration-200 ease-out translate-y-px border-transparent bg-neutral-900 group-hover:border-l group-hover:border-r group-hover:border-neutral-900 left-1/2 group-hover:left-0 group-hover:w-full"></span>
                </a>
            </li>
            <li class="hidden h-full md:block">
                <a href="#" class="relative inline-flex items-center h-full px-3 group hover:text-neutral-900">
                    <span>3</span>
                    <span class="box-content absolute bottom-0 w-0 h-px -mx-px duration-200 ease-out translate-y-px border-transparent bg-neutral-900 group-hover:border-l group-hover:border-r group-hover:border-neutral-900 left-1/2 group-hover:left-0 group-hover:w-full"></span>
                </a>
            </li>
            <li class="hidden h-full md:block">
                <div class="relative inline-flex items-center h-full px-2.5 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:text-neutral-900">
                    <span>6</span>
                    <span class="box-content absolute bottom-0 w-0 h-px -mx-px duration-200 ease-out translate-y-px border-transparent bg-neutral-900 group-hover:border-l group-hover:border-r group-hover:border-neutral-900 left-1/2 group-hover:left-0 group-hover:w-full"></span>
                </a>
            </li>
            <li class="hidden h-full md:block">
                <a href="#" class="relative inline-flex items-center h-full px-3 group hover:text-neutral-900">
                    <span>7</span>
                    <span class="box-content absolute bottom-0 w-0 h-px -mx-px duration-200 ease-out translate-y-px border-transparent bg-neutral-900 group-hover:border-l group-hover:border-r group-hover:border-neutral-900 left-1/2 group-hover:left-0 group-hover:w-full"></span>
                </a>
            </li>
            <li class="hidden h-full md:block">
                <a href="#" class="relative inline-flex items-center h-full px-3 group hover:text-neutral-900">
                    <span>8</span>
                    <span class="box-content absolute bottom-0 w-0 h-px -mx-px duration-200 ease-out translate-y-px border-transparent bg-neutral-900 group-hover:border-l group-hover:border-r group-hover:border-neutral-900 left-1/2 group-hover:left-0 group-hover:w-full"></span>
                </a>
            </li>
            <li class="h-full">
                <a href="#" class="relative inline-flex items-center h-full px-3 rounded-r group hover:text-neutral-900">
                    <span>Next</span>
                </a>
            </li>
        </ul>
    </nav>
</div>