モアーグラデーション

04月12日に公開

Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione dolorem eveniet doloribus quaerat sed, expedita ipsa provident fugiat libero facere, impedit magnam nobis temporibus enim dicta dolore obcaecati illum ab!

more-gradient.tsx

export default function MoreGradient() {
  return (
    <div className="h-[90%] w-60 border bg-card rounded-lg overflow-auto">
      {[...Array(5)].map((_, i) => (
        <p key={i} className="p-4 pb-0 text-sm text-muted-foreground">
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione
          dolorem eveniet doloribus quaerat sed, expedita ipsa provident fugiat
          libero facere, impedit magnam nobis temporibus enim dicta dolore
          obcaecati illum ab!
        </p>
      ))}
 
      <div className="h-10 bg-gradient-to-t pointer-events-none from-card sticky bottom-0 inset-x-0" />
    </div>
  );
}