Tailwind CSS Timeline - React

Use our 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 example 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 Title Here.

    Lorem ipsum dolor sit, amet consectetur adipisicing elit. Corporis, quaerat sunt ipsam repellendus explicabo culpa eum odio molestiae unde, iste doloremque maxime. Eligendi libero animi sapiente quaerat inventore provident error.

  • Timeline Title Here.

    Lorem ipsum dolor sit, amet consectetur adipisicing elit. Corporis, quaerat sunt ipsam repellendus explicabo culpa eum odio molestiae unde, iste doloremque maxime. Eligendi libero animi sapiente quaerat inventore provident error.

  • Timeline Title Here.

    Lorem ipsum dolor sit, amet consectetur adipisicing elit. Corporis, quaerat sunt ipsam repellendus explicabo culpa eum odio molestiae unde, iste doloremque maxime. Eligendi libero animi sapiente quaerat inventore provident error.


Timeline with Icon

Use the example below for a Timeline component with icon.

  • Timeline Title Here.

    Lorem ipsum dolor sit, amet consectetur adipisicing elit. Corporis, quaerat sunt ipsam repellendus explicabo culpa eum odio molestiae unde, iste doloremque maxime. Eligendi libero animi sapiente quaerat inventore provident error.

  • Timeline Title Here.

    Lorem ipsum dolor sit, amet consectetur adipisicing elit. Corporis, quaerat sunt ipsam repellendus explicabo culpa eum odio molestiae unde, iste doloremque maxime. Eligendi libero animi sapiente quaerat inventore provident error.

  • Timeline Title Here.

    Lorem ipsum dolor sit, amet consectetur adipisicing elit. Corporis, quaerat sunt ipsam repellendus explicabo culpa eum odio molestiae unde, iste doloremque maxime. Eligendi libero animi sapiente quaerat inventore provident error.


Timeline with Avatar

Use the example below for a Timeline component with avatar.

  • user 1
    Timeline Title Here.

    Lorem ipsum dolor sit, amet consectetur adipisicing elit. Corporis, quaerat sunt ipsam repellendus explicabo culpa eum odio molestiae unde, iste doloremque maxime. Eligendi libero animi sapiente quaerat inventore provident error.

  • user 2
    Timeline Title Here.

    Lorem ipsum dolor sit, amet consectetur adipisicing elit. Corporis, quaerat sunt ipsam repellendus explicabo culpa eum odio molestiae unde, iste doloremque maxime. Eligendi libero animi sapiente quaerat inventore provident error.

  • user 3
    Timeline Title Here.

    Lorem ipsum dolor sit, amet consectetur adipisicing elit. Corporis, quaerat sunt ipsam repellendus explicabo culpa eum odio molestiae unde, iste doloremque maxime. Eligendi libero animi sapiente quaerat inventore provident error.


Activities Timeline

Use the example below for a Timeline component with activities.

  • $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

Edit this page on Github