How do i make 'useState' transition smoother using Tailwind CSS

Question

I would like to make the transition smoother when selecting states between the left arrow & right arrow.

App.js

import React from "react";
import { useState } from "react";
import { GoArrowLeft, GoArrowRight } from "react-icons/go";

const ExampleMenu = () => {
  const [showtab, setTab] = useState(false);
  const handleTab = () => {
    setTab(!showtab);
  };
  return (
    <div className='flex justify-between text-white items-center bg-slate-800 mx-auto h-24'>
        <h3 className='md:text-3xl z-10 pl-4 w-full sm:text-xl text-slate-300 font-bold '>LOGO</h3>
        <div onClick={handleTab} className='hidden md:block animate-pulse pr-4'>
          {!showtab ? <GoArrowLeft size={40}/> : <GoArrowRight size={40}/>}
        </div>
        <div onClick={handleTab}>
          {!showtab ? <class className='hidden' /> : 
        <ul className='hidden md:flex p-4 space-x-2'>
            <li>Home</li>
            <li>About</li>
            <li>Contact</li>
        </ul>}
        </div>
      </div>
  );
};

export default ExampleMenu;

Live Example - Tailwind isn't working as it should on here, but if you c+p the code into VSC you'll see it better.

When the left arrow is clicked, the menu will open slower & smoother, same for the right arrow. That is the goal i am trying to accomplish. Thank you in advance!

Dependencies:

    npm install react-icons 
    npm install -D tailwindcss postcss autoprefixer
    npx tailwindcss init -p

Tailwind.config.js

module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Answer 1

I recommend using React Transition Group since they make react transitions much easier, I've also made a sample here

import { CSSTransition } from "react-transition-group";

    ...
  return (
       ...

      <CSSTransition
        in={showtab}
        timeout={300}
        classNames="tab"
        unmountOnExit
      >
        <ul className="md:flex p-4 space-x-2">
          <li>Home</li>
          <li>About</li>
          <li>Contact</li>
        </ul>
      </CSSTransition>
    </div>
  );
    ...