tailwind css timeline ui example

In this section we will create tailwind timeline ui, tailwind vertical timeline, tailwind step by step with icon timeline, tailwind timeline left to right side, tailwind v3 timeline example with Tailwind CSS.


Example 1

tailwind simple timeline notification list.

<div class="relative max-w-2xl">
  <div class="absolute top-0 h-full border-r-2 border-gray-500 left-3"></div>
  <ul class="space-y-2">
    <li>
      <div class="flex items-center">
        <span class="w-6 h-6 bg-gray-500 rounded-full"></span>
        <h5 class="ml-4 font-bold text-gray-600">Tailwind CSS 3.0</h5>
      </div>
      <div class="ml-12">
        <p class="text-sm text-gray-500">Lorem ipsum, dolor sit amet consectetur Lorem, ipsum dolor si</p>
      </div>
    </li>
    <li>
      <div class="flex items-center">
        <span class="w-6 h-6 bg-gray-500 rounded-full"></span>
        <h5 class="ml-4 font-bold text-gray-600">Tailwind CSS 3.0.5v</h5>
      </div>
      <div class="ml-12">
        <p class="text-sm text-gray-500">Lorem ipsum, dolor sit amet consectetur Lorem, ipsum dolor si</p>
      </div>
    </li>
    <li>
      <div class="flex items-center">
        <span class="w-6 h-6 bg-gray-500 rounded-full"></span>
        <h5 class="ml-4 font-bold text-gray-600">Tailwind CSS 3.0.7v</h5>
      </div>
      <div class="ml-12">
        <p class="text-sm text-gray-500">Lorem ipsum, dolor sit amet consectetur Lorem, ipsum dolor si</p>
      </div>
    </li>
  </ul>
</div>



Example 2

tailwind css vertical step to step timeline with heroicons icon.

<div class="w-1/2">
  <div class="flex">
    <div class="flex flex-col items-center mr-4">
      <div>
        <div class="flex items-center justify-center w-10 h-10 border rounded-full">
          <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 text-gray-500" fill="none" viewBox="0 0 24 24"
            stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 13l-5 5m0 0l-5-5m5 5V6" />
          </svg>
        </div>
      </div>
      <div class="w-px h-full bg-gray-300"></div>
    </div>
    <div class="pb-8 ">
      <p class="mb-2 text-xl font-bold text-gray-600">Step 1</p>
      <p class="text-gray-700">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. veniam libero facilis minus reprehenderit.
      </p>
    </div>
  </div>
  <div class="flex">
    <div class="flex flex-col items-center mr-4">
      <div>
        <div class="flex items-center justify-center w-10 h-10 border rounded-full">
          <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 text-gray-500" fill="none" viewBox="0 0 24 24"
            stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 13l-5 5m0 0l-5-5m5 5V6" />
          </svg>
        </div>
      </div>
      <div class="w-px h-full bg-gray-300"></div>
    </div>
    <div class="pb-8 ">
      <p class="mb-2 text-xl font-bold text-gray-600">Step 2</p>
      <p class="text-gray-700">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. veniam libero facilis minus reprehenderit.
      </p>
    </div>
  </div>
  <div class="flex">
    <div class="flex flex-col items-center mr-4">
      <div>
        <div class="flex items-center justify-center w-10 h-10 border rounded-full">
          <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 text-gray-500" fill="none" viewBox="0 0 24 24"
            stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 13l-5 5m0 0l-5-5m5 5V6" />
          </svg>
        </div>
      </div>
      <div class="w-px h-full bg-gray-300"></div>
    </div>
    <div class="pb-8 ">
      <p class="mb-2 text-xl font-bold text-gray-600">Step 3</p>
      <p class="text-gray-700">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. veniam libero facilis minus reprehenderit.
      </p>
    </div>
  </div>

  <div class="flex">
    <div class="flex flex-col items-center mr-4">
      <div>
        <div class="flex items-center justify-center w-10 h-10 border rounded-full">
          <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 text-gray-500" fill="none" viewBox="0 0 24 24"
            stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
          </svg>
        </div>
      </div>
    </div>
    <div class="pt-1">
      <p class="mb-2 text-lg font-bold text-gray-600">Done</p>
    </div>
  </div>
</div>


tailwind css vertical timeline

tailwind css vertical timeline



Example 3

tailwind v3 vertical left to right side timeline .

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>tailwind 3 vertical left side right timeline</title>
    <script src="https://cdn.tailwindcss.com"></script>
  </head>

  <body>
    <div class="flex flex-col justify-center py-6 lg:py-12">
      <div class="w-full mx-auto lg:max-w-4xl">

        <div class="relative">

          <!-- Vertical middle line-->
          <div class="absolute hidden w-px h-full transform -translate-x-1/2 bg-indigo-300 lg:block left-1/2"></div>
          <div class="space-y-12 lg:space-y-8">
            <!-- Left section -->
            <div>
              <div class="flex flex-col items-center">
                <div class="flex items-center justify-start w-full mx-auto">
                  <div class="w-full lg:w-1/2 lg:pr-8">
                    <div class="p-4 bg-white rounded shadow-lg shadow-cyan-300">
                      <p>Lorem, ipsum dolor sit amet consectetur dolor elit. </p>
                    </div>
                  </div>
                </div>
                <div
                  class="absolute flex items-center justify-center w-8 h-8 transform -translate-x-1/2 -translate-y-4 bg-indigo-400 border-2 border-red-200 rounded-full left-1/2 sm:translate-y-0">
                  <span class="text-white">1</span>
                </div>
              </div>
            </div>

            <!-- Right section -->
            <div>
              <div class="flex flex-col items-center">
                <div class="flex items-center justify-end w-full mx-auto">
                  <div class="w-full lg:w-1/2 lg:pl-8">
                    <div class="p-4 bg-white rounded shadow-lg shadow-red-300">
                      <p>Lorem, ipsum dolor sit amet consectetur dolor elit. </p>
                    </div>
                  </div>
                </div>
                <div
                  class="absolute flex items-center justify-center w-8 h-8 transform -translate-x-1/2 -translate-y-4 bg-indigo-400 border-2 border-red-200 rounded-full left-1/2 sm:translate-y-0">
                  <span class="text-white">2</span>
                </div>
              </div>
            </div>

            <!-- Left section -->
            <div>
              <div class="flex flex-col items-center">
                <div class="flex items-center justify-start w-full mx-auto">
                  <div class="w-full lg:w-1/2 lg:pr-8">
                    <div class="p-4 bg-white rounded shadow-lg shadow-yellow-300">
                      <p>Lorem, ipsum dolor sit amet consectetur dolor elit. </p>
                    </div>
                  </div>
                </div>
                <div
                  class="absolute flex items-center justify-center w-8 h-8 transform -translate-x-1/2 -translate-y-4 bg-indigo-400 border-2 border-red-200 rounded-full left-1/2 sm:translate-y-0">
                  <span class="text-white">3</span>
                </div>
              </div>
            </div>

            <!-- Right section -->
            <div>
              <div class="flex flex-col items-center">
                <div class="flex items-center justify-end w-full mx-auto">
                  <div class="w-full lg:w-1/2 lg:pl-8">
                    <div class="p-4 bg-white rounded shadow-lg shadow-lime-300">
                      <p>Lorem, ipsum dolor sit amet consectetur dolor elit. </p>
                    </div>
                  </div>
                </div>
                <div
                  class="absolute flex items-center justify-center w-8 h-8 transform -translate-x-1/2 -translate-y-4 bg-indigo-400 border-2 border-red-200 rounded-full left-1/2 sm:translate-y-0">
                  <span class="text-white">4</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </body>

</html>
tailwind 3 vertical left side right timeline

tailwind 3 vertical left side right timeline


Read Also

Tailwind CSS 3 FAQ Accordion UI Example

Tailwind CSS 3 Alert Message Example

Tailwind CSS 3 Avatars Example

Tailwind CSS 3 Badges Example

Tailwind CSS 3 Breadcrumb Example

Tailwind CSS v3 Button Examples

Tailwind CSS Gradient Button Example

Tailwind CSS 3D Button Example

Tailwind CSS Loading Button Example

Tailwind CSS v3 Cards Examples

Tailwind CSS Checkbox Form Examples

Tailwind CSS Dropdowns (Menu) on Hover Example

Tailwind CSS Multiselect Dropdown Example

How to use dark mode toggle switch in Tailwind CSS 3

How to use @apply directive in Tailwind CSS

Tailwind CSS sticky header & fixed navbar example

Tailwind CSS Navbar UI Example

Tailwind CSS 3 Login Page UI Example

Tailwind CSS Login Modal Example

Tailwind CSS Search Examples

Tailwind CSS 3 Overlay Image Example

Tailwind CSS Thank You Page Example

Tailwind CSS Timeline UI Example

Tailwind CSS Responsive Footer Section Example

Tailwind CSS Background Image Header Example