Tip Calculator w/ Tailwind CSS & Animations

This was a fun one! My first real JavaScript project - I think it turned out great but my JavaScript is a mess. I used Tailwind CSS which complicated the class names a bit, so next time I'll use some Tailwind and some Vanilla CSS.

As far as my JavaScript goes - any suggestions on how to loop through resetting the buttons instead of doing it individually? There's no possible way this is the best solution:

function resetButtons() {
  tip5.classList.remove(
    "text-cyan-900",
    "bg-teal-400",
    "animate__animated",
    "animate__swing"
  );
  tip5.classList.add("bg-cyan-900", "text-white");
  tip10.classList.remove(
    "text-cyan-900",
    "bg-teal-400",
    "animate__animated",
    "animate__swing"
  );
  tip10.classList.add("bg-cyan-900", "text-white");
  tip15.classList.remove(
    "text-cyan-900",
    "bg-teal-400",
    "animate__animated",
    "animate__swing"
  );
  tip15.classList.add("bg-cyan-900", "text-white");
  tip25.classList.remove(
    "text-cyan-900",
    "bg-teal-400",
    "animate__animated",
    "animate__swing"
  );
  tip25.classList.add("bg-cyan-900", "text-white");
  tip50.classList.remove(
    "text-cyan-900",
    "bg-teal-400",
    "animate__animated",
    "animate__swing"
  );
  tip50.classList.add("bg-cyan-900", "text-white");
  tipCustom.classList.remove(
    "text-cyan-900",
    "bg-white",
    "border-2",
    "border-teal-400",
    "animate__animated",
    "animate__swing"
  );
  tipCustom.classList.add("bg-slate-100", "text-slate-500");
  reset.classList.remove(
    "text-cyan-900",
    "bg-teal-400",
    "cursor-pointer",
    "hover:bg-rose-300"
  );
  reset.classList.add("bg-cyan-800", "text-cyan-900");
}

function activateResetButton() {
  reset.classList.remove("bg-cyan-800", "text-cyan-900");
  reset.classList.add(
    "text-cyan-900",
    "bg-teal-400",
    "cursor-pointer",
    "hover:bg-rose-300"
  );
}