tw-animate-css Examples You Can Edit and Run

import { useState } from 'react';

export default function App() {
  const [show, setShow] = useState(true);

  return (
    <div className='flex h-[380px] flex-col items-center justify-center gap-6 bg-slate-100'>
      <button
        onClick={() => setShow(!show)}
        className='rounded-md bg-slate-900 px-4 py-2 text-sm font-medium text-white'
      >
        {show ? 'Hide panel' : 'Show panel'}
      </button>
      {/* data-state picks animate-in or animate-out */}
      <div
        data-state={show ? 'show' : 'hide'}
        className='data-[state=show]:animate-in data-[state=hide]:animate-out fade-in slide-in-from-top-8 fade-out slide-out-to-top-8 duration-500 fill-mode-forwards w-80 rounded-xl bg-white p-5 shadow-lg'
      >
        <p className='font-semibold text-slate-800'>Changes saved</p>
        <p className='mt-1 text-sm text-slate-500'>
          data-state is now <code className='font-mono'>{show ? 'show' : 'hide'}</code>.
        </p>
      </div>
    </div>
  );
}