Tailkits

Tailwind Timeline Components

Explore Tailwind timeline components to improve UI development. Timelines visually represent sequences of events or steps, improving navigation and storytelling in your app.

Explore all
Popular products
Preline UI

Preline UI

Free

Open-source set of prebuilt UI components based on the utility-first Tailwind CSS.

Components

Oxbow UI HOT

Oxbow UI

Paid

220+ Free & Premium Tailwind, Alpine.js components

Creating timeline components with Tailwind CSS is both efficient and flexible, thanks to Tailwind’s utility-first approach. Whether you need a vertical or horizontal timeline, Tailwind provides the necessary utilities to build responsive and visually appealing designs. Below, I’ll guide you through various examples and best practices to create timeline components using Tailwind CSS.

1. Vertical Timeline

A vertical timeline is one of the most common and straightforward designs. Here's how you can create a basic vertical timeline:

HTML Structure
<div class="container mx-auto p-6">
  <div class="relative wrap overflow-hidden p-10 h-full">
    <!-- Vertical Line -->
    <div class="border-2 border-gray-200 h-full absolute left-1/2 transform -translate-x-1/2"></div>

    <!-- Timeline Item -->
    <div class="mb-8 flex justify-between items-center w-full">
      <!-- Left Empty Space -->
      <div class="order-1 w-5/12"></div>

      <!-- Circle Indicator -->
      <div class="z-20 flex items-center order-1 bg-blue-500 shadow-xl w-8 h-8 rounded-full">
        <h1 class="mx-auto text-white font-semibold text-lg">1</h1>
      </div>

      <!-- Content Box -->
      <div class="order-1 bg-gray-200 rounded-lg shadow-xl w-5/12 px-6 py-4">
        <h3 class="mb-1 font-bold text-gray-800 text-xl">Step One</h3>
        <p class="text-sm text-gray-700">Description for step one.</p>
      </div>
    </div>

    <!-- Repeat Timeline Items as Needed -->
    <!-- Example of an Alternating Item -->
    <div class="mb-8 flex justify-between flex-row-reverse items-center w-full">
      <div class="order-1 w-5/12"></div>

      <div class="z-20 flex items-center order-1 bg-green-500 shadow-xl w-8 h-8 rounded-full">
        <h1 class="mx-auto text-white font-semibold text-lg">2</h1>
      </div>

      <div class="order-1 bg-gray-200 rounded-lg shadow-xl w-5/12 px-6 py-4">
        <h3 class="mb-1 font-bold text-gray-800 text-xl">Step Two</h3>
        <p class="text-sm text-gray-700">Description for step two.</p>
      </div>
    </div>
  </div>
</div>

Explanation:

  • Container: Centers the timeline with mx-auto and adds padding.

  • Relative Wrapper: Holds all timeline items and the vertical line.

  • Vertical Line: An absolutely positioned div with a gray border.

  • Timeline Items: Each item is a flex container with three parts:

    • An empty div for spacing.

    • A circle indicator with a number or icon.

    • A content box for the event description.

  • Alternating Items: Use flex-row-reverse to alternate the sides of the content boxes.

Styling with Tailwind:

  • Colors: Use Tailwind’s color utility classes like bg-blue-500 and bg-green-500.

  • Spacing: Utilize p-6, px-6, py-4, and mb-8 for consistent spacing.

  • Shadows & Rounded Corners: Apply shadow-xl and rounded-lg for depth and smooth edges.

2. Horizontal Timeline

For situations where a horizontal timeline is more appropriate, Tailwind CSS can help you build one efficiently.

HTML Structure:
<div class="container mx-auto px-4 py-12">
  <div class="flex items-center">
    <!-- Timeline Line -->
    <div class="flex-grow border-t-2 border-gray-300"></div>

    <!-- Timeline Point 1 -->
    <div class="flex-shrink-0 relative">
      <div class="w-4 h-4 bg-blue-500 rounded-full"></div>
      <div class="absolute top-6 left-1/2 transform -translate-x-1/2 text-center">
        <p class="text-sm">Start</p>
      </div>
    </div>

    <!-- Timeline Line -->
    <div class="flex-grow border-t-2 border-gray-300"></div>

    <!-- Timeline Point 2 -->
    <div class="flex-shrink-0 relative">
      <div class="w-4 h-4 bg-green-500 rounded-full"></div>
      <div class="absolute top-6 left-1/2 transform -translate-x-1/2 text-center">
        <p class="text-sm">Middle</p>
      </div>
    </div>

    <!-- Timeline Line -->
    <div class="flex-grow border-t-2 border-gray-300"></div>

    <!-- Timeline Point 3 -->
    <div class="flex-shrink-0 relative">
      <div class="w-4 h-4 bg-red-500 rounded-full"></div>
      <div class="absolute top-6 left-1/2 transform -translate-x-1/2 text-center">
        <p class="text-sm">End</p>
      </div>
    </div>

    <!-- Timeline Line -->
    <div class="flex-grow border-t-2 border-gray-300"></div>
  </div>
</div>

Explanation:

  • Flex Container: Utilizes flex to arrange items horizontally.

  • Timeline Line: flex-grow allows lines to expand and fill space between points.

  • Timeline Points: Each point is a small circle with a label beneath it.

  • Responsive Labels: Positioned absolutely to appear below each point.

Customization:

  • Colors: Adjust the background colors (bg-blue-500, bg-green-500, bg-red-500) to suit your design.

  • Labels: Modify the labels as needed or integrate tooltips for more information.

  • Interactivity: Add hover effects or links to make the timeline interactive.

3. Enhanced Vertical Timeline with Icons and Responsive Design

For a more detailed and visually rich vertical timeline, including icons and ensuring responsiveness, follow this example.

HTML Structure:
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Tailwind CSS Vertical Timeline</title>
  <link href="<https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css>" rel="stylesheet">
  <!-- Include Font Awesome for Icons -->
  <link href="<https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css>" rel="stylesheet">
</head>
<body>

  <div class="container mx-auto p-6">
    <h2 class="text-3xl font-bold mb-8 text-center">My Timeline</h2>
    <div class="relative wrap overflow-hidden p-10 h-full">

      <!-- Vertical Line -->
      <div class="border-2 border-gray-200 h-full absolute left-1/2 transform -translate-x-1/2"></div>

      <!-- Timeline Item 1 -->
      <div class="mb-8 flex justify-start flex-row items-center w-full">
        <div class="order-1 w-5/12"></div>

        <div class="z-20 flex items-center order-1 bg-blue-500 shadow-xl w-8 h-8 rounded-full">
          <i class="mx-auto text-white fas fa-briefcase"></i>
        </div>

        <div class="order-1 bg-gray-200 rounded-lg shadow-xl w-5/12 px-6 py-4">
          <h3 class="mb-1 font-bold text-gray-800 text-xl">Job Title</h3>
          <span class="text-sm text-gray-600">January 2020 - Present</span>
          <p class="mt-2 text-sm text-gray-700">Description of the role and responsibilities.</p>
        </div>
      </div>

      <!-- Timeline Item 2 -->
      <div class="mb-8 flex justify-end flex-row-reverse items-center w-full">
        <div class="order-1 w-5/12"></div>

        <div class="z-20 flex items-center order-1 bg-green-500 shadow-xl w-8 h-8 rounded-full">
          <i class="mx-auto text-white fas fa-graduation-cap"></i>
        </div>

        <div class="order-1 bg-gray-200 rounded-lg shadow-xl w-5/12 px-6 py-4">
          <h3 class="mb-1 font-bold text-gray-800 text-xl">Education</h3>
          <span class="text-sm text-gray-600">September 2015 - June 2019</span>
          <p class="mt-2 text-sm text-gray-700">Details about your education and achievements.</p>
        </div>
      </div>

      <!-- Timeline Item 3 -->
      <div class="mb-8 flex justify-start flex-row items-center w-full">
        <div class="order-1 w-5/12"></div>

        <div class="z-20 flex items-center order-1 bg-red-500 shadow-xl w-8 h-8 rounded-full">
          <i class="mx-auto text-white fas fa-project-diagram"></i>
        </div>

        <div class="order-1 bg-gray-200 rounded-lg shadow-xl w-5/12 px-6 py-4">
          <h3 class="mb-1 font-bold text-gray-800 text-xl">Project</h3>
          <span class="text-sm text-gray-600">March 2021</span>
          <p class="mt-2 text-sm text-gray-700">Description of the project, technologies used, and outcomes.</p>
        </div>
      </div>

      <!-- Add more timeline items similarly -->

    </div>
  </div>

</body>
</html>

Features:

  • Icons: Utilizes Font Awesome for visual indicators within the timeline points.

  • Alternating Layout: Uses flex-row and flex-row-reverse to alternate the sides of the content boxes.

  • Responsive Design: The layout naturally adjusts, but you can enhance responsiveness by adding media queries or Tailwind’s responsive utilities.

  • Shadow & Rounded Corners: Adds depth and smoother edges for a modern look.

Responsive Adjustments:

To ensure the timeline stacks vertically on smaller screens, you can modify the flex classes with responsive prefixes. For example:

<!-- Modify Timeline Item 1 -->
<div class="mb-8 flex flex-col md:flex-row items-center w-full">
  <!-- Existing content -->
</div>

<!-- Similarly, adjust other timeline items -->

This ensures that on medium screens (md: breakpoint) and above, the timeline items are displayed in a row, while on smaller screens, they stack vertically.

4. Horizontal Timeline with Labels

For a horizontal timeline that includes labels and is interactive, consider the following structure:

HTML Structure:

<div class="container mx-auto px-4 py-12">
  <div class="flex items-center justify-between">

    <!-- Timeline Line -->
    <div class="flex-grow border-t-2 border-gray-300"></div>

    <!-- Timeline Point 1 -->
    <div class="flex-shrink-0 relative">
      <div class="w-4 h-4 bg-blue-500 rounded-full"></div>
      <div class="absolute top-6 left-1/2 transform -translate-x-1/2 text-center">
        <p class="text-sm">Start</p>
      </div>
    </div>

    <!-- Timeline Line -->
    <div class="flex-grow border-t-2 border-gray-300"></div>

    <!-- Timeline Point 2 -->
    <div class="flex-shrink-0 relative">
      <div class="w-4 h-4 bg-green-500 rounded-full"></div>
      <div class="absolute top-6 left-1/2 transform -translate-x-1/2 text-center">
        <p class="text-sm">Middle</p>
      </div>
    </div>

    <!-- Timeline Line -->
    <div class="flex-grow border-t-2 border-gray-300"></div>

    <!-- Timeline Point 3 -->
    <div class="flex-shrink-0 relative">
      <div class="w-4 h-4 bg-red-500 rounded-full"></div>
      <div class="absolute top-6 left-1/2 transform -translate-x-1/2 text-center">
        <p class="text-sm">End</p>
      </div>
    </div>

    <!-- Timeline Line -->
    <div class="flex-grow border-t-2 border-gray-300"></div>
  </div>
</div>

Features:

  • Horizontal Alignment: Uses flex to arrange timeline points horizontally.

  • Labels: Each timeline point has a label positioned below it.

  • Colors: Different colors can represent various stages or statuses.

  • Customization: You can add interactive elements like tooltips or links within the labels.

5. Best Practices

  • Consistency: Maintain consistent spacing, colors, and typography across your timeline to ensure a cohesive design.

  • Accessibility: Use semantic HTML elements (like <section>, <article>, <time>) and ensure sufficient color contrast for readability.

  • Responsive Design: Ensure your timeline looks good on all screen sizes by utilizing Tailwind’s responsive utilities (sm:, md:, lg:, xl:).

  • Interactivity: Enhance user engagement by adding hover effects, animations, or clickable elements where appropriate.

  • Performance: Optimize images or icons used in the timeline to ensure quick loading times.

Tailwind CSS makes it incredibly easy to build flexible and stylish timeline components tailored to your project's needs. Whether you choose to create your own from scratch or leverage existing component libraries, Tailwind’s utility classes provide the foundation for creating responsive and visually appealing timelines.

FAQ

You can find answers for commonly asked questions about components.

1. What are Tailwind Timeline Components?

Tailwind Timeline Components are pre-designed elements using Tailwind CSS, allowing you to create informative and visually appealing timelines for your web projects.