Tailwind CSS Timeline - React

Use our React and Tailwind CSS Timeline component in your web projects. The Timeline can be used for displaying a list of events in order.

See below our beautiful Timeline component examples that you can use in your Tailwind CSS and React project. The example also comes in different styles and colors so you can adapt it easily to your needs.

Timeline Demo

Here's how to implement a simple Timeline component. It can be used to display a list of events in order on your website.

Timeline Title Here.

The key to more success is to have a lot of pillows. Put it this way, it took me twenty five years to get these plants, twenty five years of blood sweat and tears, and I'm never giving up, I'm just getting started. I'm up to something. Fan luv.

Timeline Title Here.

The key to more success is to have a lot of pillows. Put it this way, it took me twenty five years to get these plants, twenty five years of blood sweat and tears, and I'm never giving up, I'm just getting started. I'm up to something. Fan luv.

Timeline Title Here.

The key to more success is to have a lot of pillows. Put it this way, it took me twenty five years to get these plants, twenty five years of blood sweat and tears, and I'm never giving up, I'm just getting started. I'm up to something. Fan luv.
import { Timeline, Typography } from "@material-tailwind/react";

export function TimelineDemo() {
  return (
    <Timeline color="secondary" orientation="vertical">
      <Timeline.Item>
        <Timeline.Header>
          <Timeline.Separator />
          <Timeline.Icon className="h-3 w-3" />
        </Timeline.Header>
        <Timeline.Body className="-translate-y-1.5">
          <Typography color="default" className="font-bold">
            Timeline Title Here.
          </Typography>
          <Typography type="small" className="mt-2 text-foreground">
            The key to more success is to have a lot of pillows. Put it this
            way, it took me twenty five years to get these plants, twenty five
            years of blood sweat and tears, and I&apos;m never giving up,
            I&apos;m just getting started. I&apos;m up to something. Fan luv.
          </Typography>
        </Timeline.Body>
      </Timeline.Item>
      <Timeline.Item>
        <Timeline.Header>
          <Timeline.Separator />
          <Timeline.Icon className="h-3 w-3" />
        </Timeline.Header>
        <Timeline.Body className="-translate-y-1.5">
          <Typography color="default" className="font-bold">
            Timeline Title Here.
          </Typography>
          <Typography type="small" className="mt-2 text-foreground">
            The key to more success is to have a lot of pillows. Put it this
            way, it took me twenty five years to get these plants, twenty five
            years of blood sweat and tears, and I&apos;m never giving up,
            I&apos;m just getting started. I&apos;m up to something. Fan luv.
          </Typography>
        </Timeline.Body>
      </Timeline.Item>
      <Timeline.Item>
        <Timeline.Header>
          <Timeline.Icon className="h-3 w-3" />
        </Timeline.Header>
        <Timeline.Body className="-translate-y-1.5">
          <Typography color="default" className="font-bold">
            Timeline Title Here.
          </Typography>
          <Typography type="small" className="mt-2 text-foreground">
            The key to more success is to have a lot of pillows. Put it this
            way, it took me twenty five years to get these plants, twenty five
            years of blood sweat and tears, and I&apos;m never giving up,
            I&apos;m just getting started. I&apos;m up to something. Fan luv.
          </Typography>
        </Timeline.Body>
      </Timeline.Item>
    </Timeline>
  );
}
import { Timeline, Typography } from "@material-tailwind/react";

export function TimelineDemo() {
  return (
    <Timeline color="secondary" orientation="vertical">
      <Timeline.Item>
        <Timeline.Header>
          <Timeline.Separator />
          <Timeline.Icon className="h-3 w-3" />
        </Timeline.Header>
        <Timeline.Body className="-translate-y-1.5">
          <Typography color="default" className="font-bold">
            Timeline Title Here.
          </Typography>
          <Typography type="small" className="mt-2 text-foreground">
            The key to more success is to have a lot of pillows. Put it this
            way, it took me twenty five years to get these plants, twenty five
            years of blood sweat and tears, and I&apos;m never giving up,
            I&apos;m just getting started. I&apos;m up to something. Fan luv.
          </Typography>
        </Timeline.Body>
      </Timeline.Item>
      <Timeline.Item>
        <Timeline.Header>
          <Timeline.Separator />
          <Timeline.Icon className="h-3 w-3" />
        </Timeline.Header>
        <Timeline.Body className="-translate-y-1.5">
          <Typography color="default" className="font-bold">
            Timeline Title Here.
          </Typography>
          <Typography type="small" className="mt-2 text-foreground">
            The key to more success is to have a lot of pillows. Put it this
            way, it took me twenty five years to get these plants, twenty five
            years of blood sweat and tears, and I&apos;m never giving up,
            I&apos;m just getting started. I&apos;m up to something. Fan luv.
          </Typography>
        </Timeline.Body>
      </Timeline.Item>
      <Timeline.Item>
        <Timeline.Header>
          <Timeline.Icon className="h-3 w-3" />
        </Timeline.Header>
        <Timeline.Body className="-translate-y-1.5">
          <Typography color="default" className="font-bold">
            Timeline Title Here.
          </Typography>
          <Typography type="small" className="mt-2 text-foreground">
            The key to more success is to have a lot of pillows. Put it this
            way, it took me twenty five years to get these plants, twenty five
            years of blood sweat and tears, and I&apos;m never giving up,
            I&apos;m just getting started. I&apos;m up to something. Fan luv.
          </Typography>
        </Timeline.Body>
      </Timeline.Item>
    </Timeline>
  );
}

Timeline with Icon

You can also add an icon to the Timeline component. This can be done by using the Timeline.Icon component. In the example below we've used the Iconoir icons, but you can use any other icon library you prefer.

Timeline Title Here.

The key to more success is to have a lot of pillows. Put it this way, it took me twenty five years to get these plants, twenty five years of blood sweat and tears, and I'm never giving up, I'm just getting started. I'm up to something. Fan luv.

Timeline Title Here.

The key to more success is to have a lot of pillows. Put it this way, it took me twenty five years to get these plants, twenty five years of blood sweat and tears, and I'm never giving up, I'm just getting started. I'm up to something. Fan luv.

Timeline Title Here.

The key to more success is to have a lot of pillows. Put it this way, it took me twenty five years to get these plants, twenty five years of blood sweat and tears, and I'm never giving up, I'm just getting started. I'm up to something. Fan luv.
import { Timeline, Typography } from "@material-tailwind/react";
import { Bell, DollarCircle, HomeSimple } from "iconoir-react";

export function TimelineWithIcon() {
  return (
    <Timeline color="secondary" orientation="vertical">
      <Timeline.Item>
        <Timeline.Header>
          <Timeline.Separator />
          <Timeline.Icon>
            <HomeSimple className="h-5 w-5" />
          </Timeline.Icon>
        </Timeline.Header>
        <Timeline.Body className="-translate-y-1.5">
          <Typography color="default" className="font-bold">
            Timeline Title Here.
          </Typography>
          <Typography type="small" className="mt-2 text-foreground">
            The key to more success is to have a lot of pillows. Put it this
            way, it took me twenty five years to get these plants, twenty five
            years of blood sweat and tears, and I&apos;m never giving up,
            I&apos;m just getting started. I&apos;m up to something. Fan luv.
          </Typography>
        </Timeline.Body>
      </Timeline.Item>
      <Timeline.Item>
        <Timeline.Header>
          <Timeline.Separator />
          <Timeline.Icon>
            <Bell className="h-5 w-5" />
          </Timeline.Icon>
        </Timeline.Header>
        <Timeline.Body className="-translate-y-1.5">
          <Typography color="default" className="font-bold">
            Timeline Title Here.
          </Typography>
          <Typography type="small" className="mt-2 text-foreground">
            The key to more success is to have a lot of pillows. Put it this
            way, it took me twenty five years to get these plants, twenty five
            years of blood sweat and tears, and I&apos;m never giving up,
            I&apos;m just getting started. I&apos;m up to something. Fan luv.
          </Typography>
        </Timeline.Body>
      </Timeline.Item>
      <Timeline.Item>
        <Timeline.Header>
          <Timeline.Icon>
            <DollarCircle className="h-5 w-5" />
          </Timeline.Icon>
        </Timeline.Header>
        <Timeline.Body className="-translate-y-1.5">
          <Typography color="default" className="font-bold">
            Timeline Title Here.
          </Typography>
          <Typography type="small" className="mt-2 text-foreground">
            The key to more success is to have a lot of pillows. Put it this
            way, it took me twenty five years to get these plants, twenty five
            years of blood sweat and tears, and I&apos;m never giving up,
            I&apos;m just getting started. I&apos;m up to something. Fan luv.
          </Typography>
        </Timeline.Body>
      </Timeline.Item>
    </Timeline>
  );
}
import { Timeline, Typography } from "@material-tailwind/react";
import { Bell, DollarCircle, HomeSimple } from "iconoir-react";

export function TimelineWithIcon() {
  return (
    <Timeline color="secondary" orientation="vertical">
      <Timeline.Item>
        <Timeline.Header>
          <Timeline.Separator />
          <Timeline.Icon>
            <HomeSimple className="h-5 w-5" />
          </Timeline.Icon>
        </Timeline.Header>
        <Timeline.Body className="-translate-y-1.5">
          <Typography color="default" className="font-bold">
            Timeline Title Here.
          </Typography>
          <Typography type="small" className="mt-2 text-foreground">
            The key to more success is to have a lot of pillows. Put it this
            way, it took me twenty five years to get these plants, twenty five
            years of blood sweat and tears, and I&apos;m never giving up,
            I&apos;m just getting started. I&apos;m up to something. Fan luv.
          </Typography>
        </Timeline.Body>
      </Timeline.Item>
      <Timeline.Item>
        <Timeline.Header>
          <Timeline.Separator />
          <Timeline.Icon>
            <Bell className="h-5 w-5" />
          </Timeline.Icon>
        </Timeline.Header>
        <Timeline.Body className="-translate-y-1.5">
          <Typography color="default" className="font-bold">
            Timeline Title Here.
          </Typography>
          <Typography type="small" className="mt-2 text-foreground">
            The key to more success is to have a lot of pillows. Put it this
            way, it took me twenty five years to get these plants, twenty five
            years of blood sweat and tears, and I&apos;m never giving up,
            I&apos;m just getting started. I&apos;m up to something. Fan luv.
          </Typography>
        </Timeline.Body>
      </Timeline.Item>
      <Timeline.Item>
        <Timeline.Header>
          <Timeline.Icon>
            <DollarCircle className="h-5 w-5" />
          </Timeline.Icon>
        </Timeline.Header>
        <Timeline.Body className="-translate-y-1.5">
          <Typography color="default" className="font-bold">
            Timeline Title Here.
          </Typography>
          <Typography type="small" className="mt-2 text-foreground">
            The key to more success is to have a lot of pillows. Put it this
            way, it took me twenty five years to get these plants, twenty five
            years of blood sweat and tears, and I&apos;m never giving up,
            I&apos;m just getting started. I&apos;m up to something. Fan luv.
          </Typography>
        </Timeline.Body>
      </Timeline.Item>
    </Timeline>
  );
}

Timeline With Avatar

You can also add an avatar to the Timeline component. This can be done by using the Avatar and Timeline.Icon components. In the example below we've showcased a list of users with their profile picture, title, and some description.

Avatar

Timeline Title Here.

The key to more success is to have a lot of pillows. Put it this way, it took me twenty five years to get these plants, twenty five years of blood sweat and tears, and I'm never giving up, I'm just getting started. I'm up to something. Fan luv.
Avatar

Timeline Title Here.

The key to more success is to have a lot of pillows. Put it this way, it took me twenty five years to get these plants, twenty five years of blood sweat and tears, and I'm never giving up, I'm just getting started. I'm up to something. Fan luv.
Avatar

Timeline Title Here.

The key to more success is to have a lot of pillows. Put it this way, it took me twenty five years to get these plants, twenty five years of blood sweat and tears, and I'm never giving up, I'm just getting started. I'm up to something. Fan luv.
import { Timeline, Typography, Avatar } from "@material-tailwind/react";

export function TimelineWithAvatar() {
  return (
    <Timeline color="secondary" orientation="vertical">
      <Timeline.Item>
        <Timeline.Header>
          <Timeline.Separator />
          <Timeline.Icon className="p-0.5">
            <Avatar
              alt="Avatar"
              src="https://dub.sh/TdSBP0D"
              className="h-full w-full"
            />
          </Timeline.Icon>
        </Timeline.Header>
        <Timeline.Body className="-translate-y-1.5">
          <Typography color="default" className="font-bold">
            Timeline Title Here.
          </Typography>
          <Typography type="small" className="mt-2 text-foreground">
            The key to more success is to have a lot of pillows. Put it this
            way, it took me twenty five years to get these plants, twenty five
            years of blood sweat and tears, and I&apos;m never giving up,
            I&apos;m just getting started. I&apos;m up to something. Fan luv.
          </Typography>
        </Timeline.Body>
      </Timeline.Item>
      <Timeline.Item>
        <Timeline.Header>
          <Timeline.Separator />
          <Timeline.Icon className="p-0.5">
            <Avatar
              alt="Avatar"
              src="https://dub.sh/TdSBP0D"
              className="h-full w-full"
            />
          </Timeline.Icon>
        </Timeline.Header>
        <Timeline.Body className="-translate-y-1.5">
          <Typography color="default" className="font-bold">
            Timeline Title Here.
          </Typography>
          <Typography type="small" className="mt-2 text-foreground">
            The key to more success is to have a lot of pillows. Put it this
            way, it took me twenty five years to get these plants, twenty five
            years of blood sweat and tears, and I&apos;m never giving up,
            I&apos;m just getting started. I&apos;m up to something. Fan luv.
          </Typography>
        </Timeline.Body>
      </Timeline.Item>
      <Timeline.Item>
        <Timeline.Header>
          <Timeline.Icon className="p-0.5">
            <Avatar
              alt="Avatar"
              src="https://dub.sh/TdSBP0D"
              className="h-full w-full"
            />
          </Timeline.Icon>
        </Timeline.Header>
        <Timeline.Body className="-translate-y-1.5">
          <Typography color="default" className="font-bold">
            Timeline Title Here.
          </Typography>
          <Typography type="small" className="mt-2 text-foreground">
            The key to more success is to have a lot of pillows. Put it this
            way, it took me twenty five years to get these plants, twenty five
            years of blood sweat and tears, and I&apos;m never giving up,
            I&apos;m just getting started. I&apos;m up to something. Fan luv.
          </Typography>
        </Timeline.Body>
      </Timeline.Item>
    </Timeline>
  );
}
import { Timeline, Typography, Avatar } from "@material-tailwind/react";

export function TimelineWithAvatar() {
  return (
    <Timeline color="secondary" orientation="vertical">
      <Timeline.Item>
        <Timeline.Header>
          <Timeline.Separator />
          <Timeline.Icon className="p-0.5">
            <Avatar
              alt="Avatar"
              src="https://dub.sh/TdSBP0D"
              className="h-full w-full"
            />
          </Timeline.Icon>
        </Timeline.Header>
        <Timeline.Body className="-translate-y-1.5">
          <Typography color="default" className="font-bold">
            Timeline Title Here.
          </Typography>
          <Typography type="small" className="mt-2 text-foreground">
            The key to more success is to have a lot of pillows. Put it this
            way, it took me twenty five years to get these plants, twenty five
            years of blood sweat and tears, and I&apos;m never giving up,
            I&apos;m just getting started. I&apos;m up to something. Fan luv.
          </Typography>
        </Timeline.Body>
      </Timeline.Item>
      <Timeline.Item>
        <Timeline.Header>
          <Timeline.Separator />
          <Timeline.Icon className="p-0.5">
            <Avatar
              alt="Avatar"
              src="https://dub.sh/TdSBP0D"
              className="h-full w-full"
            />
          </Timeline.Icon>
        </Timeline.Header>
        <Timeline.Body className="-translate-y-1.5">
          <Typography color="default" className="font-bold">
            Timeline Title Here.
          </Typography>
          <Typography type="small" className="mt-2 text-foreground">
            The key to more success is to have a lot of pillows. Put it this
            way, it took me twenty five years to get these plants, twenty five
            years of blood sweat and tears, and I&apos;m never giving up,
            I&apos;m just getting started. I&apos;m up to something. Fan luv.
          </Typography>
        </Timeline.Body>
      </Timeline.Item>
      <Timeline.Item>
        <Timeline.Header>
          <Timeline.Icon className="p-0.5">
            <Avatar
              alt="Avatar"
              src="https://dub.sh/TdSBP0D"
              className="h-full w-full"
            />
          </Timeline.Icon>
        </Timeline.Header>
        <Timeline.Body className="-translate-y-1.5">
          <Typography color="default" className="font-bold">
            Timeline Title Here.
          </Typography>
          <Typography type="small" className="mt-2 text-foreground">
            The key to more success is to have a lot of pillows. Put it this
            way, it took me twenty five years to get these plants, twenty five
            years of blood sweat and tears, and I&apos;m never giving up,
            I&apos;m just getting started. I&apos;m up to something. Fan luv.
          </Typography>
        </Timeline.Body>
      </Timeline.Item>
    </Timeline>
  );
}

Activities Timeline

You can also use the Timeline component to display a list of activities in order. In the example below, we've showcased a list of activities with their respective icons.

In the example below we've used the Iconoir icons, but you can use any other icon library you prefer.

$2400, Design changes

22 DEC 7:20 PM

New order #1832412

21 DEC 11 PM

Payment completed for order #4395133

20 DEC 2:20 AM
import { Timeline, Typography, Card } from "@material-tailwind/react";
import { CreditCard, Bell, DollarCircle } from "iconoir-react";

export function ActivitiesTimeline() {
  return (
    <Timeline orientation="vertical" className="max-w-md space-y-6">
      <Timeline.Item className="w-full">
        <Card className="flex items-center gap-3 px-3 py-2">
          <Timeline.Header>
            <Timeline.Icon>
              <Bell className="h-4 w-4" />
            </Timeline.Icon>
          </Timeline.Header>
          <Timeline.Body className="!pb-0">
            <Typography color="default" className="font-bold">
              $2400, Design changes
            </Typography>
            <Typography type="small" className="mt-2 text-foreground">
              22 DEC 7:20 PM
            </Typography>
          </Timeline.Body>
        </Card>
      </Timeline.Item>
      <Timeline.Item className="w-full">
        <Card className="flex items-center gap-3 px-3 py-2">
          <Timeline.Header>
            <Timeline.Icon>
              <CreditCard className="h-4 w-4" />
            </Timeline.Icon>
          </Timeline.Header>
          <Timeline.Body className="!pb-0">
            <Typography color="default" className="font-bold">
              New order #1832412
            </Typography>
            <Typography type="small" className="mt-2 text-foreground">
              21 DEC 11 PM
            </Typography>
          </Timeline.Body>
        </Card>
      </Timeline.Item>
      <Timeline.Item className="w-full">
        <Card className="flex items-center gap-3 px-3 py-2">
          <Timeline.Header>
            <Timeline.Icon>
              <DollarCircle className="h-4 w-4" />
            </Timeline.Icon>
          </Timeline.Header>
          <Timeline.Body className="!pb-0">
            <Typography color="default" className="font-bold">
              Payment completed for order #4395133
            </Typography>
            <Typography type="small" className="mt-2 text-foreground">
              20 DEC 2:20 AM
            </Typography>
          </Timeline.Body>
        </Card>
      </Timeline.Item>
    </Timeline>
  );
}
import { Timeline, Typography, Card } from "@material-tailwind/react";
import { CreditCard, Bell, DollarCircle } from "iconoir-react";

export function ActivitiesTimeline() {
  return (
    <Timeline orientation="vertical" className="max-w-md space-y-6">
      <Timeline.Item className="w-full">
        <Card className="flex items-center gap-3 px-3 py-2">
          <Timeline.Header>
            <Timeline.Icon>
              <Bell className="h-4 w-4" />
            </Timeline.Icon>
          </Timeline.Header>
          <Timeline.Body className="!pb-0">
            <Typography color="default" className="font-bold">
              $2400, Design changes
            </Typography>
            <Typography type="small" className="mt-2 text-foreground">
              22 DEC 7:20 PM
            </Typography>
          </Timeline.Body>
        </Card>
      </Timeline.Item>
      <Timeline.Item className="w-full">
        <Card className="flex items-center gap-3 px-3 py-2">
          <Timeline.Header>
            <Timeline.Icon>
              <CreditCard className="h-4 w-4" />
            </Timeline.Icon>
          </Timeline.Header>
          <Timeline.Body className="!pb-0">
            <Typography color="default" className="font-bold">
              New order #1832412
            </Typography>
            <Typography type="small" className="mt-2 text-foreground">
              21 DEC 11 PM
            </Typography>
          </Timeline.Body>
        </Card>
      </Timeline.Item>
      <Timeline.Item className="w-full">
        <Card className="flex items-center gap-3 px-3 py-2">
          <Timeline.Header>
            <Timeline.Icon>
              <DollarCircle className="h-4 w-4" />
            </Timeline.Icon>
          </Timeline.Header>
          <Timeline.Body className="!pb-0">
            <Typography color="default" className="font-bold">
              Payment completed for order #4395133
            </Typography>
            <Typography type="small" className="mt-2 text-foreground">
              20 DEC 2:20 AM
            </Typography>
          </Timeline.Body>
        </Card>
      </Timeline.Item>
    </Timeline>
  );
}