Drop shadow

import { Tooltip } from '@base-ui/react/tooltip';

// Elevation: higher things get larger, softer, fainter shadows. Tailwind's
// shadow-xs, shadow-lg, and shadow-2xl work as a card, menu, dialog scale.
export function DocumentCard() {
  return (
    // Two layers: a tight contact shadow plus a wide, faint ambient one.
    <article className='w-72 rounded-xl border bg-background p-5 shadow-[0_1px_2px_rgb(0_0_0/0.06),0_4px_12px_rgb(0_0_0/0.08)]'>
      <h3 className='font-semibold'>Q3 roadmap</h3>
      <p className='mt-1 text-sm text-muted-foreground'>Edited 2 hours ago</p>
      <Tooltip.Root>
        <Tooltip.Trigger className='mt-4 rounded-lg border px-3 py-1.5 text-sm hover:bg-muted'>
          Share
        </Tooltip.Trigger>
        <Tooltip.Portal>
          <Tooltip.Positioner sideOffset={10}>
            {/* drop-shadow follows the arrow's shape; box-shadow would skip it. */}
            <Tooltip.Popup className='relative rounded-md bg-background px-2.5 py-1.5 text-xs drop-shadow-[0_4px_8px_rgb(0_0_0/0.18)]'>
              <Tooltip.Arrow className='data-[side=bottom]:-top-1.5 data-[side=top]:-bottom-1.5 data-[side=top]:rotate-180'>
                <svg
                  width='12'
                  height='6'
                  viewBox='0 0 12 6'
                  className='block fill-background'
                >
                  <path d='M0 6 6 0l6 6z' />
                </svg>
              </Tooltip.Arrow>
              Anyone with the link can view
            </Tooltip.Popup>
          </Tooltip.Positioner>
        </Tooltip.Portal>
      </Tooltip.Root>
    </article>
  );
}