Tailwind tab underline not complete filling

As you can see the underline is not complete filling the full length. I couldn't figure out why that is. This is made with tailwindCSS. Does anyone know where to find the full width for the deposit part? My code:

    function MyPage() {
      const [currentTab, setCurrentTab] = useState<string>("deposit");
      const [inputValue, setInputValue] = useState<string>("");
      const [outputValue, setOutputValue] = useState<string>();
      function classNames(...classes: string[]) {
        return classes.filter(Boolean).join(" ");
      } 

   
    return(
            <div className="text-sm font-medium text-center text-gray-500 border-b border-gray-200 dark:text-gray-400 dark:border-gray-700">
              <ul className="flex flex-wrap -mb-px">
                <li className="mr-2 ">
                  <button
                    onClick={() => {
                      setCurrentTab("withdrawal"),
                        currentTab != "withdrawal" ? setOutputValue("") : null;
                    }}
                    className={classNames(
                      currentTab == "withdrawal"
                        ? "text-gray-100 border-gray-100 inline-block p-4  border-b-2  rounded-t-lg active"
                        : "inline-block p-4 rounded-t-lg active transition-all ease-in duration-100"
                    )}
                  >
                    Withdrawal
                  </button>
                </li>
                <li className="mr-2 ">
                  <button
                    onClick={() => {
                      setCurrentTab("deposit"), currentTab != "deposit" ? setOutputValue("") : null;
                    }}
                    className={classNames(
                      currentTab == "deposit"
                        ? " text-gray-100 border-gray-100 inline-block p-4  border-b-2  rounded-t-lg active"
                        : "inline-block p-4 rounded-t-lg active transition-all ease-in duration-100 "
                    )}
                    aria-current="page"
                  >
                    Deposit
                  </button>
                </li>
              </ul>
            </div>
    )
    }