Timeline: Add group

src/components/timeline/TimelineElement.scss

@@ -0,0 +1,51 @@
+.timeline-element {
+    @apply relative flex flex-col md:flex-row justify-between;
+
+    // Place point in center line
+    &:before {
+        @apply content-[""] w-6 h-6 rounded-[50%] absolute top-5 left-0 md:left-1/2 bg-[#f8f8f8] -ml-2 z-50;
+        box-shadow: 2px 2px 5px #dee1e4, -2px -2px 5px #fff;
+    }
+
+    &:nth-child(even) {
+        @apply md:flex-row-reverse;
+
+        .timeline-element__category {
+            @apply md:flex-row-reverse;
+        }
+    }
+
+    .timeline-element__info, .timeline-element__category {
+        @apply relative w-4/5 md:w-2/5 left-[10%] md:left-0;
+    }
+
+    .timeline-element__category {
+        @apply top-5 flex md:justify-end mb-12;
+    }
+
+    .timeline-element__info {
+        & > details {
+            @apply mb-12 rounded-xl overflow-hidden relative bg-[#f5f5f5];
+            box-shadow: 3px 3px 12px #dee1e4, -3px -3px 12px #fff;
+
+            & > summary, & > div {
+                @apply p-5;
+            }
+    
+            & > summary {
+                @apply block select-none cursor-pointer outline-none mb-0 font-semibold;
+                transition: all 600ms cubic-bezier(0.2, 1, 0.3, 1);
+    
+                &:hover {
+                    @apply bg-[#f8f8f8];
+                }
+            }
+    
+            &[open] {
+                & > summary {
+                    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+                }
+            }
+        }
+    }
+}