You can get all the avatars and the count circle in line by just adding a flex and items-center to your ul:

<div class="col-span-1 h-40 border-gray-400 border bg-white">
    <div class="border-b border-gray-400 py-6 pl-4">
        <h3 class="text-xl font-brand font-bold text-gray-800 text-l">Your Teams</h3>
    </div>
    <div class="w-full border-b border-gray-400 flex p-5 last:border-b-0 items-center">
        <p class="text-gray-800 text-xl">Team 1</p>
        <ul class="ml-auto flex items-center">
            <li class="border-2 border-blue-400 rounded-full inline-block">
                <router-link to="" class="border-2 border-white rounded-full h-8 w-8 flex items-center justify-center overflow-hidden">
                    <img src="https://i.pravatar.cc/50" class="rounded-full"/>
                </router-link>
            </li>
            <li class="border-2 border-blue-400 rounded-full inline-block -ml-3">
                <router-link to="" class="border-2 border-white rounded-full h-8 w-8 flex items-center justify-center overflow-hidden">
                    <img src="https://i.pravatar.cc/50" class="rounded-full"/>
                </router-link>
            </li>
            <li class="border-2 border-blue-400 rounded-full inline-block -ml-3">
                <router-link to="" class="border-2 border-white rounded-full h-8 w-8 flex items-center justify-center overflow-hidden">
                    <img src="https://i.pravatar.cc/50" class="rounded-full"/>
                </router-link>
            </li>
            <li class="border-2 border-blue-400 rounded-full inline-block -ml-3">
                <router-link to="" class="border-2 border-white rounded-full h-8 w-8 flex items-center justify-center overflow-hidden">
                    <img src="https://i.pravatar.cc/50" class="rounded-full"/>
                </router-link>
            </li>
            <li class="border-blue-400 bg-blue-400 rounded-full inline-block -ml-3">
                <router-link to="" class="text-m rounded-full h-8 w-8 flex items-center justify-center overflow-hidden text-white">
                    +5
                </router-link>
            </li>
        </ul>
    </div>
</div>

Here’s a live demo.

I have the following HTML in my application,

<div class="col-span-1 h-40 border-gray-400 border bg-white">
                    <div class="border-b border-gray-400 py-6 pl-4">
                        <h3 class="text-xl font-brand font-bold text-gray-800 text-l">Your Teams</h3>
                    </div>
                    <div class="w-full border-b border-gray-400 flex p-5 last:border-b-0 items-center">
                        <p class="text-gray-800 text-xl">Team 1</p>
                        <ul class="ml-auto">
                            <li class="border-2 border-blue-400 rounded-full inline-block">
                                <router-link to="" class="border-2 border-white rounded-full h-8 w-8 flex items-center justify-center overflow-hidden">
                                    <img src="../assets/avatar.png" class="rounded-full"/>
                                </router-link>
                            </li>
                            <li class="border-2 border-blue-400 rounded-full inline-block -ml-3">
                                <router-link to="" class="border-2 border-white rounded-full h-8 w-8 flex items-center justify-center overflow-hidden">
                                    <img src="../assets/avatar.png" class="rounded-full"/>
                                </router-link>
                            </li>
                            <li class="border-2 border-blue-400 rounded-full inline-block -ml-3">
                                <router-link to="" class="border-2 border-white rounded-full h-8 w-8 flex items-center justify-center overflow-hidden">
                                    <img src="../assets/avatar.png" class="rounded-full"/>
                                </router-link>
                            </li>
                            <li class="border-2 border-blue-400 rounded-full inline-block -ml-3">
                                <router-link to="" class="border-2 border-white rounded-full h-8 w-8 flex items-center justify-center overflow-hidden">
                                    <img src="../assets/avatar.png" class="rounded-full"/>
                                </router-link>
                            </li>
                            <li class="border-blue-400 bg-blue-400 rounded-full inline-block -ml-3">
                                <router-link to="" class="text-m rounded-full h-8 w-8 flex items-center justify-center overflow-hidden text-white">
                                    +5
                                </router-link>
                            </li>
                        </ul>
                    </div>
                </div>

This should produce something similar to this,

However what I am getting is,

I cannot understand why the final list item is dropping as if it has a top margin?