Pagination

<nav>
    <ul class="flex items-center gap-0.5 text-fg">
        <li>
            <a href="#" class="btn btn-sm btn-ghost btn-ghost-gray min-w-36px justify-center rd-md">
                Prev
            </a>
        </li>
        <li>
            <a href="#" class="btn btn-sm btn-ghost btn-ghost-gray min-w-36px justify-center rd-md">
                1
            </a>
        </li>
        <li>
            <a href="#" class="btn btn-sm btn-ghost btn-ghost-gray min-w-36px justify-center rd-md">
                2
            </a>
        </li>
        <li>
            <a href="#" class="btn btn-sm btn-ghost btn-ghost-gray min-w-36px justify-center rd-md">
                3
            </a>
        </li>
        <li>
            <a href="#" class="btn btn-sm btn-ghost btn-ghost-gray min-w-36px justify-center rd-md">
                Next
            </a>
        </li>
    </ul>
</nav>

<nav>
    <ul class="flex items-center gap-0.5 text-fg">
        <li>
            <a aria-label="Prev page" href="#" class="btn btn-sm btn-ghost btn-ghost-gray min-w-36px gap-x-1.5 justify-center rd-md">
                <span aria-hidden="true" class="flex i-ph-caret-left text-lg"></span>
                Prev
            </a>
        </li>
        <li>
            <a href="#" class="btn btn-sm btn-ghost btn-ghost-gray min-w-36px justify-center rd-md">
                1
            </a>
        </li>
        <li>
            <a href="#" class="btn btn-sm btn-ghost btn-ghost-gray min-w-36px justify-center rd-md">
                2
            </a>
        </li>
        <li>
            <a href="#" class="btn btn-sm btn-ghost btn-ghost-gray min-w-36px justify-center rd-md">
                3
            </a>
        </li>
        <li>
            <a aria-label="Next page" href="#" class="btn btn-sm btn-ghost btn-ghost-gray min-w-36px justify-center gap-x-1.5 rd-md">
                Next
                <span aria-hidden="true" class="flex i-ph-caret-right text-lg"></span>
            </a>
        </li>
    </ul>
</nav>

<nav>
    <ul class="flex items-center gap-0.5 text-fg">
        <li>
            <a aria-label="Prev page" aria-disabled="true" href="#" class="btn btn-sm btn-ghost btn-ghost-gray min-w-36px justify-center rd-md aria-disabled:cursor-not-allowed aria-disabled:op60 aria-disabled:hover:!bg-transparent">
                <span aria-hidden="true" class="flex i-ph-caret-left text-lg"></span>
            </a>
        </li>
        <li>
            <a href="#" class="bg-bg-muted btn btn-sm btn-ghost btn-ghost-gray min-w-36px justify-center rd-md">
                1
            </a>
        </li>
        <li>
            <a href="#" class="btn btn-sm btn-ghost btn-ghost-gray min-w-36px justify-center rd-md">
                2
            </a>
        </li>
        <li>
            <a href="#" class="btn btn-sm btn-ghost btn-ghost-gray min-w-36px justify-center rd-md">
                3
            </a>
        </li>
        <li>
            <a aria-label="Next page" href="#" class="btn btn-sm btn-ghost btn-ghost-gray min-w-36px justify-center rd-md aria-disabled:cursor-not-allowed aria-disabled:op60 aria-disabled:hover:!bg-transparent">
                <span aria-hidden="true" class="flex i-ph-caret-right text-lg"></span>
            </a>
        </li>
    </ul>
</nav>