Tailwind CSS and React Transitions in Next.js

Enhance the user experience in your Next.js and React app with dynamic and visually appealing transitions between styles using Tailwind CSS. Follow these simple steps to add flair to your buttons and other elements. Check out these examples to see different ways you can implement transitions in your app.

Link to the repo

"use client";

const ButtonB = () => {
  return (
    <button
      className="bg-red-500 text-white font-bold rounded-full w-32 h-8 transition duration-250 transform"
      onClick={(e) => {
        let button = e.target as HTMLButtonElement;

        if (button.classList.contains("bg-red-600")) {
          button.classList.remove("bg-red-600", "scale-150");
        } else {
          button.classList.add("bg-red-600", "scale-150");
        }
      }}
    >
      Click me!
    </button>
  );
};

export default ButtonB;