React and tailwind with some basic animation

Hi Hsienz, great job on this project!

If I was going to set a dynamic className in React I would employ the useState hook. When the state should change (like onClick) set the state to the desired class.

import { useState } from 'react';

function MyComponent() {
  const [className, setClassName] = useState('initial');

  const handleClick = () => {
    setClassName(prevClassName => prevClassName === 'initial' ? 'changed' : 'initial');
  }

  return (
    <div>
      <div className={className}>This is the div whose className will change</div>
      <button onClick={handleClick}>Change className</button>
    </div>
  );
}

Hope you found this helpful!

• Let's connect on LinkedIn! - @Eileenpk