Zenn
Open2

Next.js & Tailwind CSS Tips

Next.js
TypeScript
Tailwind CSS
YohYoh

footerを画面下部に固定する

layout.tsx
<body className="min-h-dvh">
    <main>
    {children}
    </main>
    <footer className="sticky top-full">Footer</footer>
</body>
YohYoh

Next.jsでタイムラインを実装する

実装例

サンプルコード

timeline.tsx
type TimelineItem = {
  id: number;
  title: string;
  date: string;
};

export const Timeline = () => {
  const timelineItems: TimelineItem[] = [
    { id: 0, title: "Content 1", date: "Jan 2024" },
    { id: 1, title: "Content 2", date: "Feb 2024" },
    { id: 2, title: "Content 3", date: "Mar 2024" },
  ];

  return (
    <div className="mx-auto max-w-[500px] p-10">
      <ol className="relative border-s">
        {timelineItems.map((item) => (
          <li className="space-y-10 ms-6" key={item.id}>
            <span className="absolute w-6 h-6 bg-muted-foreground rounded-full -start-3"></span>
            <h3 className="text-lg font-semibold">{item.title}</h3>
            <time className="text-sm  text-muted-foreground">{item.date}</time>
          </li>
        ))}
      </ol>
    </div>
  );
};