<Timeline>
    <TimelineItem Title="Application UI code in Tailwind CSS" Date="February 2022">
        <ChildContent>
            <p class="mb-4 text-base font-normal text-gray-500 dark:text-gray-400">
                Get access to over 20+ pages including a dashboard layout, charts, kanban board, calendar, and E-commerce pages.
            </p>
            <Button Color="Button.ButtonColor.Light">
                Learn more
                <ArrowRightIcon Class="ms-2 h-5 w-5" />
            </Button>
        </ChildContent>
    </TimelineItem>
    <TimelineItem Title="Application UI code in Tailwind CSS" Date="March 2022">
        <ChildContent>
            <p>
                All of the pages and components are first designed in Figma to maintain parity between design and implementation.
            </p>
        </ChildContent>
    </TimelineItem>
    <TimelineItem Title="Application UI code in Tailwind CSS" Date="April 2022">
        <ChildContent>
            <p>
                Get started with dozens of web components and interactive elements built on top of Tailwind CSS.
            </p>
        </ChildContent>
    </TimelineItem>
</Timeline>

<Timeline Order="TimelineOrder.Vertical">
    <TimelineItem Title="Flowbite Application UI v2.0.0" Date="Released on January 13th, 2022">
        <OrientationContent>
            <span class="absolute -left-4 flex h-6 w-6 items-center justify-center rounded-full ring-8 ring-white dark:ring-gray-900 bg-primary-200 dark:bg-primary-900">
                <CalendarMonthIcon Class="h-4 w-4 text-primary-600 dark:text-primary-400" />
            </span>
        </OrientationContent>
        <ChildContent>
            <p>
                Get access to over 20+ pages including dashboards, kanban boards, calendars, and marketing layouts.
            </p>
        </ChildContent>
    </TimelineItem>
    <TimelineItem Title="Flowbite Figma v1.3.0" Date="Released on December 7th, 2021">
        <OrientationContent>
            <span class="absolute -left-4 flex h-6 w-6 items-center justify-center rounded-full ring-8 ring-white dark:ring-gray-900 bg-primary-200 dark:bg-primary-900">
                <CalendarMonthIcon Class="h-4 w-4 text-primary-600 dark:text-primary-400" />
            </span>
        </OrientationContent>
        <ChildContent>
            <p>
                Maintain parity between design and implementation by starting from our Figma resources.
            </p>
        </ChildContent>
    </TimelineItem>
</Timeline>

<Timeline Order="TimelineOrder.Horizontal">
    <TimelineItem Title="Flowbite Library v1.0.0" Date="Released on December 2nd, 2021">
        <OrientationContent>
            <div class="flex items-center">
                <div class="z-10 flex h-6 w-6 shrink-0 items-center justify-center rounded-full ring-0 ring-white sm:ring-8 dark:ring-gray-900 bg-primary-200 dark:bg-primary-900">
                    <CalendarMonthIcon Class="h-4 w-4 text-primary-600 dark:text-primary-400" />
                </div>
                <div class="hidden h-0.5 w-full bg-gray-200 sm:flex dark:bg-gray-700"></div>
            </div>
        </OrientationContent>
        <ChildContent>
            <p>
                Get started with dozens of web components and interactive elements.
            </p>
        </ChildContent>
        ...
    </TimelineItem>
</Timeline>

<Timeline Order="TimelineOrder.Vertical">
@for (var i = 0; i < Appointments.Count; i++)
{
    var appointment = Appointments[i];
    var visual = GetStatusVisual(appointment.Status);
    <TimelineItem Title="@appointment.Title"
                  Date="@appointment.Date.ToString("o")"
                  Color="@visual.Color"
                  IsLast="@ (i == Appointments.Count - 1)"
                  DateFormat="TimelineDateFormat.FullDate"
                  DatePrefix="Scheduled for">
        <OrientationContent>
            <span class="absolute -left-4 flex h-6 w-6 items-center justify-center rounded-full ring-8 ring-white dark:ring-gray-900 @visual.OrientationClass">
                @visual.IconFragment
            </span>
        </OrientationContent>
        <ChildContent>
            <div class="pl-6">
                <p class="mb-2 text-base font-normal text-gray-500 dark:text-gray-400">@appointment.Description</p>
                <div class="inline-flex">
                    <Badge Color="@visual.BadgeColor">@visual.DisplayStatus</Badge>
                </div>
            </div>
        </ChildContent>
    </TimelineItem>
}
</Timeline>

<Timeline Order="TimelineOrder.Horizontal">
@for (var i = 0; i < Releases.Count; i++)
{
    var release = Releases[i];
    var visual = GetStatusVisual(release.Status);
    <TimelineItem Title="@release.Title"
                  Date="@release.Date"
                  Color="@visual.Color"
                  IsLast="@ (i == Releases.Count - 1)"
                  DatePrefix="Released on">
        <OrientationContent>
            <div class="flex items-center">
                <div class="z-10 flex h-6 w-6 shrink-0 items-center justify-center rounded-full ring-0 ring-white sm:ring-8 dark:ring-gray-900 @visual.OrientationClass">
                    @visual.IconFragment
                </div>
                @if (i != Releases.Count - 1)
                {
                    <div class="hidden h-0.5 w-full sm:flex @visual.ConnectorClass"></div>
                }
            </div>
        </OrientationContent>
        <ChildContent>
            <p class="text-base font-normal text-gray-500 dark:text-gray-400">
                @release.Description
            </p>
            <div class="inline-flex">
                <Badge Color="@visual.BadgeColor">@visual.DisplayStatus</Badge>
            </div>
        </ChildContent>
    </TimelineItem>
}
</Timeline>

<Activity>
    <ActivityItem Activities="ActivityItems" />
</Activity>

<Group Date="January 13th, 2022">
    <GroupItem Timelines="GroupedTimelines" />
</Group>