Back to Discover

Tailwind CSS Timeline Component Example

Amelia

Created Nov 03, 2025

0 views

0 likes

0 comments

0 forks

Export Fork Like

<script src="https://cdn.tailwindcss.com"></script>
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
<script type="module" src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"></script>
<body class="bg-gray-50 min-h-screen py-12 px-4">
  <div class="max-w-4xl mx-auto" x-data="{ activeItem: null }">
    <h1 class="text-3xl font-bold text-gray-900 mb-2">Project Timeline</h1>
    <p class="text-gray-600 mb-12">Track the progress of our development journey</p>

    <div class="relative">
      <!-- Vertical Line -->
      <div class="absolute left-8 top-0 bottom-0 w-0.5 bg-gray-200"></div>

      <!-- Timeline Items -->
      <div class="space-y-8">
        <!-- Item 1 -->
        <div class="relative flex items-start gap-6" x-data="{ id: 1 }">
          <div class="relative z-10 flex items-center justify-center w-16 h-16 bg-blue-600 rounded-full ring-4 ring-white shadow-lg cursor-pointer transition-transform hover:scale-110"
               @click="activeItem = activeItem === id ? null : id">
            <ion-icon name="rocket" class="text-white text-2xl"></ion-icon>
          </div>
          <div class="flex-1 bg-white rounded-lg shadow-md p-6">
            <div class="flex items-center justify-between mb-2">
              <h3 class="text-xl font-semibold text-gray-900">Project Kickoff</h3>
              <span class="text-sm text-gray-500">Jan 2024</span>
            </div>
            <p class="text-gray-600">Initial planning and requirements gathering phase completed. Team assembled and project scope defined.</p>
            <div x-show="activeItem === id" 
                 x-transition:enter="transition ease-out duration-300"
                 x-transition:enter-start="opacity-0 transform scale-95"
                 x-transition:enter-end="opacity-100 transform scale-100"
                 x-transition:leave="transition ease-in duration-200"
                 x-transition:leave-start="opacity-100 transform scale-100"
                 x-transition:leave-end="opacity-0 transform scale-95"
                 class="mt-4 pt-4 border-t border-gray-100">
              <p class="text-sm text-gray-500">Stakeholders: Product Team, Engineering, Design</p>
              <p class="text-sm text-gray-500 mt-1">Duration: 2 weeks</p>
            </div>
          </div>
        </div>

        <!-- Item 2 -->
        <div class="relative flex items-start gap-6" x-data="{ id: 2 }">
          <div class="relative z-10 flex items-center justify-center w-16 h-16 bg-green-600 rounded-full ring-4 ring-white shadow-lg cursor-pointer transition-transform hover:scale-110"
               @click="activeItem = activeItem === id ? null : id">
            <ion-icon name="code-slash" class="text-white text-2xl"></ion-icon>
          </div>
          <div class="flex-1 bg-white rounded-lg shadow-md p-6">
            <div class="flex items-center justify-between mb-2">
              <h3 class="text-xl font-semibold text-gray-900">Development Phase</h3>
              <span class="text-sm text-gray-500">Feb 2024</span>
            </div>
            <p class="text-gray-600">Core features implemented with modern tech stack. API integration and database architecture finalized.</p>
            <div x-show="activeItem === id"
                 x-transition:enter="transition ease-out duration-300"
                 x-transition:enter-start="opacity-0 transform scale-95"
                 x-transition:enter-end="opacity-100 transform scale-100"
                 x-transition:leave="transition ease-in duration-200"
                 x-transition:leave-start="opacity-100 transform scale-100"
                 x-transition:leave-end="opacity-0 transform scale-95"
                 class="mt-4 pt-4 border-t border-gray-100">
              <p class="text-sm text-gray-500">Technologies: React, Node.js, PostgreSQL</p>
              <p class="text-sm text-gray-500 mt-1">Sprint: 6 weeks</p>
            </div>
          </div>
        </div>

        <!-- Item 3 -->
        <div class="relative flex items-start gap-6" x-data="{ id: 3 }">
          <div class="relative z-10 flex items-center justify-center w-16 h-16 bg-purple-600 rounded-full ring-4 ring-white shadow-lg cursor-pointer transition-transform hover:scale-110"
               @click="activeItem = activeItem === id ? null : id">
            <ion-icon name="bug" class="text-white text-2xl"></ion-icon>
          </div>
          <div class="flex-1 bg-white rounded-lg shadow-md p-6">
            <div class="flex items-center justify-between mb-2">
              <h3 class="text-xl font-semibold text-gray-900">Testing & QA</h3>
              <span class="text-sm text-gray-500">Mar 2024</span>
            </div>
            <p class="text-gray-600">Comprehensive testing conducted across all modules. Bug fixes and performance optimizations applied.</p>
            <div x-show="activeItem === id"
                 x-transition:enter="transition ease-out duration-300"
                 x-transition:enter-start="opacity-0 transform scale-95"
                 x-transition:enter-end="opacity-100 transform scale-100"
                 x-transition:leave="transition ease-in duration-200"
                 x-transition:leave-start="opacity-100 transform scale-100"
                 x-transition:leave-end="opacity-0 transform scale-95"
                 class="mt-4 pt-4 border-t border-gray-100">
              <p class="text-sm text-gray-500">Test Coverage: 94%</p>
              <p class="text-sm text-gray-500 mt-1">Issues Resolved: 127</p>
            </div>
          </div>
        </div>

        <!-- Item 4 -->
        <div class="relative flex items-start gap-6" x-data="{ id: 4 }">
          <div class="relative z-10 flex items-center justify-center w-16 h-16 bg-orange-600 rounded-full ring-4 ring-white shadow-lg cursor-pointer transition-transform hover:scale-110"
               @click="activeItem = activeItem === id ? null : id">
            <ion-icon name="checkmark-circle" class="text-white text-2xl"></ion-icon>
          </div>
          <div class="flex-1 bg-white rounded-lg shadow-md p-6">
            <div class="flex items-center justify-between mb-2">
              <h3 class="text-xl font-semibold text-gray-900">Launch</h3>
              <span class="text-sm text-gray-500">Apr 2024</span>
            </div>
            <p class="text-gray-600">Successfully deployed to production. Monitoring systems active and user feedback being collected.</p>
            <div x-show="activeItem === id"
                 x-transition:enter="transition ease-out duration-300"
                 x-transition:enter-start="opacity-0 transform scale-95"
                 x-transition:enter-end="opacity-100 transform scale-100"
                 x-transition:leave="transition ease-in duration-200"
                 x-transition:leave-start="opacity-100 transform scale-100"
                 x-transition:leave-end="opacity-0 transform scale-95"
                 class="mt-4 pt-4 border-t border-gray-100">
              <p class="text-sm text-gray-500">Initial Users: 1,200+</p>
              <p class="text-sm text-gray-500 mt-1">Uptime: 99.9%</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

body {
  margin: 0;
  padding: 20px;
  font-family: system-ui, -apple-system, sans-serif;
  background: #f5f5f5;
}

.container {
  background: white;
  padding: 30px;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  max-width: 600px;
  margin: 0 auto;
}

h1 {
  color: #333;
  margin-top: 0;
}

button {
  background: #000;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
}

console.log('Editor loaded!');

let clickCount = 0;

function handleClick() {
  clickCount++;
  const output = document.getElementById('output');
  output.innerHTML = `
    <h3>Clicked ${clickCount} time(s)!</h3>
    <p>Time: ${new Date().toLocaleTimeString()}</p>
  `;
  console.log(`Button clicked ${clickCount} times`);
}

Comments (0)

No comments yet. Be the first!