Flipping number

export default function App() {
  return (
    <div>
      <div>42</div>
    </div>
  );
}

import clsx from 'clsx/lite';
export default function App() {
  return (
    <div className={clsx(
      'relative p-4 rounded-lg overflow-hidden inline-flex',
      'before:content-[""] before:absolute before:top-0 before:left-0 before:h-1/2 before:w-full before:bg-gradient-to-br before:from-[rgb(71,85,105)] before:to-[rgb(15,23,42)]',
    )}>
      <div className='text-[4rem] font-semibold text-white z-10 relative'>42</div>
    </div>
  );
}

import clsx from 'clsx/lite';

export default function App() {
  return (
     <div className={clsx(
      'relative p-4 rounded-lg overflow-hidden',
      'before:content-[""] before:absolute before:top-0 before:left-0 before:h-1/2 before:w-full before:bg-gradient-to-br before:from-[rgb(71,85,105)] before:to-[rgb(15,23,42)]',
      'after:content-[""] after:absolute after:bottom-0 after:left-0 after:h-1/2 after:w-full after:bg-gradient-to-br after:from-[rgb(100,116,139)] after:to-[rgb(15,23,42)]',
    )}>
      <div className='text-[4rem] font-semibold text-white z-10 relative'>42</div>
    </div>
  );
}

import clsx from 'clsx/lite';

export default function App() {
  return (
    <div className={clsx(
      'relative p-4 rounded-lg overflow-hidden',
      'before:content-[""] before:absolute before:top-0 before:left-0 before:h-1/2 before:w-full before:bg-gradient-to-br before:from-[rgb(71,85,105)] before:to-[rgb(15,23,42)]',
      'after:content-[""] after:absolute after:bottom-0 after:left-0 after:h-1/2 after:w-full after:bg-gradient-to-br after:from-[rgb(100,116,139)] after:to-[rgb(15,23,42)]',
      'before:border-b before:border-b-gray-[rgb(148,163,184)] before:-translate-y-[1px]'
    )}>
      <div className='text-[4rem] font-semibold text-white z-10 relative'>42</div>
    </div>
  );
}