Home
Anja Müller
Timeline | Roadmap example

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 CSS v3. It is responsive. similar terms for this example are Roadmap, Changelog

Timeline

Author Anja Müller

12.5k

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

Author:
Komal Jain

2 years ago

11.6k
Timeline
Beautiful Tailwind timeline

Author:
Brandon D

3 years ago

16.2k
Stepper example
Explain How it works to your audience

Author:
Santos78

2 years ago

14.8k
Event timeline

Author:
Laurits

2 years ago

17k
Event timeline list

Author:
Laurits

2 years ago

13.2k
Timeline
Timeline for tracking status of the things

Author:
Akshay

3 years ago

11.1k
Simple stepper section
multipurpose verticle stepper

Author:
S. Patel

2 years ago

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

Author:
Shariar Hasan

1 year ago

3.9k
Dark mode with Tailwind CSS and alpinjs

Author:
Michael Andreuzza

1 year ago

3.3k
Table
Table with image and status with pagination buttons

Author:
Abhiraj

10 months ago

2.1k
Fully Animated Timeline Card
It is at a 20s interval for testing purposes. Go to the <style> and change the .content-scroll class from 20s to 35s for a production ready slower animation.

Author:
Coastal UI

1 year ago

1.7k
Sticky Changelog

Author:
Michael Andreuzza

1 year ago

2.1k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components