tailwind-ai/application_ui/navigation/vertical_navigation/with_badges.html

<nav aria-label="Sidebar" class="flex flex-1 flex-col">
    <ul role="list" class="-mx-2 space-y-1">
        <li>
            <!-- Current: "bg-gray-50 text-indigo-600", Default: "text-gray-700 hover:text-indigo-600 hover:bg-gray-50" -->
            <a
                href="#"
                class="group flex gap-x-3 rounded-md bg-gray-50 p-2 pl-3 text-sm/6 font-semibold text-indigo-600"
            >
                Dashboard
                <span
                    aria-hidden="true"
                    class="ml-auto w-9 min-w-max rounded-full bg-white px-2.5 py-0.5 text-center text-xs/5 font-medium whitespace-nowrap text-gray-600 ring-1 ring-gray-200 ring-inset"
                    >5</span
                >
            </a>
        </li>
        <li>
            <a
                href="#"
                class="group flex gap-x-3 rounded-md p-2 pl-3 text-sm/6 font-semibold text-gray-700 hover:bg-gray-50 hover:text-indigo-600"
            >
                Team
            </a>
        </li>
        <li>
            <a
                href="#"
                class="group flex gap-x-3 rounded-md p-2 pl-3 text-sm/6 font-semibold text-gray-700 hover:bg-gray-50 hover:text-indigo-600"
            >
                Projects
                <span
                    aria-hidden="true"
                    class="ml-auto w-9 min-w-max rounded-full bg-white px-2.5 py-0.5 text-center text-xs/5 font-medium whitespace-nowrap text-gray-600 ring-1 ring-gray-200 ring-inset"
                    >12</span
                >
            </a>
        </li>
        <li>
            <a
                href="#"
                class="group flex gap-x-3 rounded-md p-2 pl-3 text-sm/6 font-semibold text-gray-700 hover:bg-gray-50 hover:text-indigo-600"
            >
                Calendar
                <span
                    aria-hidden="true"
                    class="ml-auto w-9 min-w-max rounded-full bg-white px-2.5 py-0.5 text-center text-xs/5 font-medium whitespace-nowrap text-gray-600 ring-1 ring-gray-200 ring-inset"
                    >20+</span
                >
            </a>
        </li>
        <li>
            <a
                href="#"
                class="group flex gap-x-3 rounded-md p-2 pl-3 text-sm/6 font-semibold text-gray-700 hover:bg-gray-50 hover:text-indigo-600"
            >
                Documents
            </a>
        </li>
        <li>
            <a
                href="#"
                class="group flex gap-x-3 rounded-md p-2 pl-3 text-sm/6 font-semibold text-gray-700 hover:bg-gray-50 hover:text-indigo-600"
            >
                Reports
            </a>
        </li>
    </ul>
</nav>