Slide-in animations in tw-animate-css

import { useState } from 'react';

// Full class names so Tailwind can find them
const tiles = [
  { label: 'from top (8)', cls: 'slide-in-from-top-8 bg-rose-500' },
  { label: 'from bottom (8)', cls: 'slide-in-from-bottom-8 bg-amber-500' },
  { label: 'from left (100%)', cls: 'slide-in-from-left bg-emerald-500' },
  { label: 'from right (12)', cls: 'slide-in-from-right-12 bg-sky-500' },
];

export default function App() {
  const [run, setRun] = useState(0);

  return (
    <div className='flex h-[380px] flex-col items-center justify-center gap-5 overflow-hidden bg-slate-50'>
      <div key={run} className='grid grid-cols-2 gap-4'>
        {tiles.map((t) => (
          <div
            key={t.label}
            className={`animate-in fade-in duration-700 ${t.cls} flex h-24 w-48 items-center justify-center rounded-lg font-medium text-white`}
          >
            {t.label}
          </div>
        ))}
      </div>
      <button
        onClick={() => setRun(run + 1)}
        className='rounded-md bg-slate-900 px-4 py-2 text-sm text-white'
      >
        Replay
      </button>
    </div>
  );
}