Published on

Learn How To Build A Responsive Vertical Timeline With Tailwind CSS Like an Expert

Tags
Responsive Vertical Timeline

What is Tailwind CSS?

Tailwind CSS is a utility-first CSS framework that allows developers to quickly create custom designs without writing any CSS code. It provides a set of pre-defined classes that can be used to style HTML elements. Tailwind CSS is highly customizable and can be used with any JavaScript framework or library.

The description of Responsive Vertical Timeline ui component

A responsive vertical timeline is a user interface component that displays a list of events or milestones in a chronological order. It is a popular design pattern used in many websites and applications. The timeline can be used to showcase company history, product development, or personal achievements.

Why use Tailwind CSS to create a Responsive Vertical Timeline ui component?

Tailwind CSS is a great choice for creating a responsive vertical timeline because it provides a wide range of utility classes that can be used to style the timeline. The framework is highly customizable and allows developers to create unique designs without writing any CSS code. Tailwind CSS also provides responsive classes that can be used to create a timeline that looks great on any device.

The preview of Responsive Vertical Timeline ui component

To create a responsive vertical timeline with Tailwind CSS, we will use a combination of flexbox and grid classes. The timeline will be displayed in a vertical orientation with each event displayed in a separate row. The timeline will be responsive and will adjust its layout based on the screen size.

Free download of the Responsive Vertical Timeline's source code

The source code of Responsive Vertical Timeline ui component

To create a responsive vertical timeline with Tailwind CSS, we will use a combination of HTML and Tailwind CSS classes. The HTML will define the structure of the timeline, while the Tailwind CSS classes will be used to style the timeline.

<div class="min-h-screen bg-blue-500 py-6 flex flex-col justify-center sm:py-12">
  <div class="py-3 sm:max-w-xl sm:mx-auto w-full px-2 sm:px-0">

    <div class="relative text-gray-700 antialiased text-sm font-semibold">

      <!-- Vertical bar running through middle -->
      <div class="hidden sm:block w-1 bg-blue-300 absolute h-full left-1/2 transform -translate-x-1/2"></div>

      <!-- Left section, set by justify-start and sm:pr-8 -->
      <div class="mt-6 sm:mt-0 sm:mb-12">
        <div class="flex flex-col sm:flex-row items-center">
          <div class="flex justify-start w-full mx-auto items-center">
            <div class="w-full sm:w-1/2 sm:pr-8">
              <div class="p-4 bg-white rounded shadow">
                Now this is a story all about how,
              </div>
            </div>
          </div>
          <div class="rounded-full bg-blue-500 border-white border-4 w-8 h-8 absolute left-1/2 -translate-y-4 sm:translate-y-0 transform -translate-x-1/2 flex items-center justify-center">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253" />
            </svg>
          </div>
        </div>
      </div>

      <!-- Right section, set by justify-end and sm:pl-8 -->
      <div class="mt-6 sm:mt-0 sm:mb-12">
        <div class="flex flex-col sm:flex-row items-center">
          <div class="flex justify-end w-full mx-auto items-center">
            <div class="w-full sm:w-1/2 sm:pl-8">
              <div class="p-4 bg-white rounded shadow">
                My life got flipped turned upside down,
              </div>
            </div>
          </div>
          <div class="rounded-full bg-blue-500 border-white border-4 w-8 h-8 absolute left-1/2 -translate-y-4 sm:translate-y-0 transform -translate-x-1/2 flex items-center justify-center">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
            </svg>
          </div>
        </div>
      </div>

      <!-- Left section, set by justify-start and sm:pr-8 -->
      <div class="mt-6 sm:mt-0 sm:mb-12">
        <div class="flex flex-col sm:flex-row items-center">
          <div class="flex justify-start w-full mx-auto items-center">
            <div class="w-full sm:w-1/2 sm:pr-8">
              <div class="p-4 bg-white rounded shadow">
                And I'd like to take a minute, just sit right there,
              </div>
            </div>
          </div>
          <div class="rounded-full bg-blue-500 border-white border-4 w-8 h-8 absolute left-1/2 -translate-y-4 sm:translate-y-0 transform -translate-x-1/2 flex items-center justify-center">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
            </svg>
          </div>
        </div>
      </div>

      <!-- Right section, set by justify-end and sm:pl-8 -->
      <div class="mt-6 sm:mt-0">
        <div class="flex flex-col sm:flex-row items-center">
          <div class="flex justify-end w-full mx-auto items-center">
            <div class="w-full sm:w-1/2 sm:pl-8">
              <div class="p-4 bg-white rounded shadow">
                I'll tell you how I became the Prince of a town called Bel Air.
              </div>
            </div>
          </div>
          <div class="rounded-full bg-blue-500 border-white border-4 w-8 h-8 absolute left-1/2 -translate-y-4 sm:translate-y-0 transform -translate-x-1/2 flex items-center justify-center">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" />
            </svg>
          </div>
        </div>
      </div>



    </div>

  </div>
</div>

How to create a Responsive Vertical Timeline with Tailwind CSS?

Step 1: Create the HTML structure

The first step in creating a responsive vertical timeline is to create the HTML structure. We will use a combination of divs and unordered lists to create the timeline.

<div class="timeline-container">
  <ul class="timeline">
    <li class="timeline-item">
      <div class="timeline-content">
        <h2 class="timeline-title">Event Title</h2>
        <p class="timeline-text">Event Description</p>
        <span class="timeline-date">Event Date</span>
      </div>
    </li>
    <!-- Add more timeline items here -->
  </ul>
</div>

Step 2: Style the timeline with Tailwind CSS

Once we have created the HTML structure, we can start styling the timeline with Tailwind CSS classes. We will use a combination of flexbox and grid classes to create the layout of the timeline.

.timeline-container {
  display: flex;
  justify-content: center;
}

.timeline {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  grid-gap: 2rem;
  margin-top: 2rem;
}

.timeline-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}

.timeline-content {
  background-color: #fff;
  border-radius: 0.25rem;
  box-shadow: 0 0 1rem rgba(0, 0, 0, 0.1);
  padding: 1rem;
  position: relative;
  z-index: 1;
}

.timeline-title {
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.timeline-text {
  font-size: 1rem;
  margin-bottom: 1rem;
}

.timeline-date {
  font-size: 0.875rem;
  font-weight: 600;
  position: absolute;
  top: -1.5rem;
}

Step 3: Make the timeline responsive

To make the timeline responsive, we will use Tailwind CSS responsive classes. We will adjust the grid-template-columns property to change the number of columns based on the screen size.

@media (max-width: 768px) {
  .timeline {
    grid-template-columns: 1fr;
  }
}

Conclusion

In this article, we learned how to create a responsive vertical timeline with Tailwind CSS. We used a combination of HTML and Tailwind CSS classes to create the timeline and made it responsive using responsive classes. Tailwind CSS is a great choice for creating custom designs quickly and easily. With Tailwind CSS, you can create unique designs without writing any CSS code.