Timeline | Roadmap example

Display Recent Updates, Timeline or Rroadmap with this component

This tailwind example is contributed by Anja Müller, on 22-Sep-2023. Component is made with Tailwind v3.4. It is responsive. similar terms for this example are Roadmap, Changelog

Timeline

Author Anja Müller

Tailwind v3.4 13.3k 18

Fork Fullscreen

<div class="bg-white">
  <div class="max-w-xl mx-auto p-8">
    <div class="flow-root">
      <ul class="-mb-8">

<a href="#"
                      class="my-0.5 relative inline-flex items-center bg-white rounded-full border border-gray-300 px-3 py-0.5 text-sm">
                      <div class="absolute flex-shrink-0 flex items-center justify-center">
                        <span class="h-1.5 w-1.5 rounded-full bg-green-500" aria-hidden="true"></span>
                      </div>
                      <div class="ml-3.5 font-medium text-gray-900">Feature</div>
                    </a>
                  </div>
                  <span class="whitespace-nowrap text-sm">10h ago</span>
                </div>
                <div class="mt-2 text-gray-700">
                  <p>
                    - Added a user profile page for personalized settings.
                    <br>
                    - Implemented a dark mode for improved user experience at night.
                    <br>
                    - Introduced real-time notifications for instant updates.
                  </p>
                </div>
              </div>
            </div>
          </div>
        </li>
        <li>
          <div class="relative pb-8">
            <span class="absolute top-5 left-5 -ml-px h-full w-0.5 bg-gray-200" aria-hidden="true"></span>
            <div class="relative flex items-start space-x-3">
              <div>
                <div class="relative px-1">
                  <div class="h-8 w-8 bg-blue-500 rounded-full ring-8 ring-white flex items-center justify-center">
                    <svg class="text-white h-5 w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
                      stroke="currentColor">
                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                        d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
                    </svg>
                  </div>
                </div>
              </div>
              <div class="min-w-0 flex-1 py-0">
                <div class="text-md text-gray-500">
                  <div>
                    <a href="#" class="font-medium text-gray-900 mr-2">v3.1.0</a>

</ul>
    </div>
  </div>

</div>

Related Examples

Event Timeline
Timeline component for tracking the progression of events over time. It features alternating card sections

Komal Jain

2 years ago

12.8k
Timeline
Beautiful Tailwind timeline

Brandon D

3 years ago

17.3k
Stepper example
Explain How it works to your audience

Santos78

3 years ago

15.8k
Event timeline

Laurits

3 years ago

17.8k
Event timeline list

Laurits

3 years ago

14k
Timeline
Timeline for tracking status of the things

Akshay

4 years ago

11.8k
Simple stepper section
multipurpose verticle stepper

S. Patel

3 years ago

11k
Timeline Component
This component is responsive for Mobile & Desktop & Dark mode Supported.

Shariar Hasan

2 years ago

4.9k
Dark mode with Tailwind CSS and alpinjs

Michael Andreuzza

2 years ago

4k
Multi-Step Form with Progress Indicator
reusable "Multi-Step Form with Progress Indicator" component built with HTML, CSS, and Tailwind CSS. It’s a practical component for forms like signups, surveys, or checkout processes.

Ayyamperumal S

1 year ago

2.6k
Timeline
timeline with journey

Abhiraj

1 year ago

1.6k
omerlinks Calendrier Glassmorphism
omerlinks Calendrier Glassmorphism

Omer fils ELENGA

8 months ago

832