Timeline

<Timeline>
  <TimelineItem>Item 1</TimelineItem>
  <TimelineItem>Item 2</TimelineItem>
  <TimelineItem>Item 3</TimelineItem>
</Timeline>

<WrapperVertical>
  <Timeline align="right">
    <TimelineItem>Item 1</TimelineItem>
    <TimelineItem>Item 2</TimelineItem>
    <TimelineItem>Item 3</TimelineItem>
  </Timeline>
  <Timeline align="left">
    <TimelineItem>Item 1</TimelineItem>
    <TimelineItem>Item 2</TimelineItem>
    <TimelineItem>Item 3</TimelineItem>
  </Timeline>
</WrapperVertical>

<Timeline>
  <TimelineItem
    dot={
      <div
        style={{
          height: '10px',
          width: '10px',
          backgroundColor: 'red',
          borderRadius: '50%',
        }}
      />
    }
  >{`item 1`}</TimelineItem>
  <TimelineItem>{`item 2`}</TimelineItem>
  <TimelineItem dot={<p>X</p>}>{`item 3`}</TimelineItem>
</Timeline>

<Timeline>
  <TimelineItem oppositeContent="Opposite content">Item 1</TimelineItem>
  <TimelineItem>Item 2</TimelineItem>
  <TimelineItem>Item 3</TimelineItem>
</Timeline>

<Timeline>
  <TimelineItem type="default">Item 1</TimelineItem>
  <TimelineItem type="primary">Item 2</TimelineItem>
  <TimelineItem type="success">Item 3</TimelineItem>
  <TimelineItem type="warning">Item 4</TimelineItem>
  <TimelineItem type="error">Item 5</TimelineItem>
  <TimelineItem type="info">Item 6</TimelineItem>
</Timeline>

<Timeline>
  <TimelineItem unique="YES">Item 1</TimelineItem>
  <TimelineItem unique={20}>Item 2</TimelineItem>
  <TimelineItem>Item 3</TimelineItem>
</Timeline>

<Timeline>
  <TimelineItem align="left">Item 1</TimelineItem>
  <TimelineItem align="left">Item 2</TimelineItem>
  <TimelineItem align="right">Item 3</TimelineItem>
</Timeline>