timeline test

templates/components/timeline.html

@@ -0,0 +1,16 @@
+<div class="max-w-3xl mx-auto px-6 py-16">
+  <ol class="relative border-l border-gray-300">
+    {% for item in timeline %}
+    <li class="mb-10 ml-6">
+      <span
+        class="absolute flex items-center justify-center w-6 h-6 bg-gray-200 rounded-full -left-3"
+      >
+      </span>
+
+      <h3 class="font-semibold text-lg">{{ item.title }}</h3>
+
+      <p class="text-gray-600">{{ item.description }}</p>
+    </li>
+    {% endfor %}
+  </ol>
+</div>

templates/posts/post_5.html

@@ -0,0 +1,3 @@
+<h1 class="text-3xl font-bold mb-8">Project Timeline</h1>
+
+{% include "components/timeline.html" %}