timeline

<article class="shadow-2xl text- p-4 max-w-3xl">
    <ul class="flex flex-col">
        <li class="flex gap-2 flex-col relative before:w-[1px] before:absolute before:left-1.5 before:top-0 before:bg-gray-500 before:h-full after:w-3 after:aspect-square after:absolute after:left-0 after:top-5 after:bg-gray-500 after:rounded-full">
            <article class="flex gap-2 flex-col p-4 pl-6">
                <h3 class="font-medium text-lg leading-none">Fist Title</h3>

                <p class="max-w-sm text-gray-600">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ratione laudantium beatae debitis illo</p>
            </article>
        </li>
        <li class="flex gap-2 flex-col relative before:w-[1px] before:absolute before:left-1.5 before:top-0 before:bg-gray-500 before:h-full after:w-3 after:aspect-square after:absolute after:left-0 after:top-5 after:bg-gray-500 after:rounded-full">
            <article class="flex gap-2 flex-col p-4 pl-6">
                <h3 class="font-medium text-lg leading-none">Second Title</h3>

                <p class="max-w-sm text-gray-600">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ratione laudantium beatae debitis illo</p>
            </article>
        </li>
        <li class="flex gap-2 flex-col relative before:w-[1px] before:absolute before:left-1.5 before:top-0 before:bg-gray-500 before:h-full after:w-3 after:aspect-square after:absolute after:left-0 after:top-5 after:bg-gray-500 after:rounded-full">
            <article class="flex gap-2 flex-col p-4 pl-6">
                <h3 class="font-medium text-lg leading-none">Third Title</h3>

                <p class="max-w-sm text-gray-600">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ratione laudantium beatae debitis illo</p>
            </article>
        </li>
    </ul>
</article>