portfolio_leptos/src/components/timeline/Timeline.scss

.timeline {
    @apply w-full p-5;

    & > ul {
        @apply list-none py-5 px-0 relative w-full max-w-5xl mx-auto;

        & > li {
            @apply mb-12 relative flex;

            & > details {
                @apply w-4/5 md:max-2xl:w-2/5 left-[10%] md:max-2xl:left-0 rounded-xl overflow-hidden relative bg-[#f5f5f5];
                box-shadow: 3px 3px 12px #dee1e4, -3px -3px 12px #fff;

                & > summary {
                    @apply block select-none cursor-pointer outline-none p-5 mb-0 font-semibold;
                    transition: all 600ms cubic-bezier(0.2, 1, 0.3, 1);

                    &:hover {
                        @apply bg-[#f8f8f8];
                    }
                }

                & > p {
                    @apply py-5 pl-0 pr-2;
                }

                &[open] {
                    & > summary {
                        @apply mb-5 pb-5;
                        border-bottom: 1px solid rgba(0, 0, 0, 0.1);
                    }
                }
            }

            // Place point in center line
            &:before {
                @apply content-[""] w-6 h-6 rounded-[50%] absolute top-5 left-0 md:max-2xl:left-1/2 bg-[#f8f8f8] -ml-2 z-50;
                box-shadow: 2px 2px 5px #dee1e4, -2px -2px 5px #fff;
            }

            &:nth-child(even) {
                @apply md:max-2xl:justify-end;
            }
        }

        // Draw center line
        &:before {
            @apply top-0 bottom-0 left-0 md:max-2xl:left-1/2 absolute content-[""] w-2 bg-[#f5f5f5];
            box-shadow: 1px 1px 5px #dee1e4, -1px -1px 5px #fff;
        }
    }
}