update the layout completely and include tailwind standalone

views/partials/experience-partial.html

@@ -1,38 +1,35 @@
 {{ block "experience-partial" . }}
 <h2 class="text-3xl font-bold m-6">Experience</h2>
-<div class="m-10 mb-6 overflow-x-auto rounded-lg shadow">
-  <p class="mb-6 font-bold text-lg"> Parent Company - IdPassglobal</p>
-  <table class="min-w-full border border-gray-300 border-collapse">
-    <thead class="bg-gray-100">
-      <tr class="border-b border-gray-300">
-        <th class="table-th">Company</th>
-        <th class="table-th">Position</th>
-        <th class="table-th">Employee Type</th>
-        <th class="table-th">Tasks</th>
-        <th class="table-th">Tools</th>
-        <th class="table-th">Time Period</th>
-      </tr>
-    </thead>
-{{ range . }} {{ template "experience-partial-range" . }} {{ end }} 
-  </table>
+<div class="flex flex-row m-10 mb-4">
+  <p class="font-bold text-lg">
+    For all jobs mentioned below I was an employee of
+  </p>
+  <p class="font-bold text-lg italic underline ml-1.5">Idpassglobal</p>
+</div>
+<div class="m-10 mb-6">
+  {{ range . }} {{ template "experience-partial-range" . }} {{ end }}
+</div>
+{{ end }} {{block "experience-partial-range" . }}
+<div class="grid grid-cols-[7rem_1rem_auto]">
+  <!-- <div class="flex flex-row"> -->
+  <div class="text-right font-bold text-xs leading-none">{{.StartFrom}}</div>
+  <!-- <div class="grid grid-cols-[1rem_auto] ml-2"> -->
+  <div class="flex flex-col items-center leading-none ml-2">
+    <span class="w-2.5 h-2.5 rounded-full bg-black"></span>
+    <span class="w-0.5 flex-grow bg-black"></span>
+  </div>
+  <div class="m-5">
+    <div class="flex flex-row">
+      <p class="font-bold">{{.Company}}</p>
+      <p class="ml-2 font-bold">{{.Position}}</p>
+      <p class="ml-2 font-bold">- {{.EmployeeType}}</p>
+    </div>
+    <ul class="list-disc list-inside">
+      {{ range .Tasks }}
+      <li class="m-2">{{.}}</li>
+      {{ end }}
+    </ul>
+    <!-- </div> -->
+  </div>
 </div>
 {{ end }}
-
-{{ block "experience-partial-range" . }}
-    <tbody>
-      <tr class="hover:bg-blue-50 border-b border-gray-300">
-        <td class="table-td">{{ .Company }}</td>
-        <td class="table-td">{{ .Position }}</td>
-        <td class="table-td">{{ .EmployeeType }}</td>
-        <td class="table-td text-start px-2">
-          <ul class="list-disc list-inside">
-            {{ range .Tasks }}
-            <li class="m-2">{{ . }}</li>
-            {{ end }}
-          </ul>
-        </td>
-        <td class="table-td">{{ .Tools }}</td>
-        <td class="table-td">{{ .TimePeriod }}</td>
-      </tr>
-    </tbody>
-{{ end }}