<ul class="timeline">
      <li>
        <div class="timeline-start">1984</div>
        <div class="timeline-middle">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 20 20"
            fill="currentColor"
            class="h-5 w-5"
          >
            <path
              fill-rule="evenodd"
              d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z"
              clip-rule="evenodd"
            />
          </svg>
        </div>
        <div class="timeline-end timeline-box">First Macintosh computer</div>
        <hr />
      </li>
      <li>
        <hr />
        <div class="timeline-start">1998</div>
        <div class="timeline-middle">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 20 20"
            fill="currentColor"
            class="h-5 w-5"
          >
            <path
              fill-rule="evenodd"
              d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z"
              clip-rule="evenodd"
            />
          </svg>
        </div>
        <div class="timeline-end timeline-box">iMac</div>
        <hr />
      </li>
      <li>
        <hr />
        <div class="timeline-start">2001</div>
        <div class="timeline-middle">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 20 20"
            fill="currentColor"
            class="h-5 w-5"
          >
            <path
              fill-rule="evenodd"
              d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z"
              clip-rule="evenodd"
            />
          </svg>
        </div>
        <div class="timeline-end timeline-box">iPod</div>
        <hr />
      </li>
      <li>
        <hr />
        <div class="timeline-start">2007</div>
        <div class="timeline-middle">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 20 20"
            fill="currentColor"
            class="h-5 w-5"
          >
            <path
              fill-rule="evenodd"
              d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z"
              clip-rule="evenodd"
            />
          </svg>
        </div>
        <div class="timeline-end timeline-box">iPhone</div>
        <hr />
      </li>
      <li>
        <hr />
        <div class="timeline-start">2015</div>
        <div class="timeline-middle">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 20 20"
            fill="currentColor"
            class="h-5 w-5"
          >
            <path
              fill-rule="evenodd"
              d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z"
              clip-rule="evenodd"
            />
          </svg>
        </div>
        <div class="timeline-end timeline-box">Apple Watch</div>
      </li>
    </ul>

      .timeline {
        position: relative;
        display: flex;
      }
      .timeline hr {
        background-color: black;
      }
      .timeline svg {
        width: 1rem;
        height: 1rem;
      }
      :where(.timeline > li) {
        position: relative;
        display: grid;
        flex-shrink: 0;
        align-items: center;
        grid-template-rows: var(--timeline-row-start, minmax(0, 1fr)) auto var(
            --timeline-row-end,
            minmax(0, 1fr)
          );
        grid-template-columns: var(--timeline-col-start, minmax(0, 1fr)) auto var(
            --timeline-col-end,
            minmax(0, 1fr)
          );
      }
      .timeline > li > hr {
        width: 100%;
        border-width: 0px;
      }
      :where(.timeline > li > hr):first-child {
        grid-column-start: 1;
        grid-row-start: 2;
      }
      :where(.timeline > li > hr):last-child {
        grid-column-start: 3;
        grid-column-end: none;
        grid-row-start: 2;
        grid-row-end: auto;
      }
      .timeline hr {
        height: 0.25rem /* 4px */;
      }
      :where(.timeline hr) {
        --tw-bg-opacity: 1;
        background-color: var(
          --fallback-b3,
          oklch(var(--b3) / var(--tw-bg-opacity))
        );
      }
      :where(.timeline:has(.timeline-middle) hr):first-child {
        border-start-end-radius: var(--rounded-badge, 1.9rem /* 30.4px */);
        border-end-end-radius: var(--rounded-badge, 1.9rem /* 30.4px */);
        border-start-start-radius: 0px;
        border-end-start-radius: 0px;
      }
      :where(.timeline:has(.timeline-middle) hr):last-child {
        border-start-start-radius: var(--rounded-badge, 1.9rem /* 30.4px */);
        border-end-start-radius: var(--rounded-badge, 1.9rem /* 30.4px */);
        border-start-end-radius: 0px;
        border-end-end-radius: 0px;
      }
      :where(.timeline:not(:has(.timeline-middle)) :first-child hr:last-child) {
        border-start-start-radius: var(--rounded-badge, 1.9rem /* 30.4px */);
        border-end-start-radius: var(--rounded-badge, 1.9rem /* 30.4px */);
        border-start-end-radius: 0px;
        border-end-end-radius: 0px;
      }
      :where(.timeline:not(:has(.timeline-middle)) :last-child hr:first-child) {
        border-start-end-radius: var(--rounded-badge, 1.9rem /* 30.4px */);
        border-end-end-radius: var(--rounded-badge, 1.9rem /* 30.4px */);
        border-start-start-radius: 0px;
        border-end-start-radius: 0px;
      }

      .timeline-start {
        grid-column-start: 1;
        grid-column-end: 4;
        grid-row-start: 1;
        grid-row-end: 2;
        margin: 0.25rem /* 4px */;
        align-self: flex-end;
        justify-self: center;
      }
      .timeline-compact .timeline-start,
      .timeline-horizontal.timeline-compact .timeline-start {
        grid-column-start: 1;
        grid-column-end: 4;
        grid-row-start: 3;
        grid-row-end: 4;
        margin: 0.25rem /* 4px */;
        align-self: flex-start;
        justify-self: center;
      }
      .timeline-compact .timeline-start,
      .timeline-horizontal.timeline-compact .timeline-start {
        grid-column-start: 1;
        grid-column-end: 4;
        grid-row-start: 3;
        grid-row-end: 4;
        margin: 0.25rem /* 4px */;
        align-self: flex-start;
        justify-self: center;
      }
      .timeline-compact li:has(.timeline-start) .timeline-end,
      .timeline-horizontal.timeline-compact
        li:has(.timeline-start)
        .timeline-end {
        grid-column-start: none;
        grid-row-start: auto;
      }
      .timeline-compact li:has(.timeline-start) .timeline-end,
      .timeline-horizontal.timeline-compact
        li:has(.timeline-start)
        .timeline-end {
        grid-column-start: none;
        grid-row-start: auto;
      }
      .timeline-vertical.timeline-compact .timeline-start {
        grid-column-start: 3;
        grid-column-end: 4;
        grid-row-start: 1;
        grid-row-end: 4;
        align-self: center;
        justify-self: start;
      }
      .timeline-vertical.timeline-compact
        li:has(.timeline-start)
        .timeline-end {
        grid-column-start: auto;
        grid-row-start: none;
      }
      .timeline-vertical .timeline-start {
        grid-column-start: 1;
        grid-column-end: 2;
        grid-row-start: 1;
        grid-row-end: 4;
        align-self: center;
        justify-self: end;
      }
      .timeline-horizontal .timeline-start {
        grid-column-start: 1;
        grid-column-end: 4;
        grid-row-start: 1;
        grid-row-end: 2;
        align-self: flex-end;
        justify-self: center;
      }

      .timeline-middle {
        grid-column-start: 2;
        grid-row-start: 2;
      }
      :where(.timeline:has(.timeline-middle) hr):first-child {
        border-start-end-radius: var(--rounded-badge, 1.9rem /* 30.4px */);
        border-end-end-radius: var(--rounded-badge, 1.9rem /* 30.4px */);
        border-start-start-radius: 0px;
        border-end-start-radius: 0px;
      }
      :where(.timeline:has(.timeline-middle) hr):last-child {
        border-start-start-radius: var(--rounded-badge, 1.9rem /* 30.4px */);
        border-end-start-radius: var(--rounded-badge, 1.9rem /* 30.4px */);
        border-start-end-radius: 0px;
        border-end-end-radius: 0px;
      }
      :where(.timeline-vertical:has(.timeline-middle) > li > hr):first-child {
        border-bottom-right-radius: var(--rounded-badge, 1.9rem /* 30.4px */);
        border-bottom-left-radius: var(--rounded-badge, 1.9rem /* 30.4px */);
        border-top-left-radius: 0px;
        border-top-right-radius: 0px;
      }
      :where(.timeline-vertical:has(.timeline-middle) > li > hr):last-child {
        border-top-left-radius: var(--rounded-badge, 1.9rem /* 30.4px */);
        border-top-right-radius: var(--rounded-badge, 1.9rem /* 30.4px */);
        border-bottom-right-radius: 0px;
        border-bottom-left-radius: 0px;
      }
      :where(.timeline-horizontal:has(.timeline-middle) > li > hr):first-child {
        border-start-end-radius: var(--rounded-badge, 1.9rem /* 30.4px */);
        border-end-end-radius: var(--rounded-badge, 1.9rem /* 30.4px */);
        border-start-start-radius: 0px;
        border-end-start-radius: 0px;
      }
      :where(.timeline-horizontal:has(.timeline-middle) > li > hr):last-child {
        border-start-start-radius: var(--rounded-badge, 1.9rem /* 30.4px */);
        border-end-start-radius: var(--rounded-badge, 1.9rem /* 30.4px */);
        border-start-end-radius: 0px;
        border-end-end-radius: 0px;
      }

      .timeline-end {
        grid-column-start: 1;
        grid-column-end: 4;
        grid-row-start: 3;
        grid-row-end: 4;
        margin: 0.25rem /* 4px */;
        align-self: flex-start;
        justify-self: center;
      }
      .timeline-compact li:has(.timeline-start) .timeline-end,
      .timeline-horizontal.timeline-compact
        li:has(.timeline-start)
        .timeline-end {
        grid-column-start: none;
        grid-row-start: auto;
      }
      .timeline-compact li:has(.timeline-start) .timeline-end,
      .timeline-horizontal.timeline-compact
        li:has(.timeline-start)
        .timeline-end {
        grid-column-start: none;
        grid-row-start: auto;
      }
      .timeline-vertical.timeline-compact
        li:has(.timeline-start)
        .timeline-end {
        grid-column-start: auto;
        grid-row-start: none;
      }
      .timeline-vertical .timeline-end {
        grid-column-start: 3;
        grid-column-end: 4;
        grid-row-start: 1;
        grid-row-end: 4;
        align-self: center;
        justify-self: start;
      }
      .timeline-horizontal .timeline-end {
        grid-column-start: 1;
        grid-column-end: 4;
        grid-row-start: 3;
        grid-row-end: 4;
        align-self: flex-start;
        justify-self: center;
      }

      .timeline-box {
        border-radius: var(--rounded-box, 1rem);
        border-width: 1px;
        --tw-border-opacity: 1;
        border-color: var(
          --fallback-b3,
          oklch(var(--b3) / var(--tw-border-opacity))
        );
        --tw-bg-opacity: 1;
        background-color: var(
          --fallback-b1,
          oklch(var(--b1) / var(--tw-bg-opacity))
        );
        padding-left: 1rem;
        padding-right: 1rem;
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
        --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
        --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
        box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),
          var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
      }
    

<ul class="timeline">
  <li>
    <div class="timeline-middle">
      <svg
        xmlns="http://www.w3.org/2000/svg"
        viewBox="0 0 20 20"
        fill="currentColor"
        class="h-5 w-5">
        <path
          fill-rule="evenodd"
          d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z"
          clip-rule="evenodd" />
      </svg>
    </div>
    <div class="timeline-end timeline-box">First Macintosh computer</div>
    <hr />
  </li>
  <li>
    <hr />
    <div class="timeline-middle">
      <svg
        xmlns="http://www.w3.org/2000/svg"
        viewBox="0 0 20 20"
        fill="currentColor"
        class="h-5 w-5">
        <path
          fill-rule="evenodd"
          d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z"
          clip-rule="evenodd" />
      </svg>
    </div>
    <div class="timeline-end timeline-box">iMac</div>
    <hr />
  </li>
  <li>
    <hr />
    <div class="timeline-middle">
      <svg
        xmlns="http://www.w3.org/2000/svg"
        viewBox="0 0 20 20"
        fill="currentColor"
        class="h-5 w-5">
        <path
          fill-rule="evenodd"
          d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z"
          clip-rule="evenodd" />
      </svg>
    </div>
    <div class="timeline-end timeline-box">iPod</div>
    <hr />
  </li>
  <li>
    <hr />
    <div class="timeline-middle">
      <svg
        xmlns="http://www.w3.org/2000/svg"
        viewBox="0 0 20 20"
        fill="currentColor"
        class="h-5 w-5">
        <path
          fill-rule="evenodd"
          d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z"
          clip-rule="evenodd" />
      </svg>
    </div>
    <div class="timeline-end timeline-box">iPhone</div>
    <hr />
  </li>
  <li>
    <hr />
    <div class="timeline-middle">
      <svg
        xmlns="http://www.w3.org/2000/svg"
        viewBox="0 0 20 20"
        fill="currentColor"
        class="h-5 w-5">
        <path
          fill-rule="evenodd"
          d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z"
          clip-rule="evenodd" />
      </svg>
    </div>
    <div class="timeline-end timeline-box">Apple Watch</div>
  </li>
</ul>

      .timeline {
        position: relative;
        display: flex;
      }
      .timeline hr {
        background-color: black;
      }
      .timeline svg {
        width: 1rem;
        height: 1rem;
      }
      :where(.timeline > li) {
        position: relative;
        display: grid;
        flex-shrink: 0;
        align-items: center;
        grid-template-rows: var(--timeline-row-start, minmax(0, 1fr)) auto var(
            --timeline-row-end,
            minmax(0, 1fr)
          );
        grid-template-columns: var(--timeline-col-start, minmax(0, 1fr)) auto var(
            --timeline-col-end,
            minmax(0, 1fr)
          );
      }
      .timeline > li > hr {
        width: 100%;
        border-width: 0px;
      }
      :where(.timeline > li > hr):first-child {
        grid-column-start: 1;
        grid-row-start: 2;
      }
      :where(.timeline > li > hr):last-child {
        grid-column-start: 3;
        grid-column-end: none;
        grid-row-start: 2;
        grid-row-end: auto;
      }
      .timeline hr {
        height: 0.25rem /* 4px */;
      }
      :where(.timeline hr) {
        --tw-bg-opacity: 1;
        background-color: var(
          --fallback-b3,
          oklch(var(--b3) / var(--tw-bg-opacity))
        );
      }
      :where(.timeline:has(.timeline-middle) hr):first-child {
        border-start-end-radius: var(--rounded-badge, 1.9rem /* 30.4px */);
        border-end-end-radius: var(--rounded-badge, 1.9rem /* 30.4px */);
        border-start-start-radius: 0px;
        border-end-start-radius: 0px;
      }
      :where(.timeline:has(.timeline-middle) hr):last-child {
        border-start-start-radius: var(--rounded-badge, 1.9rem /* 30.4px */);
        border-end-start-radius: var(--rounded-badge, 1.9rem /* 30.4px */);
        border-start-end-radius: 0px;
        border-end-end-radius: 0px;
      }
      :where(.timeline:not(:has(.timeline-middle)) :first-child hr:last-child) {
        border-start-start-radius: var(--rounded-badge, 1.9rem /* 30.4px */);
        border-end-start-radius: var(--rounded-badge, 1.9rem /* 30.4px */);
        border-start-end-radius: 0px;
        border-end-end-radius: 0px;
      }
      :where(.timeline:not(:has(.timeline-middle)) :last-child hr:first-child) {
        border-start-end-radius: var(--rounded-badge, 1.9rem /* 30.4px */);
        border-end-end-radius: var(--rounded-badge, 1.9rem /* 30.4px */);
        border-start-start-radius: 0px;
        border-end-start-radius: 0px;
      }

      .timeline-start {
        grid-column-start: 1;
        grid-column-end: 4;
        grid-row-start: 1;
        grid-row-end: 2;
        margin: 0.25rem /* 4px */;
        align-self: flex-end;
        justify-self: center;
      }
      .timeline-compact .timeline-start,
      .timeline-horizontal.timeline-compact .timeline-start {
        grid-column-start: 1;
        grid-column-end: 4;
        grid-row-start: 3;
        grid-row-end: 4;
        margin: 0.25rem /* 4px */;
        align-self: flex-start;
        justify-self: center;
      }
      .timeline-compact .timeline-start,
      .timeline-horizontal.timeline-compact .timeline-start {
        grid-column-start: 1;
        grid-column-end: 4;
        grid-row-start: 3;
        grid-row-end: 4;
        margin: 0.25rem /* 4px */;
        align-self: flex-start;
        justify-self: center;
      }
      .timeline-compact li:has(.timeline-start) .timeline-end,
      .timeline-horizontal.timeline-compact
        li:has(.timeline-start)
        .timeline-end {
        grid-column-start: none;
        grid-row-start: auto;
      }
      .timeline-compact li:has(.timeline-start) .timeline-end,
      .timeline-horizontal.timeline-compact
        li:has(.timeline-start)
        .timeline-end {
        grid-column-start: none;
        grid-row-start: auto;
      }
      .timeline-vertical.timeline-compact .timeline-start {
        grid-column-start: 3;
        grid-column-end: 4;
        grid-row-start: 1;
        grid-row-end: 4;
        align-self: center;
        justify-self: start;
      }
      .timeline-vertical.timeline-compact
        li:has(.timeline-start)
        .timeline-end {
        grid-column-start: auto;
        grid-row-start: none;
      }
      .timeline-vertical .timeline-start {
        grid-column-start: 1;
        grid-column-end: 2;
        grid-row-start: 1;
        grid-row-end: 4;
        align-self: center;
        justify-self: end;
      }
      .timeline-horizontal .timeline-start {
        grid-column-start: 1;
        grid-column-end: 4;
        grid-row-start: 1;
        grid-row-end: 2;
        align-self: flex-end;
        justify-self: center;
      }

      .timeline-middle {
        grid-column-start: 2;
        grid-row-start: 2;
      }
      :where(.timeline:has(.timeline-middle) hr):first-child {
        border-start-end-radius: var(--rounded-badge, 1.9rem /* 30.4px */);
        border-end-end-radius: var(--rounded-badge, 1.9rem /* 30.4px */);
        border-start-start-radius: 0px;
        border-end-start-radius: 0px;
      }
      :where(.timeline:has(.timeline-middle) hr):last-child {
        border-start-start-radius: var(--rounded-badge, 1.9rem /* 30.4px */);
        border-end-start-radius: var(--rounded-badge, 1.9rem /* 30.4px */);
        border-start-end-radius: 0px;
        border-end-end-radius: 0px;
      }
      :where(.timeline-vertical:has(.timeline-middle) > li > hr):first-child {
        border-bottom-right-radius: var(--rounded-badge, 1.9rem /* 30.4px */);
        border-bottom-left-radius: var(--rounded-badge, 1.9rem /* 30.4px */);
        border-top-left-radius: 0px;
        border-top-right-radius: 0px;
      }
      :where(.timeline-vertical:has(.timeline-middle) > li > hr):last-child {
        border-top-left-radius: var(--rounded-badge, 1.9rem /* 30.4px */);
        border-top-right-radius: var(--rounded-badge, 1.9rem /* 30.4px */);
        border-bottom-right-radius: 0px;
        border-bottom-left-radius: 0px;
      }
      :where(.timeline-horizontal:has(.timeline-middle) > li > hr):first-child {
        border-start-end-radius: var(--rounded-badge, 1.9rem /* 30.4px */);
        border-end-end-radius: var(--rounded-badge, 1.9rem /* 30.4px */);
        border-start-start-radius: 0px;
        border-end-start-radius: 0px;
      }
      :where(.timeline-horizontal:has(.timeline-middle) > li > hr):last-child {
        border-start-start-radius: var(--rounded-badge, 1.9rem /* 30.4px */);
        border-end-start-radius: var(--rounded-badge, 1.9rem /* 30.4px */);
        border-start-end-radius: 0px;
        border-end-end-radius: 0px;
      }

      .timeline-end {
        grid-column-start: 1;
        grid-column-end: 4;
        grid-row-start: 3;
        grid-row-end: 4;
        margin: 0.25rem /* 4px */;
        align-self: flex-start;
        justify-self: center;
      }
      .timeline-compact li:has(.timeline-start) .timeline-end,
      .timeline-horizontal.timeline-compact
        li:has(.timeline-start)
        .timeline-end {
        grid-column-start: none;
        grid-row-start: auto;
      }
      .timeline-compact li:has(.timeline-start) .timeline-end,
      .timeline-horizontal.timeline-compact
        li:has(.timeline-start)
        .timeline-end {
        grid-column-start: none;
        grid-row-start: auto;
      }
      .timeline-vertical.timeline-compact
        li:has(.timeline-start)
        .timeline-end {
        grid-column-start: auto;
        grid-row-start: none;
      }
      .timeline-vertical .timeline-end {
        grid-column-start: 3;
        grid-column-end: 4;
        grid-row-start: 1;
        grid-row-end: 4;
        align-self: center;
        justify-self: start;
      }
      .timeline-horizontal .timeline-end {
        grid-column-start: 1;
        grid-column-end: 4;
        grid-row-start: 3;
        grid-row-end: 4;
        align-self: flex-start;
        justify-self: center;
      }

      .timeline-box {
        border-radius: var(--rounded-box, 1rem);
        border-width: 1px;
        --tw-border-opacity: 1;
        border-color: var(
          --fallback-b3,
          oklch(var(--b3) / var(--tw-border-opacity))
        );
        --tw-bg-opacity: 1;
        background-color: var(
          --fallback-b1,
          oklch(var(--b1) / var(--tw-bg-opacity))
        );
        padding-left: 1rem;
        padding-right: 1rem;
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
        --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
        --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
        box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),
          var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
      }
    

<ul class="timeline">
  <li>
    <div class="timeline-start timeline-box">First Macintosh computer</div>
    <div class="timeline-middle">
      <svg
        xmlns="http://www.w3.org/2000/svg"
        viewBox="0 0 20 20"
        fill="currentColor"
        class="h-5 w-5">
        <path
          fill-rule="evenodd"
          d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z"
          clip-rule="evenodd" />
      </svg>
    </div>
    <hr />
  </li>
  <li>
    <hr />
    <div class="timeline-middle">
      <svg
        xmlns="http://www.w3.org/2000/svg"
        viewBox="0 0 20 20"
        fill="currentColor"
        class="h-5 w-5">
        <path
          fill-rule="evenodd"
          d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z"
          clip-rule="evenodd" />
      </svg>
    </div>
    <div class="timeline-end timeline-box">iMac</div>
    <hr />
  </li>
  <li>
    <hr />
    <div class="timeline-start timeline-box">iPod</div>
    <div class="timeline-middle">
      <svg
        xmlns="http://www.w3.org/2000/svg"
        viewBox="0 0 20 20"
        fill="currentColor"
        class="h-5 w-5">
        <path
          fill-rule="evenodd"
          d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z"
          clip-rule="evenodd" />
      </svg>
    </div>
    <hr />
  </li>
  <li>
    <hr />
    <div class="timeline-middle">
      <svg
        xmlns="http://www.w3.org/2000/svg"
        viewBox="0 0 20 20"
        fill="currentColor"
        class="h-5 w-5">
        <path
          fill-rule="evenodd"
          d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z"
          clip-rule="evenodd" />
      </svg>
    </div>
    <div class="timeline-end timeline-box">iPhone</div>
    <hr />
  </li>
  <li>
    <hr />
    <div class="timeline-start timeline-box">Apple Watch</div>
    <div class="timeline-middle">
      <svg
        xmlns="http://www.w3.org/2000/svg"
        viewBox="0 0 20 20"
        fill="currentColor"
        class="h-5 w-5">
        <path
          fill-rule="evenodd"
          d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z"
          clip-rule="evenodd" />
      </svg>
    </div>
  </li>
</ul>

      .timeline {
        position: relative;
        display: flex;
      }
      .timeline hr {
        background-color: black;
      }
      .timeline svg {
        width: 1rem;
        height: 1rem;
      }
      :where(.timeline > li) {
        position: relative;
        display: grid;
        flex-shrink: 0;
        align-items: center;
        grid-template-rows: var(--timeline-row-start, minmax(0, 1fr)) auto var(
            --timeline-row-end,
            minmax(0, 1fr)
          );
        grid-template-columns: var(--timeline-col-start, minmax(0, 1fr)) auto var(
            --timeline-col-end,
            minmax(0, 1fr)
          );
      }
      .timeline > li > hr {
        width: 100%;
        border-width: 0px;
      }
      :where(.timeline > li > hr):first-child {
        grid-column-start: 1;
        grid-row-start: 2;
      }
      :where(.timeline > li > hr):last-child {
        grid-column-start: 3;
        grid-column-end: none;
        grid-row-start: 2;
        grid-row-end: auto;
      }
      .timeline hr {
        height: 0.25rem /* 4px */;
      }
      :where(.timeline hr) {
        --tw-bg-opacity: 1;
        background-color: var(
          --fallback-b3,
          oklch(var(--b3) / var(--tw-bg-opacity))
        );
      }
      :where(.timeline:has(.timeline-middle) hr):first-child {
        border-start-end-radius: var(--rounded-badge, 1.9rem /* 30.4px */);
        border-end-end-radius: var(--rounded-badge, 1.9rem /* 30.4px */);
        border-start-start-radius: 0px;
        border-end-start-radius: 0px;
      }
      :where(.timeline:has(.timeline-middle) hr):last-child {
        border-start-start-radius: var(--rounded-badge, 1.9rem /* 30.4px */);
        border-end-start-radius: var(--rounded-badge, 1.9rem /* 30.4px */);
        border-start-end-radius: 0px;
        border-end-end-radius: 0px;
      }
      :where(.timeline:not(:has(.timeline-middle)) :first-child hr:last-child) {
        border-start-start-radius: var(--rounded-badge, 1.9rem /* 30.4px */);
        border-end-start-radius: var(--rounded-badge, 1.9rem /* 30.4px */);
        border-start-end-radius: 0px;
        border-end-end-radius: 0px;
      }
      :where(.timeline:not(:has(.timeline-middle)) :last-child hr:first-child) {
        border-start-end-radius: var(--rounded-badge, 1.9rem /* 30.4px */);
        border-end-end-radius: var(--rounded-badge, 1.9rem /* 30.4px */);
        border-start-start-radius: 0px;
        border-end-start-radius: 0px;
      }

      .timeline-start {
        grid-column-start: 1;
        grid-column-end: 4;
        grid-row-start: 1;
        grid-row-end: 2;
        margin: 0.25rem /* 4px */;
        align-self: flex-end;
        justify-self: center;
      }
      .timeline-compact .timeline-start,
      .timeline-horizontal.timeline-compact .timeline-start {
        grid-column-start: 1;
        grid-column-end: 4;
        grid-row-start: 3;
        grid-row-end: 4;
        margin: 0.25rem /* 4px */;
        align-self: flex-start;
        justify-self: center;
      }
      .timeline-compact .timeline-start,
      .timeline-horizontal.timeline-compact .timeline-start {
        grid-column-start: 1;
        grid-column-end: 4;
        grid-row-start: 3;
        grid-row-end: 4;
        margin: 0.25rem /* 4px */;
        align-self: flex-start;
        justify-self: center;
      }
      .timeline-compact li:has(.timeline-start) .timeline-end,
      .timeline-horizontal.timeline-compact
        li:has(.timeline-start)
        .timeline-end {
        grid-column-start: none;
        grid-row-start: auto;
      }
      .timeline-compact li:has(.timeline-start) .timeline-end,
      .timeline-horizontal.timeline-compact
        li:has(.timeline-start)
        .timeline-end {
        grid-column-start: none;
        grid-row-start: auto;
      }
      .timeline-vertical.timeline-compact .timeline-start {
        grid-column-start: 3;
        grid-column-end: 4;
        grid-row-start: 1;
        grid-row-end: 4;
        align-self: center;
        justify-self: start;
      }
      .timeline-vertical.timeline-compact
        li:has(.timeline-start)
        .timeline-end {
        grid-column-start: auto;
        grid-row-start: none;
      }
      .timeline-vertical .timeline-start {
        grid-column-start: 1;
        grid-column-end: 2;
        grid-row-start: 1;
        grid-row-end: 4;
        align-self: center;
        justify-self: end;
      }
      .timeline-horizontal .timeline-start {
        grid-column-start: 1;
        grid-column-end: 4;
        grid-row-start: 1;
        grid-row-end: 2;
        align-self: flex-end;
        justify-self: center;
      }

      .timeline-middle {
        grid-column-start: 2;
        grid-row-start: 2;
      }
      :where(.timeline:has(.timeline-middle) hr):first-child {
        border-start-end-radius: var(--rounded-badge, 1.9rem /* 30.4px */);
        border-end-end-radius: var(--rounded-badge, 1.9rem /* 30.4px */);
        border-start-start-radius: 0px;
        border-end-start-radius: 0px;
      }
      :where(.timeline:has(.timeline-middle) hr):last-child {
        border-start-start-radius: var(--rounded-badge, 1.9rem /* 30.4px */);
        border-end-start-radius: var(--rounded-badge, 1.9rem /* 30.4px */);
        border-start-end-radius: 0px;
        border-end-end-radius: 0px;
      }
      :where(.timeline-vertical:has(.timeline-middle) > li > hr):first-child {
        border-bottom-right-radius: var(--rounded-badge, 1.9rem /* 30.4px */);
        border-bottom-left-radius: var(--rounded-badge, 1.9rem /* 30.4px */);
        border-top-left-radius: 0px;
        border-top-right-radius: 0px;
      }
      :where(.timeline-vertical:has(.timeline-middle) > li > hr):last-child {
        border-top-left-radius: var(--rounded-badge, 1.9rem /* 30.4px */);
        border-top-right-radius: var(--rounded-badge, 1.9rem /* 30.4px */);
        border-bottom-right-radius: 0px;
        border-bottom-left-radius: 0px;
      }
      :where(.timeline-horizontal:has(.timeline-middle) > li > hr):first-child {
        border-start-end-radius: var(--rounded-badge, 1.9rem /* 30.4px */);
        border-end-end-radius: var(--rounded-badge, 1.9rem /* 30.4px */);
        border-start-start-radius: 0px;
        border-end-start-radius: 0px;
      }
      :where(.timeline-horizontal:has(.timeline-middle) > li > hr):last-child {
        border-start-start-radius: var(--rounded-badge, 1.9rem /* 30.4px */);
        border-end-start-radius: var(--rounded-badge, 1.9rem /* 30.4px */);
        border-start-end-radius: 0px;
        border-end-end-radius: 0px;
      }

      .timeline-end {
        grid-column-start: 1;
        grid-column-end: 4;
        grid-row-start: 3;
        grid-row-end: 4;
        margin: 0.25rem /* 4px */;
        align-self: flex-start;
        justify-self: center;
      }
      .timeline-compact li:has(.timeline-start) .timeline-end,
      .timeline-horizontal.timeline-compact
        li:has(.timeline-start)
        .timeline-end {
        grid-column-start: none;
        grid-row-start: auto;
      }
      .timeline-compact li:has(.timeline-start) .timeline-end,
      .timeline-horizontal.timeline-compact
        li:has(.timeline-start)
        .timeline-end {
        grid-column-start: none;
        grid-row-start: auto;
      }
      .timeline-vertical.timeline-compact
        li:has(.timeline-start)
        .timeline-end {
        grid-column-start: auto;
        grid-row-start: none;
      }
      .timeline-vertical .timeline-end {
        grid-column-start: 3;
        grid-column-end: 4;
        grid-row-start: 1;
        grid-row-end: 4;
        align-self: center;
        justify-self: start;
      }
      .timeline-horizontal .timeline-end {
        grid-column-start: 1;
        grid-column-end: 4;
        grid-row-start: 3;
        grid-row-end: 4;
        align-self: flex-start;
        justify-self: center;
      }

      .timeline-box {
        border-radius: var(--rounded-box, 1rem);
        border-width: 1px;
        --tw-border-opacity: 1;
        border-color: var(
          --fallback-b3,
          oklch(var(--b3) / var(--tw-border-opacity))
        );
        --tw-bg-opacity: 1;
        background-color: var(
          --fallback-b1,
          oklch(var(--b1) / var(--tw-bg-opacity))
        );
        padding-left: 1rem;
        padding-right: 1rem;
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
        --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
        --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
        box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),
          var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
      }
    

<ul class="timeline timeline-vertical">
  <li>
    <div class="timeline-start">1984</div>
    <div class="timeline-middle">
      <svg
        xmlns="http://www.w3.org/2000/svg"
        viewBox="0 0 20 20"
        fill="currentColor"
        class="h-5 w-5">
        <path
          fill-rule="evenodd"
          d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z"
          clip-rule="evenodd" />
      </svg>
    </div>
    <div class="timeline-end timeline-box">First Macintosh computer</div>
    <hr />
  </li>
  <li>
    <hr />
    <div class="timeline-start">1998</div>
    <div class="timeline-middle">
      <svg
        xmlns="http://www.w3.org/2000/svg"
        viewBox="0 0 20 20"
        fill="currentColor"
        class="h-5 w-5">
        <path
          fill-rule="evenodd"
          d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z"
          clip-rule="evenodd" />
      </svg>
    </div>
    <div class="timeline-end timeline-box">iMac</div>
    <hr />
  </li>
  <li>
    <hr />
    <div class="timeline-start">2001</div>
    <div class="timeline-middle">
      <svg
        xmlns="http://www.w3.org/2000/svg"
        viewBox="0 0 20 20"
        fill="currentColor"
        class="h-5 w-5">
        <path
          fill-rule="evenodd"
          d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z"
          clip-rule="evenodd" />
      </svg>
    </div>
    <div class="timeline-end timeline-box">iPod</div>
    <hr />
  </li>
  <li>
    <hr />
    <div class="timeline-start">2007</div>
    <div class="timeline-middle">
      <svg
        xmlns="http://www.w3.org/2000/svg"
        viewBox="0 0 20 20"
        fill="currentColor"
        class="h-5 w-5">
        <path
          fill-rule="evenodd"
          d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z"
          clip-rule="evenodd" />
      </svg>
    </div>
    <div class="timeline-end timeline-box">iPhone</div>
    <hr />
  </li>
  <li>
    <hr />
    <div class="timeline-start">2015</div>
    <div class="timeline-middle">
      <svg
        xmlns="http://www.w3.org/2000/svg"
        viewBox="0 0 20 20"
        fill="currentColor"
        class="h-5 w-5">
        <path
          fill-rule="evenodd"
          d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z"
          clip-rule="evenodd" />
      </svg>
    </div>
    <div class="timeline-end timeline-box">Apple Watch</div>
  </li>
</ul>

      .timeline {
        position: relative;
        display: flex;
      }
      .timeline hr {
        background-color: black;
      }
      .timeline svg {
        width: 1rem;
        height: 1rem;
      }
      :where(.timeline > li) {
        position: relative;
        display: grid;
        flex-shrink: 0;
        align-items: center;
        grid-template-rows: var(--timeline-row-start, minmax(0, 1fr)) auto var(
            --timeline-row-end,
            minmax(0, 1fr)
          );
        grid-template-columns: var(--timeline-col-start, minmax(0, 1fr)) auto var(
            --timeline-col-end,
            minmax(0, 1fr)
          );
      }
      .timeline > li > hr {
        width: 100%;
        border-width: 0px;
      }
      :where(.timeline > li > hr):first-child {
        grid-column-start: 1;
        grid-row-start: 2;
      }
      :where(.timeline > li > hr):last-child {
        grid-column-start: 3;
        grid-column-end: none;
        grid-row-start: 2;
        grid-row-end: auto;
      }
      .timeline hr {
        height: 0.25rem /* 4px */;
      }
      :where(.timeline hr) {
        --tw-bg-opacity: 1;
        background-color: var(
          --fallback-b3,
          oklch(var(--b3) / var(--tw-bg-opacity))
        );
      }
      :where(.timeline:has(.timeline-middle) hr):first-child {
        border-start-end-radius: var(--rounded-badge, 1.9rem /* 30.4px */);
        border-end-end-radius: var(--rounded-badge, 1.9rem /* 30.4px */);
        border-start-start-radius: 0px;
        border-end-start-radius: 0px;
      }
      :where(.timeline:has(.timeline-middle) hr):last-child {
        border-start-start-radius: var(--rounded-badge, 1.9rem /* 30.4px */);
        border-end-start-radius: var(--rounded-badge, 1.9rem /* 30.4px */);
        border-start-end-radius: 0px;
        border-end-end-radius: 0px;
      }
      :where(.timeline:not(:has(.timeline-middle)) :first-child hr:last-child) {
        border-start-start-radius: var(--rounded-badge, 1.9rem /* 30.4px */);
        border-end-start-radius: var(--rounded-badge, 1.9rem /* 30.4px */);
        border-start-end-radius: 0px;
        border-end-end-radius: 0px;
      }
      :where(.timeline:not(:has(.timeline-middle)) :last-child hr:first-child) {
        border-start-end-radius: var(--rounded-badge, 1.9rem /* 30.4px */);
        border-end-end-radius: var(--rounded-badge, 1.9rem /* 30.4px */);
        border-start-start-radius: 0px;
        border-end-start-radius: 0px;
      }

      .timeline-start {
        grid-column-start: 1;
        grid-column-end: 4;
        grid-row-start: 1;
        grid-row-end: 2;
        margin: 0.25rem /* 4px */;
        align-self: flex-end;
        justify-self: center;
      }
      .timeline-compact .timeline-start,
      .timeline-horizontal.timeline-compact .timeline-start {
        grid-column-start: 1;
        grid-column-end: 4;
        grid-row-start: 3;
        grid-row-end: 4;
        margin: 0.25rem /* 4px */;
        align-self: flex-start;
        justify-self: center;
      }
      .timeline-compact .timeline-start,
      .timeline-horizontal.timeline-compact .timeline-start {
        grid-column-start: 1;
        grid-column-end: 4;
        grid-row-start: 3;
        grid-row-end: 4;
        margin: 0.25rem /* 4px */;
        align-self: flex-start;
        justify-self: center;
      }
      .timeline-compact li:has(.timeline-start) .timeline-end,
      .timeline-horizontal.timeline-compact
        li:has(.timeline-start)
        .timeline-end {
        grid-column-start: none;
        grid-row-start: auto;
      }
      .timeline-compact li:has(.timeline-start) .timeline-end,
      .timeline-horizontal.timeline-compact
        li:has(.timeline-start)
        .timeline-end {
        grid-column-start: none;
        grid-row-start: auto;
      }
      .timeline-vertical.timeline-compact .timeline-start {
        grid-column-start: 3;
        grid-column-end: 4;
        grid-row-start: 1;
        grid-row-end: 4;
        align-self: center;
        justify-self: start;
      }
      .timeline-vertical.timeline-compact
        li:has(.timeline-start)
        .timeline-end {
        grid-column-start: auto;
        grid-row-start: none;
      }
      .timeline-vertical .timeline-start {
        grid-column-start: 1;
        grid-column-end: 2;
        grid-row-start: 1;
        grid-row-end: 4;
        align-self: center;
        justify-self: end;
      }
      .timeline-horizontal .timeline-start {
        grid-column-start: 1;
        grid-column-end: 4;
        grid-row-start: 1;
        grid-row-end: 2;
        align-self: flex-end;
        justify-self: center;
      }

      .timeline-middle {
        grid-column-start: 2;
        grid-row-start: 2;
      }
      :where(.timeline:has(.timeline-middle) hr):first-child {
        border-start-end-radius: var(--rounded-badge, 1.9rem /* 30.4px */);
        border-end-end-radius: var(--rounded-badge, 1.9rem /* 30.4px */);
        border-start-start-radius: 0px;
        border-end-start-radius: 0px;
      }
      :where(.timeline:has(.timeline-middle) hr):last-child {
        border-start-start-radius: var(--rounded-badge, 1.9rem /* 30.4px */);
        border-end-start-radius: var(--rounded-badge, 1.9rem /* 30.4px */);
        border-start-end-radius: 0px;
        border-end-end-radius: 0px;
      }
      :where(.timeline-vertical:has(.timeline-middle) > li > hr):first-child {
        border-bottom-right-radius: var(--rounded-badge, 1.9rem /* 30.4px */);
        border-bottom-left-radius: var(--rounded-badge, 1.9rem /* 30.4px */);
        border-top-left-radius: 0px;
        border-top-right-radius: 0px;
      }
      :where(.timeline-vertical:has(.timeline-middle) > li > hr):last-child {
        border-top-left-radius: var(--rounded-badge, 1.9rem /* 30.4px */);
        border-top-right-radius: var(--rounded-badge, 1.9rem /* 30.4px */);
        border-bottom-right-radius: 0px;
        border-bottom-left-radius: 0px;
      }
      :where(.timeline-horizontal:has(.timeline-middle) > li > hr):first-child {
        border-start-end-radius: var(--rounded-badge, 1.9rem /* 30.4px */);
        border-end-end-radius: var(--rounded-badge, 1.9rem /* 30.4px */);
        border-start-start-radius: 0px;
        border-end-start-radius: 0px;
      }
      :where(.timeline-horizontal:has(.timeline-middle) > li > hr):last-child {
        border-start-start-radius: var(--rounded-badge, 1.9rem /* 30.4px */);
        border-end-start-radius: var(--rounded-badge, 1.9rem /* 30.4px */);
        border-start-end-radius: 0px;
        border-end-end-radius: 0px;
      }

      .timeline-end {
        grid-column-start: 1;
        grid-column-end: 4;
        grid-row-start: 3;
        grid-row-end: 4;
        margin: 0.25rem /* 4px */;
        align-self: flex-start;
        justify-self: center;
      }
      .timeline-compact li:has(.timeline-start) .timeline-end,
      .timeline-horizontal.timeline-compact
        li:has(.timeline-start)
        .timeline-end {
        grid-column-start: none;
        grid-row-start: auto;
      }
      .timeline-compact li:has(.timeline-start) .timeline-end,
      .timeline-horizontal.timeline-compact
        li:has(.timeline-start)
        .timeline-end {
        grid-column-start: none;
        grid-row-start: auto;
      }
      .timeline-vertical.timeline-compact
        li:has(.timeline-start)
        .timeline-end {
        grid-column-start: auto;
        grid-row-start: none;
      }
      .timeline-vertical .timeline-end {
        grid-column-start: 3;
        grid-column-end: 4;
        grid-row-start: 1;
        grid-row-end: 4;
        align-self: center;
        justify-self: start;
      }
      .timeline-horizontal .timeline-end {
        grid-column-start: 1;
        grid-column-end: 4;
        grid-row-start: 3;
        grid-row-end: 4;
        align-self: flex-start;
        justify-self: center;
      }

      .timeline-box {
        border-radius: var(--rounded-box, 1rem);
        border-width: 1px;
        --tw-border-opacity: 1;
        border-color: var(
          --fallback-b3,
          oklch(var(--b3) / var(--tw-border-opacity))
        );
        --tw-bg-opacity: 1;
        background-color: var(
          --fallback-b1,
          oklch(var(--b1) / var(--tw-bg-opacity))
        );
        padding-left: 1rem;
        padding-right: 1rem;
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
        --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
        --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
        box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),
          var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
      }
      .timeline-vertical {
        flex-direction: column;
      }
      .timeline-vertical.timeline-compact > li {
        --timeline-col-start: 0;
      }
      .timeline-vertical.timeline-compact .timeline-start {
        grid-column-start: 3;
        grid-column-end: 4;
        grid-row-start: 1;
        grid-row-end: 4;
        align-self: center;
        justify-self: start;
      }
      .timeline-vertical.timeline-compact
        li:has(.timeline-start)
        .timeline-end {
        grid-column-start: auto;
        grid-row-start: none;
      }
      :where(.timeline-vertical > li) {
        --timeline-row-start: minmax(0, 1fr);
        --timeline-row-end: minmax(0, 1fr);
        justify-items: center;
      }
      .timeline-vertical > li > hr {
        height: 100%;
      }
      :where(.timeline-vertical > li > hr):first-child {
        grid-column-start: 2;
        grid-row-start: 1;
      }
      :where(.timeline-vertical > li > hr):last-child {
        grid-column-start: 2;
        grid-column-end: auto;
        grid-row-start: 3;
        grid-row-end: none;
      }
      .timeline-vertical .timeline-start {
        grid-column-start: 1;
        grid-column-end: 2;
        grid-row-start: 1;
        grid-row-end: 4;
        align-self: center;
        justify-self: end;
      }
      .timeline-vertical .timeline-end {
        grid-column-start: 3;
        grid-column-end: 4;
        grid-row-start: 1;
        grid-row-end: 4;
        align-self: center;
        justify-self: start;
      }
      .timeline-vertical:where(.timeline-snap-icon) > li {
        --timeline-col-start: minmax(0, 1fr);
        --timeline-row-start: 0.5rem /* 8px */;
      }
      .timeline-vertical > li > hr {
        width: 0.25rem /* 4px */;
      }
      :where(.timeline-vertical:has(.timeline-middle) > li > hr):first-child {
        border-bottom-right-radius: var(--rounded-badge, 1.9rem /* 30.4px */);
        border-bottom-left-radius: var(--rounded-badge, 1.9rem /* 30.4px */);
        border-top-left-radius: 0px;
        border-top-right-radius: 0px;
      }
      :where(.timeline-vertical:has(.timeline-middle) > li > hr):last-child {
        border-top-left-radius: var(--rounded-badge, 1.9rem /* 30.4px */);
        border-top-right-radius: var(--rounded-badge, 1.9rem /* 30.4px */);
        border-bottom-right-radius: 0px;
        border-bottom-left-radius: 0px;
      }
      :where(
          .timeline-vertical:not(:has(.timeline-middle))
            :first-child
            > hr:last-child
        ) {
        border-top-left-radius: var(--rounded-badge, 1.9rem /* 30.4px */);
        border-top-right-radius: var(--rounded-badge, 1.9rem /* 30.4px */);
        border-bottom-right-radius: 0px;
        border-bottom-left-radius: 0px;
      }
      :where(
          .timeline-vertical:not(:has(.timeline-middle))
            :last-child
            > hr:first-child
        ) {
        border-bottom-right-radius: var(--rounded-badge, 1.9rem /* 30.4px */);
        border-bottom-left-radius: var(--rounded-badge, 1.9rem /* 30.4px */);
        border-top-left-radius: 0px;
        border-top-right-radius: 0px;
      }
    

<ul class="timeline timeline-vertical">
  <li>
    <div class="timeline-start timeline-box">First Macintosh computer</div>
    <div class="timeline-middle">
      <svg
        xmlns="http://www.w3.org/2000/svg"
        viewBox="0 0 20 20"
        fill="currentColor"
        class="h-5 w-5">
        <path
          fill-rule="evenodd"
          d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z"
          clip-rule="evenodd" />
      </svg>
    </div>
    <hr />
  </li>
  <li>
    <hr />
    <div class="timeline-middle">
      <svg
        xmlns="http://www.w3.org/2000/svg"
        viewBox="0 0 20 20"
        fill="currentColor"
        class="h-5 w-5">
        <path
          fill-rule="evenodd"
          d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z"
          clip-rule="evenodd" />
      </svg>
    </div>
    <div class="timeline-end timeline-box">iMac</div>
    <hr />
  </li>
  <li>
    <hr />
    <div class="timeline-start timeline-box">iPod</div>
    <div class="timeline-middle">
      <svg
        xmlns="http://www.w3.org/2000/svg"
        viewBox="0 0 20 20"
        fill="currentColor"
        class="h-5 w-5">
        <path
          fill-rule="evenodd"
          d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z"
          clip-rule="evenodd" />
      </svg>
    </div>
    <hr />
  </li>
  <li>
    <hr />
    <div class="timeline-middle">
      <svg
        xmlns="http://www.w3.org/2000/svg"
        viewBox="0 0 20 20"
        fill="currentColor"
        class="h-5 w-5">
        <path
          fill-rule="evenodd"
          d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z"
          clip-rule="evenodd" />
      </svg>
    </div>
    <div class="timeline-end timeline-box">iPhone</div>
    <hr />
  </li>
  <li>
    <hr />
    <div class="timeline-start timeline-box">Apple Watch</div>
    <div class="timeline-middle">
      <svg
        xmlns="http://www.w3.org/2000/svg"
        viewBox="0 0 20 20"
        fill="currentColor"
        class="h-5 w-5">
        <path
          fill-rule="evenodd"
          d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z"
          clip-rule="evenodd" />
      </svg>
    </div>
  </li>
</ul>

      .timeline {
        position: relative;
        display: flex;
      }
      .timeline hr {
        background-color: black;
      }
      .timeline svg {
        width: 1rem;
        height: 1rem;
      }
      :where(.timeline > li) {
        position: relative;
        display: grid;
        flex-shrink: 0;
        align-items: center;
        grid-template-rows: var(--timeline-row-start, minmax(0, 1fr)) auto var(
            --timeline-row-end,
            minmax(0, 1fr)
          );
        grid-template-columns: var(--timeline-col-start, minmax(0, 1fr)) auto var(
            --timeline-col-end,
            minmax(0, 1fr)
          );
      }
      .timeline > li > hr {
        width: 100%;
        border-width: 0px;
      }
      :where(.timeline > li > hr):first-child {
        grid-column-start: 1;
        grid-row-start: 2;
      }
      :where(.timeline > li > hr):last-child {
        grid-column-start: 3;
        grid-column-end: none;
        grid-row-start: 2;
        grid-row-end: auto;
      }
      .timeline hr {
        height: 0.25rem /* 4px */;
      }
      :where(.timeline hr) {
        --tw-bg-opacity: 1;
        background-color: var(
          --fallback-b3,
          oklch(var(--b3) / var(--tw-bg-opacity))
        );
      }
      :where(.timeline:has(.timeline-middle) hr):first-child {
        border-start-end-radius: var(--rounded-badge, 1.9rem /* 30.4px */);
        border-end-end-radius: var(--rounded-badge, 1.9rem /* 30.4px */);
        border-start-start-radius: 0px;
        border-end-start-radius: 0px;
      }
      :where(.timeline:has(.timeline-middle) hr):last-child {
        border-start-start-radius: var(--rounded-badge, 1.9rem /* 30.4px */);
        border-end-start-radius: var(--rounded-badge, 1.9rem /* 30.4px */);
        border-start-end-radius: 0px;
        border-end-end-radius: 0px;
      }
      :where(.timeline:not(:has(.timeline-middle)) :first-child hr:last-child) {
        border-start-start-radius: var(--rounded-badge, 1.9rem /* 30.4px */);
        border-end-start-radius: var(--rounded-badge, 1.9rem /* 30.4px */);
        border-start-end-radius: 0px;
        border-end-end-radius: 0px;
      }
      :where(.timeline:not(:has(.timeline-middle)) :last-child hr:first-child) {
        border-start-end-radius: var(--rounded-badge, 1.9rem /* 30.4px */);
        border-end-end-radius: var(--rounded-badge, 1.9rem /* 30.4px */);
        border-start-start-radius: 0px;
        border-end-start-radius: 0px;
      }

      .timeline-start {
        grid-column-start: 1;
        grid-column-end: 4;
        grid-row-start: 1;
        grid-row-end: 2;
        margin: 0.25rem /* 4px */;
        align-self: flex-end;
        justify-self: center;
      }
      .timeline-compact .timeline-start,
      .timeline-horizontal.timeline-compact .timeline-start {
        grid-column-start: 1;
        grid-column-end: 4;
        grid-row-start: 3;
        grid-row-end: 4;
        margin: 0.25rem /* 4px */;
        align-self: flex-start;
        justify-self: center;
      }
      .timeline-compact .timeline-start,
      .timeline-horizontal.timeline-compact .timeline-start {
        grid-column-start: 1;
        grid-column-end: 4;
        grid-row-start: 3;
        grid-row-end: 4;
        margin: 0.25rem /* 4px */;
        align-self: flex-start;
        justify-self: center;
      }
      .timeline-compact li:has(.timeline-start) .timeline-end,
      .timeline-horizontal.timeline-compact
        li:has(.timeline-start)
        .timeline-end {
        grid-column-start: none;
        grid-row-start: auto;
      }
      .timeline-compact li:has(.timeline-start) .timeline-end,
      .timeline-horizontal.timeline-compact
        li:has(.timeline-start)
        .timeline-end {
        grid-column-start: none;
        grid-row-start: auto;
      }
      .timeline-vertical.timeline-compact .timeline-start {
        grid-column-start: 3;
        grid-column-end: 4;
        grid-row-start: 1;
        grid-row-end: 4;
        align-self: center;
        justify-self: start;
      }
      .timeline-vertical.timeline-compact
        li:has(.timeline-start)
        .timeline-end {
        grid-column-start: auto;
        grid-row-start: none;
      }
      .timeline-vertical .timeline-start {
        grid-column-start: 1;
        grid-column-end: 2;
        grid-row-start: 1;
        grid-row-end: 4;
        align-self: center;
        justify-self: end;
      }
      .timeline-horizontal .timeline-start {
        grid-column-start: 1;
        grid-column-end: 4;
        grid-row-start: 1;
        grid-row-end: 2;
        align-self: flex-end;
        justify-self: center;
      }

      .timeline-middle {
        grid-column-start: 2;
        grid-row-start: 2;
      }
      :where(.timeline:has(.timeline-middle) hr):first-child {
        border-start-end-radius: var(--rounded-badge, 1.9rem /* 30.4px */);
        border-end-end-radius: var(--rounded-badge, 1.9rem /* 30.4px */);
        border-start-start-radius: 0px;
        border-end-start-radius: 0px;
      }
      :where(.timeline:has(.timeline-middle) hr):last-child {
        border-start-start-radius: var(--rounded-badge, 1.9rem /* 30.4px */);
        border-end-start-radius: var(--rounded-badge, 1.9rem /* 30.4px */);
        border-start-end-radius: 0px;
        border-end-end-radius: 0px;
      }
      :where(.timeline-vertical:has(.timeline-middle) > li > hr):first-child {
        border-bottom-right-radius: var(--rounded-badge, 1.9rem /* 30.4px */);
        border-bottom-left-radius: var(--rounded-badge, 1.9rem /* 30.4px */);
        border-top-left-radius: 0px;
        border-top-right-radius: 0px;
      }
      :where(.timeline-vertical:has(.timeline-middle) > li > hr):last-child {
        border-top-left-radius: var(--rounded-badge, 1.9rem /* 30.4px */);
        border-top-right-radius: var(--rounded-badge, 1.9rem /* 30.4px */);
        border-bottom-right-radius: 0px;
        border-bottom-left-radius: 0px;
      }
      :where(.timeline-horizontal:has(.timeline-middle) > li > hr):first-child {
        border-start-end-radius: var(--rounded-badge, 1.9rem /* 30.4px */);
        border-end-end-radius: var(--rounded-badge, 1.9rem /* 30.4px */);
        border-start-start-radius: 0px;
        border-end-start-radius: 0px;
      }
      :where(.timeline-horizontal:has(.timeline-middle) > li > hr):last-child {
        border-start-start-radius: var(--rounded-badge, 1.9rem /* 30.4px */);
        border-end-start-radius: var(--rounded-badge, 1.9rem /* 30.4px */);
        border-start-end-radius: 0px;
        border-end-end-radius: 0px;
      }

      .timeline-end {
        grid-column-start: 1;
        grid-column-end: 4;
        grid-row-start: 3;
        grid-row-end: 4;
        margin: 0.25rem /* 4px */;
        align-self: flex-start;
        justify-self: center;
      }
      .timeline-compact li:has(.timeline-start) .timeline-end,
      .timeline-horizontal.timeline-compact
        li:has(.timeline-start)
        .timeline-end {
        grid-column-start: none;
        grid-row-start: auto;
      }
      .timeline-compact li:has(.timeline-start) .timeline-end,
      .timeline-horizontal.timeline-compact
        li:has(.timeline-start)
        .timeline-end {
        grid-column-start: none;
        grid-row-start: auto;
      }
      .timeline-vertical.timeline-compact
        li:has(.timeline-start)
        .timeline-end {
        grid-column-start: auto;
        grid-row-start: none;
      }
      .timeline-vertical .timeline-end {
        grid-column-start: 3;
        grid-column-end: 4;
        grid-row-start: 1;
        grid-row-end: 4;
        align-self: center;
        justify-self: start;
      }
      .timeline-horizontal .timeline-end {
        grid-column-start: 1;
        grid-column-end: 4;
        grid-row-start: 3;
        grid-row-end: 4;
        align-self: flex-start;
        justify-self: center;
      }

      .timeline-box {
        border-radius: var(--rounded-box, 1rem);
        border-width: 1px;
        --tw-border-opacity: 1;
        border-color: var(
          --fallback-b3,
          oklch(var(--b3) / var(--tw-border-opacity))
        );
        --tw-bg-opacity: 1;
        background-color: var(
          --fallback-b1,
          oklch(var(--b1) / var(--tw-bg-opacity))
        );
        padding-left: 1rem;
        padding-right: 1rem;
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
        --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
        --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
        box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),
          var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
      }
      .timeline-vertical {
        flex-direction: column;
      }
      .timeline-vertical.timeline-compact > li {
        --timeline-col-start: 0;
      }
      .timeline-vertical.timeline-compact .timeline-start {
        grid-column-start: 3;
        grid-column-end: 4;
        grid-row-start: 1;
        grid-row-end: 4;
        align-self: center;
        justify-self: start;
      }
      .timeline-vertical.timeline-compact
        li:has(.timeline-start)
        .timeline-end {
        grid-column-start: auto;
        grid-row-start: none;
      }
      :where(.timeline-vertical > li) {
        --timeline-row-start: minmax(0, 1fr);
        --timeline-row-end: minmax(0, 1fr);
        justify-items: center;
      }
      .timeline-vertical > li > hr {
        height: 100%;
      }
      :where(.timeline-vertical > li > hr):first-child {
        grid-column-start: 2;
        grid-row-start: 1;
      }
      :where(.timeline-vertical > li > hr):last-child {
        grid-column-start: 2;
        grid-column-end: auto;
        grid-row-start: 3;
        grid-row-end: none;
      }
      .timeline-vertical .timeline-start {
        grid-column-start: 1;
        grid-column-end: 2;
        grid-row-start: 1;
        grid-row-end: 4;
        align-self: center;
        justify-self: end;
      }
      .timeline-vertical .timeline-end {
        grid-column-start: 3;
        grid-column-end: 4;
        grid-row-start: 1;
        grid-row-end: 4;
        align-self: center;
        justify-self: start;
      }
      .timeline-vertical:where(.timeline-snap-icon) > li {
        --timeline-col-start: minmax(0, 1fr);
        --timeline-row-start: 0.5rem /* 8px */;
      }
      .timeline-vertical > li > hr {
        width: 0.25rem /* 4px */;
      }
      :where(.timeline-vertical:has(.timeline-middle) > li > hr):first-child {
        border-bottom-right-radius: var(--rounded-badge, 1.9rem /* 30.4px */);
        border-bottom-left-radius: var(--rounded-badge, 1.9rem /* 30.4px */);
        border-top-left-radius: 0px;
        border-top-right-radius: 0px;
      }
      :where(.timeline-vertical:has(.timeline-middle) > li > hr):last-child {
        border-top-left-radius: var(--rounded-badge, 1.9rem /* 30.4px */);
        border-top-right-radius: var(--rounded-badge, 1.9rem /* 30.4px */);
        border-bottom-right-radius: 0px;
        border-bottom-left-radius: 0px;
      }
      :where(
          .timeline-vertical:not(:has(.timeline-middle))
            :first-child
            > hr:last-child
        ) {
        border-top-left-radius: var(--rounded-badge, 1.9rem /* 30.4px */);
        border-top-right-radius: var(--rounded-badge, 1.9rem /* 30.4px */);
        border-bottom-right-radius: 0px;
        border-bottom-left-radius: 0px;
      }
      :where(
          .timeline-vertical:not(:has(.timeline-middle))
            :last-child
            > hr:first-child
        ) {
        border-bottom-right-radius: var(--rounded-badge, 1.9rem /* 30.4px */);
        border-bottom-left-radius: var(--rounded-badge, 1.9rem /* 30.4px */);
        border-top-left-radius: 0px;
        border-top-right-radius: 0px;
      }
    

<ul class="timeline timeline-snap-icon max-md:timeline-compact timeline-vertical">
  <li>
    <div class="timeline-middle">
      <svg
        xmlns="http://www.w3.org/2000/svg"
        viewBox="0 0 20 20"
        fill="currentColor"
        class="h-5 w-5">
        <path
          fill-rule="evenodd"
          d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z"
          clip-rule="evenodd" />
      </svg>
    </div>
    <div class="timeline-start mb-10 md:text-end">
      <time class="font-mono italic">1984</time>
      <div class="text-lg font-black">First Macintosh computer</div>
      The Apple Macintosh—later rebranded as the Macintosh 128K—is the original Apple Macintosh
      personal computer. It played a pivotal role in establishing desktop publishing as a general
      office function. The motherboard, a 9 in (23 cm) CRT monitor, and a floppy drive were housed
      in a beige case with integrated carrying handle; it came with a keyboard and single-button
      mouse.
    </div>
    <hr />
  </li>
  <li>
    <hr />
    <div class="timeline-middle">
      <svg
        xmlns="http://www.w3.org/2000/svg"
        viewBox="0 0 20 20"
        fill="currentColor"
        class="h-5 w-5">
        <path
          fill-rule="evenodd"
          d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z"
          clip-rule="evenodd" />
      </svg>
    </div>
    <div class="timeline-end mb-10">
      <time class="font-mono italic">1998</time>
      <div class="text-lg font-black">iMac</div>
      iMac is a family of all-in-one Mac desktop computers designed and built by Apple Inc. It has
      been the primary part of Apple's consumer desktop offerings since its debut in August 1998,
      and has evolved through seven distinct forms
    </div>
    <hr />
  </li>
  <li>
    <hr />
    <div class="timeline-middle">
      <svg
        xmlns="http://www.w3.org/2000/svg"
        viewBox="0 0 20 20"
        fill="currentColor"
        class="h-5 w-5">
        <path
          fill-rule="evenodd"
          d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z"
          clip-rule="evenodd" />
      </svg>
    </div>
    <div class="timeline-start mb-10 md:text-end">
      <time class="font-mono italic">2001</time>
      <div class="text-lg font-black">iPod</div>
      The iPod is a discontinued series of portable media players and multi-purpose mobile devices
      designed and marketed by Apple Inc. The first version was released on October 23, 2001, about
      8+1⁄2 months after the Macintosh version of iTunes was released. Apple sold an estimated 450
      million iPod products as of 2022. Apple discontinued the iPod product line on May 10, 2022. At
      over 20 years, the iPod brand is the oldest to be discontinued by Apple
    </div>
    <hr />
  </li>
  <li>
    <hr />
    <div class="timeline-middle">
      <svg
        xmlns="http://www.w3.org/2000/svg"
        viewBox="0 0 20 20"
        fill="currentColor"
        class="h-5 w-5">
        <path
          fill-rule="evenodd"
          d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z"
          clip-rule="evenodd" />
      </svg>
    </div>
    <div class="timeline-end mb-10">
      <time class="font-mono italic">2007</time>
      <div class="text-lg font-black">iPhone</div>
      iPhone is a line of smartphones produced by Apple Inc. that use Apple's own iOS mobile
      operating system. The first-generation iPhone was announced by then-Apple CEO Steve Jobs on
      January 9, 2007. Since then, Apple has annually released new iPhone models and iOS updates. As
      of November 1, 2018, more than 2.2 billion iPhones had been sold. As of 2022, the iPhone
      accounts for 15.6% of global smartphone market share
    </div>
    <hr />
  </li>
  <li>
    <hr />
    <div class="timeline-middle">
      <svg
        xmlns="http://www.w3.org/2000/svg"
        viewBox="0 0 20 20"
        fill="currentColor"
        class="h-5 w-5">
        <path
          fill-rule="evenodd"
          d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z"
          clip-rule="evenodd" />
      </svg>
    </div>
    <div class="timeline-start mb-10 md:text-end">
      <time class="font-mono italic">2015</time>
      <div class="text-lg font-black">Apple Watch</div>
      The Apple Watch is a line of smartwatches produced by Apple Inc. It incorporates fitness
      tracking, health-oriented capabilities, and wireless telecommunication, and integrates with
      iOS and other Apple products and services
    </div>
  </li>
</ul>

      .timeline .mb-10 {
        margin-bottom: 2.5rem /* 40px */;
      }
      @media (min-width: 768px) {
        .timeline .md:text-end {
          text-align: end;
        }
      }
      .timeline .italic {
        font-style: italic;
      }
      .timeline .font-mono {
        font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
          "Liberation Mono", "Courier New", monospace;
      }
      .timeline .text-lg {
        font-size: 1.125rem /* 18px */;
        line-height: 1.75rem /* 28px */;
      }
      .timeline .font-black {
        font-weight: 900;
      }

      .timeline {
        position: relative;
        display: flex;
      }
      .timeline hr {
        background-color: black;
      }
      .timeline svg {
        width: 1rem;
        height: 1rem;
      }
      :where(.timeline > li) {
        position: relative;
        display: grid;
        flex-shrink: 0;
        align-items: center;
        grid-template-rows: var(--timeline-row-start, minmax(0, 1fr)) auto var(
            --timeline-row-end,
            minmax(0, 1fr)
          );
        grid-template-columns: var(--timeline-col-start, minmax(0, 1fr)) auto var(
            --timeline-col-end,
            minmax(0, 1fr)
          );
      }
      .timeline > li > hr {
        width: 100%;
        border-width: 0px;
      }
      :where(.timeline > li > hr):first-child {
        grid-column-start: 1;
        grid-row-start: 2;
      }
      :where(.timeline > li > hr):last-child {
        grid-column-start: 3;
        grid-column-end: none;
        grid-row-start: 2;
        grid-row-end: auto;
      }
      .timeline hr {
        height: 0.25rem /* 4px */;
      }
      :where(.timeline hr) {
        --tw-bg-opacity: 1;
        background-color: var(
          --fallback-b3,
          oklch(var(--b3) / var(--tw-bg-opacity))
        );
      }
      :where(.timeline:has(.timeline-middle) hr):first-child {
        border-start-end-radius: var(--rounded-badge, 1.9rem /* 30.4px */);
        border-end-end-radius: var(--rounded-badge, 1.9rem /* 30.4px */);
        border-start-start-radius: 0px;
        border-end-start-radius: 0px;
      }
      :where(.timeline:has(.timeline-middle) hr):last-child {
        border-start-start-radius: var(--rounded-badge, 1.9rem /* 30.4px */);
        border-end-start-radius: var(--rounded-badge, 1.9rem /* 30.4px */);
        border-start-end-radius: 0px;
        border-end-end-radius: 0px;
      }
      :where(.timeline:not(:has(.timeline-middle)) :first-child hr:last-child) {
        border-start-start-radius: var(--rounded-badge, 1.9rem /* 30.4px */);
        border-end-start-radius: var(--rounded-badge, 1.9rem /* 30.4px */);
        border-start-end-radius: 0px;
        border-end-end-radius: 0px;
      }
      :where(.timeline:not(:has(.timeline-middle)) :last-child hr:first-child) {
        border-start-end-radius: var(--rounded-badge, 1.9rem /* 30.4px */);
        border-end-end-radius: var(--rounded-badge, 1.9rem /* 30.4px */);
        border-start-start-radius: 0px;
        border-end-start-radius: 0px;
      }

      .timeline-start {
        grid-column-start: 1;
        grid-column-end: 4;
        grid-row-start: 1;
        grid-row-end: 2;
        margin: 0.25rem /* 4px */;
        align-self: flex-end;
        justify-self: center;
      }
      .timeline-compact .timeline-start,
      .timeline-horizontal.timeline-compact .timeline-start {
        grid-column-start: 1;
        grid-column-end: 4;
        grid-row-start: 3;
        grid-row-end: 4;
        margin: 0.25rem /* 4px */;
        align-self: flex-start;
        justify-self: center;
      }
      .timeline-compact .timeline-start,
      .timeline-horizontal.timeline-compact .timeline-start {
        grid-column-start: 1;
        grid-column-end: 4;
        grid-row-start: 3;
        grid-row-end: 4;
        margin: 0.25rem /* 4px */;
        align-self: flex-start;
        justify-self: center;
      }
      .timeline-compact li:has(.timeline-start) .timeline-end,
      .timeline-horizontal.timeline-compact
        li:has(.timeline-start)
        .timeline-end {
        grid-column-start: none;
        grid-row-start: auto;
      }
      .timeline-compact li:has(.timeline-start) .timeline-end,
      .timeline-horizontal.timeline-compact
        li:has(.timeline-start)
        .timeline-end {
        grid-column-start: none;
        grid-row-start: auto;
      }
      .timeline-vertical.timeline-compact .timeline-start {
        grid-column-start: 3;
        grid-column-end: 4;
        grid-row-start: 1;
        grid-row-end: 4;
        align-self: center;
        justify-self: start;
      }
      .timeline-vertical.timeline-compact
        li:has(.timeline-start)
        .timeline-end {
        grid-column-start: auto;
        grid-row-start: none;
      }
      .timeline-vertical .timeline-start {
        grid-column-start: 1;
        grid-column-end: 2;
        grid-row-start: 1;
        grid-row-end: 4;
        align-self: center;
        justify-self: end;
      }
      .timeline-horizontal .timeline-start {
        grid-column-start: 1;
        grid-column-end: 4;
        grid-row-start: 1;
        grid-row-end: 2;
        align-self: flex-end;
        justify-self: center;
      }

      .timeline-middle {
        grid-column-start: 2;
        grid-row-start: 2;
      }
      :where(.timeline:has(.timeline-middle) hr):first-child {
        border-start-end-radius: var(--rounded-badge, 1.9rem /* 30.4px */);
        border-end-end-radius: var(--rounded-badge, 1.9rem /* 30.4px */);
        border-start-start-radius: 0px;
        border-end-start-radius: 0px;
      }
      :where(.timeline:has(.timeline-middle) hr):last-child {
        border-start-start-radius: var(--rounded-badge, 1.9rem /* 30.4px */);
        border-end-start-radius: var(--rounded-badge, 1.9rem /* 30.4px */);
        border-start-end-radius: 0px;
        border-end-end-radius: 0px;
      }
      :where(.timeline-vertical:has(.timeline-middle) > li > hr):first-child {
        border-bottom-right-radius: var(--rounded-badge, 1.9rem /* 30.4px */);
        border-bottom-left-radius: var(--rounded-badge, 1.9rem /* 30.4px */);
        border-top-left-radius: 0px;
        border-top-right-radius: 0px;
      }
      :where(.timeline-vertical:has(.timeline-middle) > li > hr):last-child {
        border-top-left-radius: var(--rounded-badge, 1.9rem /* 30.4px */);
        border-top-right-radius: var(--rounded-badge, 1.9rem /* 30.4px */);
        border-bottom-right-radius: 0px;
        border-bottom-left-radius: 0px;
      }
      :where(.timeline-horizontal:has(.timeline-middle) > li > hr):first-child {
        border-start-end-radius: var(--rounded-badge, 1.9rem /* 30.4px */);
        border-end-end-radius: var(--rounded-badge, 1.9rem /* 30.4px */);
        border-start-start-radius: 0px;
        border-end-start-radius: 0px;
      }
      :where(.timeline-horizontal:has(.timeline-middle) > li > hr):last-child {
        border-start-start-radius: var(--rounded-badge, 1.9rem /* 30.4px */);
        border-end-start-radius: var(--rounded-badge, 1.9rem /* 30.4px */);
        border-start-end-radius: 0px;
        border-end-end-radius: 0px;
      }

      .timeline-end {
        grid-column-start: 1;
        grid-column-end: 4;
        grid-row-start: 3;
        grid-row-end: 4;
        margin: 0.25rem /* 4px */;
        align-self: flex-start;
        justify-self: center;
      }
      .timeline-compact li:has(.timeline-start) .timeline-end,
      .timeline-horizontal.timeline-compact
        li:has(.timeline-start)
        .timeline-end {
        grid-column-start: none;
        grid-row-start: auto;
      }
      .timeline-compact li:has(.timeline-start) .timeline-end,
      .timeline-horizontal.timeline-compact
        li:has(.timeline-start)
        .timeline-end {
        grid-column-start: none;
        grid-row-start: auto;
      }
      .timeline-vertical.timeline-compact
        li:has(.timeline-start)
        .timeline-end {
        grid-column-start: auto;
        grid-row-start: none;
      }
      .timeline-vertical .timeline-end {
        grid-column-start: 3;
        grid-column-end: 4;
        grid-row-start: 1;
        grid-row-end: 4;
        align-self: center;
        justify-self: start;
      }
      .timeline-horizontal .timeline-end {
        grid-column-start: 1;
        grid-column-end: 4;
        grid-row-start: 3;
        grid-row-end: 4;
        align-self: flex-start;
        justify-self: center;
      }

      .timeline-box {
        border-radius: var(--rounded-box, 1rem);
        border-width: 1px;
        --tw-border-opacity: 1;
        border-color: var(
          --fallback-b3,
          oklch(var(--b3) / var(--tw-border-opacity))
        );
        --tw-bg-opacity: 1;
        background-color: var(
          --fallback-b1,
          oklch(var(--b1) / var(--tw-bg-opacity))
        );
        padding-left: 1rem;
        padding-right: 1rem;
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
        --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
        --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
        box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),
          var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
      }
      .timeline-vertical {
        flex-direction: column;
      }
      .timeline-vertical.timeline-compact > li {
        --timeline-col-start: 0;
      }
      .timeline-vertical.timeline-compact .timeline-start {
        grid-column-start: 3;
        grid-column-end: 4;
        grid-row-start: 1;
        grid-row-end: 4;
        align-self: center;
        justify-self: start;
      }
      .timeline-vertical.timeline-compact
        li:has(.timeline-start)
        .timeline-end {
        grid-column-start: auto;
        grid-row-start: none;
      }
      :where(.timeline-vertical > li) {
        --timeline-row-start: minmax(0, 1fr);
        --timeline-row-end: minmax(0, 1fr);
        justify-items: center;
      }
      .timeline-vertical > li > hr {
        height: 100%;
      }
      :where(.timeline-vertical > li > hr):first-child {
        grid-column-start: 2;
        grid-row-start: 1;
      }
      :where(.timeline-vertical > li > hr):last-child {
        grid-column-start: 2;
        grid-column-end: auto;
        grid-row-start: 3;
        grid-row-end: none;
      }
      .timeline-vertical .timeline-start {
        grid-column-start: 1;
        grid-column-end: 2;
        grid-row-start: 1;
        grid-row-end: 4;
        align-self: center;
        justify-self: end;
      }
      .timeline-vertical .timeline-end {
        grid-column-start: 3;
        grid-column-end: 4;
        grid-row-start: 1;
        grid-row-end: 4;
        align-self: center;
        justify-self: start;
      }
      .timeline-vertical:where(.timeline-snap-icon) > li {
        --timeline-col-start: minmax(0, 1fr);
        --timeline-row-start: 0.5rem /* 8px */;
      }
      .timeline-vertical > li > hr {
        width: 0.25rem /* 4px */;
      }
      :where(.timeline-vertical:has(.timeline-middle) > li > hr):first-child {
        border-bottom-right-radius: var(--rounded-badge, 1.9rem /* 30.4px */);
        border-bottom-left-radius: var(--rounded-badge, 1.9rem /* 30.4px */);
        border-top-left-radius: 0px;
        border-top-right-radius: 0px;
      }
      :where(.timeline-vertical:has(.timeline-middle) > li > hr):last-child {
        border-top-left-radius: var(--rounded-badge, 1.9rem /* 30.4px */);
        border-top-right-radius: var(--rounded-badge, 1.9rem /* 30.4px */);
        border-bottom-right-radius: 0px;
        border-bottom-left-radius: 0px;
      }
      :where(
          .timeline-vertical:not(:has(.timeline-middle))
            :first-child
            > hr:last-child
        ) {
        border-top-left-radius: var(--rounded-badge, 1.9rem /* 30.4px */);
        border-top-right-radius: var(--rounded-badge, 1.9rem /* 30.4px */);
        border-bottom-right-radius: 0px;
        border-bottom-left-radius: 0px;
      }
      :where(
          .timeline-vertical:not(:has(.timeline-middle))
            :last-child
            > hr:first-child
        ) {
        border-bottom-right-radius: var(--rounded-badge, 1.9rem /* 30.4px */);
        border-bottom-left-radius: var(--rounded-badge, 1.9rem /* 30.4px */);
        border-top-left-radius: 0px;
        border-top-right-radius: 0px;
      }