Timeline List

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Timeline List</title>
    <style>
        /* ==========================================================================
           Styles for Demo Preview Only
           ========================================================================== */
        body {
            font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
            background-color: #f8fafc;
            color: #475569;
            margin: 0;
            padding: 2rem;
            display: flex;
            justify-content: center;
        }

/* ==========================================================================
           Timeline List Component Styles - Copy from here
           ========================================================================== */
        .timeline-template {
            --timeline-font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
            --timeline-primary-text-color: #1e293b;
            --timeline-secondary-text-color: #64748b;
            --timeline-line-color: #cbd5e1;
            --timeline-dot-bg: #ffffff;
            --timeline-accent-color: #4f46e5;
            
            font-family: var(--timeline-font-family);
            color: var(--timeline-primary-text-color);
            width: 100%;
            max-width: 700px;
        }

.timeline-template *,
        .timeline-template *::before,
        .timeline-template *::after {
            box-sizing: border-box;
        }
        
        .timeline-template .timeline-header {
            text-align: center;
            margin-bottom: 3rem;
        }

.timeline-template .timeline-header h2 {
            font-size: 2rem;
            margin: 0;
        }
        
        .timeline {
            list-style: none;
            padding: 0;
            margin: 0;
            position: relative;
        }

/* The main vertical line */
        .timeline::before {
            content: '';
            position: absolute;
            top: 0;
            bottom: 0;
            left: 7px; /* Position in the center of the padding/dot area */
            width: 2px;
            background-color: var(--timeline-line-color);
        }

.timeline-item {
            position: relative;
            padding-left: 3rem; /* Space for the line and dot */
            padding-bottom: 2.5rem;
        }
        
        .timeline-item:last-child {
            padding-bottom: 0;
        }

/* The dot on the timeline for each item */
        .timeline-item::before {
            content: '';
            position: absolute;
            left: 0;
            top: 4px;
            width: 16px;
            height: 16px;
            border-radius: 50%;
            background-color: var(--timeline-dot-bg);
            border: 3px solid var(--timeline-accent-color);
        }
        
        .timeline-item .item-header {
            margin-bottom: 0.5rem;
        }
        
        .timeline-item .item-date {
            font-weight: 600;
            color: var(--timeline-accent-color);
        }

.timeline-item .item-title {
            font-size: 1.25rem;
            font-weight: 600;
            margin: 0;
        }
        
        .timeline-item p {
            margin: 0;
            line-height: 1.6;
            color: var(--timeline-secondary-text-color);
        }

</style>
</head>
<body>

<div class="timeline-template">
    <header class="timeline-header">
        <h2>A Brief History of FloofCorp</h2>
    </header>

<ol class="timeline">
        <li class="timeline-item">
            <header class="item-header">
                <time datetime="2021-01-15" class="item-date">January 15, 2021</time>
                <h3 class="item-title">The Spark of an Idea</h3>
            </header>
            <p>Founder has a dream about a self-toasting toaster. FloofCorp is conceived on a napkin, which immediately catches fire.</p>
        </li>
         <li class="timeline-item">
            <header class="item-header">
                <time datetime="2022-06-01" class="item-date">June 1, 2022</time>
                <h3 class="item-title">Secured Seed Funding</h3>
            </header>
            <p>A team of venture capitalists, impressed by our confidence and lack of a business plan, invests heavily. We buy a foosball table.</p>
        </li>
        <li class="timeline-item">
            <header class="item-header">
                <time datetime="2023-03-20" class="item-date">March 20, 2023</time>
                <h3 class="item-title">The Great Pivot</h3>
            </header>
            <p>After the toaster incident, the company pivots to creating a cloud-based platform for organizing sock drawers. The foosball table remains.</p>
        </li>
        <li class="timeline-item">
            <header class="item-header">
                <time datetime="2024-05-10" class="item-date">May 10, 2024</time>
                <h3 class="item-title">Reached Unicorn Status</h3>
            </header>
            <p>The Sock Organizer 9000 becomes a viral sensation. We are valued at a billion dollars. The foosball table is now gold-plated.</p>
        </li>
    </ol>
</div>

</body>
</html>