Tailwind CSS Timelines Blocks

Timelines

Timelines for histories, order status, receipts, payment updates, and chronological storytelling.

History Timeline Slider Pro

Slides keep a longer timeline compact and bring one milestone into focus at a time.

<div class="overflow-hidden bg-background">
                      <div class="max-w-5xl px-4 xl:px-0 mx-auto">
                        
                        <div data-hs-carousel='{
                          "loadingClasses": "opacity-0",
                          "slidesQty": {
                            "xs": 1,
                            "sm": 2,
                            "lg": 2
                          },
                          "isDraggable": true
                        }' class="relative">
  
                          <div class="hs-carousel w-full min-h-57">
                            <div class="hs-carousel-body flex flex-nowrap opacity-0 transition-transform duration-700 cursor-grab hs-carousel-dragging:transition-none hs-carousel-dragging:cursor-grabbing">
                              
                              <div class="hs-carousel-slide">
                                <div class="pt-10 pe-10 relative before:absolute before:top-5 before:inset-s-0 before:w-full before:border before:border-line-2 after:absolute after:top-4 after:inset-s-0 after:size-2.5 after:bg-primary after:rounded-full">
                                  <span class="block text-primary text-4xl">
                                    2020
                                  </span>
                                  <p class="mt-2 font-semibold text-xl text-foreground">
                                    Preline is born
                                  </p>
                                  <p class="mt-5 text-muted-foreground-1">
                                    Initial concept for Preline begins, inspired by the need for a streamlined UI component library built on Tailwind CSS.
                                  </p>
                                </div>
                              </div>

<div class="hs-carousel-slide">
                                <div class="pt-10 pe-10 relative before:absolute before:top-5 before:inset-s-0 before:w-full before:border before:border-line-2 after:absolute after:top-4 after:inset-s-0 after:size-2.5 after:bg-primary after:rounded-full">
                                  <span class="block text-primary text-4xl">
                                    2025
                                  </span>
                                  <p class="mt-2 font-semibold text-xl text-foreground">
                                    Future vision
                                  </p>
                                  <p class="mt-5 text-muted-foreground-1">
                                    Planning next-generation features and expanding our global presence to serve more clients worldwide.
                                  </p>
                                </div>
                              </div>
                              
                            </div>
                          </div>
  
                          
                          <div class="flex justify-end items-center gap-2">
                            <button type="button" class="hs-carousel-prev hs-carousel-disabled:opacity-50 hs-carousel-disabled:pointer-events-none inline-flex justify-center items-center w-12 h-8 bg-layer border border-layer-line text-muted-foreground-1 rounded-full hover:border-line-3 focus:outline-hidden focus:border-line-3">
                              <span class="text-2xl" aria-hidden="true">
                                <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m12 19-7-7 7-7"/><path d="M19 12H5"/></svg>
                              </span>
                              <span class="sr-only">Previous</span>
                            </button>
                            <button type="button" class="hs-carousel-next hs-carousel-disabled:opacity-50 hs-carousel-disabled:pointer-events-none inline-flex justify-center items-center w-12 h-8 bg-layer border border-layer-line text-muted-foreground-1 rounded-full hover:border-line-3 focus:outline-hidden focus:border-line-3">
                              <span class="sr-only">Next</span>
                              <span class="text-2xl" aria-hidden="true">
                                <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/><path d="m12 5 7 7-7 7"/></svg>
                              </span>
                            </button>
                          </div>
                          
                        </div>
                        
                      </div>
                    </div>

Open related digital agency about page

Milestone Timeline with Images Pro

The timeline column stays fixed while text and media share each milestone row.

<div>
                      
                      <div class="group relative flex gap-x-3 sm:gap-x-5 md:gap-x-8">
                        
                        <div class="min-w-10 md:min-w-12">
                          <h3 class="font-mono md:text-lg text-foreground">
                            2020
                          </h3>
                        </div>

<div class="relative after:absolute after:top-7 after:bottom-1 after:inset-s-3 after:-translate-x-[0.5px] after:border-s after:border-line-3">
                          <div class="relative z-10 size-6 flex justify-center items-center">
                            <div class="size-2 rounded-full bg-secondary"></div>
                          </div>
                        </div>

<div class="grow pb-8 group-last:pb-0">
                          
                          <div class="grid grid-cols-1 md:grid-cols-2 gap-6 md:gap-12">
                            <div>
                              <div class="space-y-3">
                                <p class="text-muted-foreground-1">
                                  Initial concept for Preline begins, inspired by the need for a streamlined UI component library built on Tailwind CSS.
                                </p>
                              </div>
                            </div>

<div class="group relative flex gap-x-3 sm:gap-x-5 md:gap-x-8">
                        
                        <div class="min-w-10 md:min-w-12">
                          <h3 class="font-mono md:text-lg text-foreground">
                            2021
                          </h3>
                        </div>
                        
    
                        
                        <div class="relative after:absolute after:top-7 after:bottom-1 after:inset-s-3 after:-translate-x-[0.5px] after:border-s after:border-line-3">
                          <div class="relative z-10 size-6 flex justify-center items-center">
                            <div class="size-2 rounded-full bg-secondary"></div>
                          </div>
                        </div>

<div class="grow pb-8 group-last:pb-0">
                          
                          <div class="grid grid-cols-1 md:grid-cols-2 gap-6 md:gap-12">
                            <div>
                              <div class="space-y-3">
                                <p class="text-muted-foreground-1">
                                  Q1: Development of the first version of Preline, featuring a small set of core components designed for responsive web design.
                                </p>

<p class="text-muted-foreground-1">
                                  Q3: Launch of Preline as an open-source project, introducing over 500 components and templates, along with detailed documentation.
                                </p>
                              </div>
                            </div>

<div class="group relative flex gap-x-3 sm:gap-x-5 md:gap-x-8">
                        
                        <div class="min-w-10 md:min-w-12">
                          <h3 class="font-mono md:text-lg text-foreground">
                            2024
                          </h3>
                        </div>
                        
    
                        
                        <div class="relative after:absolute after:top-7 after:bottom-1 after:inset-s-3 after:-translate-x-[0.5px] after:border-s after:border-line-3">
                          <div class="relative z-10 size-6 flex justify-center items-center">
                            <div class="size-2 rounded-full bg-secondary"></div>
                          </div>
                        </div>

<div class="grow pb-8 group-last:pb-0">
                          
                          <div class="grid grid-cols-1 md:grid-cols-2 gap-6 md:gap-12">
                            <div>
                              <div class="space-y-3">
                                <p class="text-muted-foreground-1">
                                  Q2: Expansion of the library to include 750+ components, integration with frameworks like React and Vue, and release of a Figma design system for seamless workflows.
                                </p>

<p class="text-muted-foreground-1">
                                  Q4: Preline establishes a strong developer community, introduces custom web design services, and continues to enhance its offerings with new features and updates.
                                </p>
                              </div>
                            </div>

Open related SaaS startup about page

Order Status Timeline Pro

Steps, icons, and timestamps run in one vertical line for order and delivery states.

<div class="mt-4">
                        
                        <div class="relative group last:pb-0 pb-3 last:after:hidden after:absolute after:top-8 after:bottom-0 after:inset-s-4 after:border-s after:border-line-2">
                          <div class="w-full flex gap-x-4">
                            <span class="flex shrink-0 justify-center items-center size-8 bg-primary border border-primary-line text-primary-foreground text-sm font-semibold uppercase rounded-full">
                              <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><line x1="19" x2="19" y1="8" y2="14"/><line x1="22" x2="16" y1="11" y2="11"/></svg>
                            </span>

<div class="grow mt-1">
                              <p class="font-medium text-sm text-foreground">
                                Order placed
                              </p>

<div class="relative group last:pb-0 pb-3 last:after:hidden after:absolute after:top-8 after:bottom-0 after:inset-s-4 after:border-s after:border-line-2">
                          <div class="w-full flex gap-x-4">
                            <span class="flex shrink-0 justify-center items-center size-8 bg-layer border border-layer-line text-sm font-semibold uppercase text-layer-foreground rounded-full">
                              <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 18V6a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v11a1 1 0 0 0 1 1h2"/><path d="M15 18H9"/><path d="M19 18h2a1 1 0 0 0 1-1v-3.65a1 1 0 0 0-.22-.624l-3.48-4.35A1 1 0 0 0 17.52 8H14"/><circle cx="17" cy="18" r="2"/><circle cx="7" cy="18" r="2"/></svg>
                            </span>

<div class="grow mt-1">
                              <p class="font-medium text-sm text-foreground">
                                Shipped
                              </p>
                            </div>
                          </div>
                        </div>

<div class="relative group last:pb-0 pb-3 last:after:hidden after:absolute after:top-8 after:bottom-0 after:inset-s-4 after:border-s after:border-line-2">
                          <div class="w-full flex gap-x-4">
                            <span class="flex shrink-0 justify-center items-center size-8 bg-layer border border-layer-line text-sm font-semibold uppercase text-layer-foreground rounded-full">
                              <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
                            </span>

<div class="grow mt-1">
                              <p class="font-medium text-sm text-foreground">
                                Out for delivery
                              </p>
                            </div>
                          </div>
                        </div>

<div class="relative group last:pb-0 pb-3 last:after:hidden after:absolute after:top-8 after:bottom-0 after:inset-s-4 after:border-s after:border-line-2">
                          <div class="w-full flex gap-x-4">
                            <span class="flex shrink-0 justify-center items-center size-8 bg-layer border border-layer-line text-sm font-semibold uppercase text-layer-foreground rounded-full">
                              <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>
                            </span>

<div class="grow mt-1">
                              <p class="font-medium text-sm text-foreground">
                                Delivered
                              </p>
                            </div>
                          </div>
                        </div>
                        
                      </div>
                      
                    </div>

Payment Timeline with Detail Panel Pro

A narrow status rail sits beside the main detail panel instead of taking over the full screen.

<div>
  
  <div class="group flex gap-x-3">
    
    <div class="relative group-last:after:hidden after:absolute after:top-7 after:bottom-0 after:inset-s-3.5 after:-translate-x-[0.5px] after:border-s after:border-line-2">
      <div class="relative z-10 size-7 flex justify-center items-center">
        <svg class="shrink-0 size-3 text-foreground" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>
      </div>
    </div>

<div class="grow pt-1 pb-4">
      <p class="mb-1 text-sm text-muted-foreground-1">
        24 October 2024 at 18:49
      </p>
      <p class="text-sm text-foreground">
        You set up your transfer
      </p>
    </div>
    
  </div>

<div class="group flex gap-x-3">
    
    <div class="relative group-last:after:hidden after:absolute after:top-7 after:bottom-0 after:inset-s-3.5 after:-translate-x-[0.5px] after:border-s after:border-line-2">
      <div class="relative z-10 size-7 flex justify-center items-center">
        <svg class="shrink-0 size-3 text-foreground" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>
      </div>
    </div>

<div class="grow pt-1 pb-4">
      <p class="mb-1 text-sm text-muted-foreground-1">
        24 October 2024 at 18:50
      </p>
      <p class="text-sm text-foreground">
        You used USD in your Preline account
      </p>
    </div>
    
  </div>

<div class="grow pt-1 pb-4">
      <p class="mb-1 text-sm text-muted-foreground-1">
        24 October 2024 at 18:50
      </p>
      <p class="text-sm text-foreground">
        We paid out your USD
      </p>
    </div>
    
  </div>

<div class="group flex gap-x-3">
    
    <div class="relative group-last:after:hidden after:absolute after:top-7 after:bottom-0 after:inset-s-3.5 after:-translate-x-[0.5px] after:border-s after:border-line-2">
      <div class="relative z-10 size-7 flex justify-center items-center">
        <span class="flex shrink-0 justify-center items-center size-4 rounded-full bg-emerald-500 text-foreground-inverse">
          <svg class="shrink-0 size-3" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>
        </span>
      </div>
    </div>

<div class="grow pt-1 pb-4">
      <p class="mb-1 text-sm text-muted-foreground-1">
        24 October 2024 at 18:50
      </p>
      <p class="mb-1 font-medium text-foreground">
        Payment succedded
      </p>
      <p class="text-sm text-foreground">
        We sent <span class="font-semibold">100 USD</span> to Costa Quinn
      </p>
    </div>
    
  </div>
  
</div>

Open related transaction details page

Receipt Breakdown Timeline Pro

A receipt is reduced to a short vertical step list with dates, amounts, and status markers.

<div class="px-4">
                      
                      <div class="flex items-center gap-x-4">
                        
                        <div class="relative after:absolute after:inset-y-0 after:inset-s-3 after:h-full after:-translate-x-[0.5px] after:border-s after:border-line-2">
                          <div class="relative z-10 w-6 h-10 flex justify-center items-center">
                            <div class="size-2 rounded-full bg-surface-2"></div>
                          </div>
                        </div>

<div class="grow ">
                          <div class="flex flex-wrap justify-between items-center gap-3">
                            <span class="text-sm text-muted-foreground-1">
                              Debit card fee
                            </span>
                            <div class="text-end">
                              <span class="block font-medium text-sm text-foreground">
                                2.25 USD
                              </span>
                            </div>
                          </div>
                        </div>
                        
                      </div>

<div class="flex items-center gap-x-4">
                        
                        <div class="relative after:absolute after:inset-y-0 after:inset-s-3 after:w-px after:h-full after:-translate-x-[0.5px] after:bg-surface-1">
                          <div class="relative z-10 w-6 h-10 flex justify-center items-center">
                            <div class="size-2 rounded-full bg-surface-2"></div>
                          </div>
                        </div>

<div class="grow ">
                          <div class="flex flex-wrap justify-between items-center gap-3">
                            <span class="text-sm text-muted-foreground-1">
                              Our fee
                            </span>
                            <div class="text-end">
                              <span class="block font-medium text-sm text-foreground">
                                0 USD
                              </span>
                            </div>
                          </div>
                        </div>
                        
                      </div>

<div class="grow ">
                          <div class="flex flex-wrap justify-between items-center gap-3">
                            <span class="text-sm text-muted-foreground-1">
                              Total fees
                            </span>
                            <div class="text-end">
                              <span class="block font-medium text-sm text-foreground">
                                2.25 USD
                              </span>
                            </div>
                          </div>
                        </div>
                        
                      </div>

<div class="grow relative after:absolute after:-top-2.5 after:inset-x-0 after:w-full after:border-t after:border-dashed after:border-line-3">
                          <div class="flex flex-wrap justify-between items-center gap-3">
                            <span class="text-sm text-muted-foreground-1">
                              Total
                            </span>
                            <div class="text-end">
                              <span class="block font-medium text-sm text-foreground">
                                52.25 USD
                              </span>
                            </div>
                          </div>
                        </div>
                        
                      </div>
                      
                    </div>

Open related send amount page

Career Timeline with Logo Markers Free

A resume-style timeline combines logo markers, dates, and supporting cards in one column.

<div>
  
  <div class="group relative flex gap-x-5">
    
    <div class="relative group-last:after:hidden after:absolute after:top-8 after:bottom-2 after:inset-s-3 after:-translate-x-[0.5px] after:border-s after:border-line-2">
      <div class="relative z-10 size-6 flex justify-center items-center">
        <svg class="shrink-0 size-6 text-muted-foreground-2" width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M11.7438 0.940745C6.84695 1.30308 2.6841 1.63631 2.48837 1.67533C1.9396 1.77319 1.44038 2.14544 1.20563 2.63537L1 3.06646L1.01982 13.3407L1.04893 23.615L1.36234 24.2517C1.53886 24.6042 2.73365 26.2499 4.0362 27.9439C6.61221 31.2836 6.79802 31.47 7.77726 31.5679C8.06156 31.597 10.1966 31.4991 12.5081 31.3622C14.8295 31.2154 18.5508 30.99 20.7842 30.863C30.3233 30.2839 29.8334 30.3328 30.3815 29.8627C31.0672 29.2947 31.0183 30.2251 31.0474 17.7377C31.0672 7.15003 31.0573 6.45509 30.9006 6.13177C30.7148 5.76943 30.3815 5.51487 26.0329 2.45885C23.1243 0.421704 22.9186 0.313932 21.6155 0.294111C21.0772 0.274911 16.6307 0.568497 11.7438 0.940745ZM22.752 2.28232C23.1633 2.46814 26.1704 4.56412 26.6108 4.9661C26.7284 5.08378 26.7675 5.18164 26.7086 5.24048C26.5717 5.35817 7.96245 6.465 7.42421 6.38634C7.17956 6.34732 6.81722 6.20052 6.61159 6.06302C5.75932 5.48514 3.64413 3.75149 3.64413 3.62452C3.64413 3.29129 3.57538 3.29129 11.8714 2.69421C13.4582 2.58644 16.0633 2.39071 17.6502 2.26312C21.0871 1.98874 22.1159 1.99865 22.752 2.28232ZM28.6677 7.63996C28.8046 7.77685 28.9223 8.04132 28.9613 8.29589C28.9904 8.53125 29.0102 12.9189 28.9904 18.0313C28.9613 26.8067 28.9514 27.3555 28.7848 27.61C28.6869 27.7667 28.4912 27.9333 28.3438 27.9823C27.9331 28.1489 8.43318 29.2557 8.03183 29.138C7.84601 29.0891 7.59083 28.9324 7.45394 28.7955L7.21858 28.541L7.18947 19.0799C7.16965 12.4395 7.18947 9.5012 7.26813 9.23672C7.32697 9.041 7.47376 8.80564 7.60136 8.72759C7.77788 8.60991 8.93364 8.51205 12.9101 8.2773C15.7016 8.1206 20.0206 7.85613 22.4987 7.70933C28.3933 7.34638 28.3741 7.34638 28.6677 7.63996Z" class="fill-foreground" fill="currentColor"></path><path d="M23.4277 10.8818C22.3698 10.9506 21.4296 11.0484 21.3218 11.1073C20.9985 11.2739 20.8028 11.5483 20.7638 11.8617C20.7347 12.185 20.8325 12.224 21.8898 12.3516L22.35 12.4104V16.5925C22.35 19.0799 22.311 20.7256 22.2621 20.6767C22.2131 20.6178 20.8226 18.5027 19.167 15.9756C17.512 13.4392 16.1407 11.3525 16.1209 11.3333C16.1011 11.3135 15.024 11.3724 13.7313 11.4609C12.1445 11.5687 11.273 11.6666 11.0965 11.7644C10.8122 11.9112 10.4988 12.4303 10.4988 12.7734C10.4988 12.979 10.871 13.0868 11.6545 13.0868H12.0658V25.1139L11.4 25.3196C10.8809 25.4763 10.7044 25.5741 10.6165 25.7698C10.4598 26.1031 10.4697 26.4066 10.6264 26.4066C10.6852 26.4066 11.792 26.3378 13.0649 26.2598C15.582 26.113 15.8657 26.0442 16.1302 25.5252C16.2088 25.3685 16.277 25.2019 16.277 25.1529C16.277 25.1139 15.9345 24.9962 15.5226 24.8984C15.1014 24.8005 14.6802 24.7027 14.5923 24.6828C14.4257 24.6339 14.4157 24.3304 14.4157 20.1186V15.6033L17.3931 20.2753C20.5173 25.1721 20.9093 25.7308 21.3893 25.9755C21.987 26.2889 23.5051 26.0733 24.2688 25.5741L24.5042 25.4273L24.524 18.7479L24.5531 12.0586L25.0722 11.9608C25.6891 11.8431 25.9734 11.5594 25.9734 11.0695C25.9734 10.7561 25.9536 10.7362 25.66 10.7462C25.4847 10.7542 24.4757 10.813 23.4277 10.8818Z" class="fill-foreground" fill="currentColor"></path></svg>
      </div>
    </div>

<div class="grow pb-8 group-last:pb-0">
      <h3 class="mb-1 text-xs text-muted-foreground-2">
        2023 - Present
      </h3>

<p class="font-semibold text-sm text-foreground">
        Web Designer & Web Developer
      </p>

<p class="mt-1 text-sm text-muted-foreground-2">
        The company has high expectations and using OKRs there is a mutual understanding of expectations and performance.
      </p>

<ul class="list-disc ms-6 mt-3 space-y-1.5">
        <li class="ps-1 text-sm text-muted-foreground-2">
          Designed template UIs and design systems in Figma.
        </li>
        <li class="ps-1 text-sm text-muted-foreground-2">
          Converted UIs into responsive HTML and CSS with a mobile-first approach.
        </li>
        <li class="ps-1 text-sm text-muted-foreground-2">
          Created custom illustrations and item description banners.
        </li>
        <li class="ps-1 text-sm text-muted-foreground-2">
          Provided detailed documentation and customer support on GitHub.
        </li>
        <li class="ps-1 text-sm text-muted-foreground-2">
          Engaged with users to address setup inquiries, bug issues, and feedback.
        </li>
      </ul>
    </div>
    
  </div>

<div class="group relative flex gap-x-5">
    
    <div class="relative group-last:after:hidden after:absolute after:top-8 after:bottom-2 after:inset-s-3 after:-translate-x-[0.5px] after:border-s after:border-line-2">
      <div class="relative z-10 size-6 flex justify-center items-center">
        <svg class="shrink-0 size-6 text-muted-foreground-2" width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#clip0_11766_122079)"><path d="M16 32C7.16 32 0 24.84 0 16C0 7.16 7.16 0 16 0C24.84 0 32 7.16 32 16C32 24.84 24.84 32 16 32Z" fill="#FFE01B"></path><path d="M11.72 19.28C11.74 19.3 11.74 19.34 11.72 19.38C11.64 19.52 11.48 19.6 11.32 19.58C11.02 19.54 10.8 19.3 10.82 19C10.82 18.8 10.86 18.62 10.92 18.42C11.02 18.18 10.92 17.92 10.72 17.78C10.6 17.7 10.44 17.68 10.3 17.7C10.16 17.72 10.04 17.82 9.96001 17.94C9.90001 18.04 9.86001 18.14 9.84001 18.24C9.84001 18.26 9.82001 18.28 9.82001 18.28C9.78001 18.4 9.70001 18.44 9.64001 18.44C9.62001 18.44 9.58001 18.42 9.56001 18.36C9.50001 18.02 9.62001 17.68 9.84001 17.42C10.04 17.2 10.32 17.1 10.62 17.14C10.92 17.18 11.2 17.38 11.32 17.66C11.46 18 11.42 18.38 11.24 18.7C11.22 18.72 11.22 18.76 11.2 18.78C11.14 18.9 11.12 19.06 11.2 19.18C11.26 19.26 11.34 19.3 11.44 19.3C11.48 19.3 11.52 19.3 11.56 19.28C11.64 19.24 11.7 19.24 11.72 19.28ZM24.94 19.6C24.92 20.22 24.78 20.82 24.56 21.4C23.44 24.1 20.76 25.6 17.56 25.5C14.58 25.42 12.04 23.84 10.94 21.26C10.24 21.24 9.56001 20.96 9.06001 20.5C8.52001 20.04 8.18001 19.4 8.10001 18.7C8.04001 18.22 8.10001 17.74 8.28001 17.28L7.66001 16.76C4.78001 14.36 13.72 4.4 16.56 6.9C16.58 6.92 17.54 7.86 17.54 7.86C17.54 7.86 18.06 7.64 18.08 7.64C20.58 6.6 22.62 7.1 22.62 8.76C22.62 9.62 22.08 10.62 21.2 11.54C21.56 11.9 21.8 12.34 21.92 12.82C22.02 13.16 22.06 13.5 22.08 13.86C22.1 14.22 22.12 15.04 22.12 15.04C22.14 15.04 22.4 15.12 22.48 15.14C23 15.26 23.46 15.48 23.86 15.82C24.08 16.02 24.2 16.3 24.26 16.58C24.32 16.96 24.22 17.34 24 17.64C24.06 17.78 24.1 17.9 24.16 18.04C24.24 18.28 24.28 18.48 24.3 18.5C24.52 18.54 24.94 18.86 24.94 19.6ZM12.34 18.12C12.14 16.86 11.3 16.42 10.72 16.38C10.58 16.38 10.44 16.38 10.28 16.42C9.26001 16.62 8.66001 17.5 8.78001 18.64C8.96001 19.7 9.82001 20.5 10.88 20.56C10.98 20.56 11.08 20.56 11.18 20.54C12.24 20.38 12.5 19.24 12.34 18.12ZM14.1 10.12C14.98 9.4 15.9 8.76 16.88 8.2C16.88 8.2 16.1 7.3 15.86 7.22C14.42 6.82 11.3 8.98 9.30001 11.84C8.50001 13 7.34001 15.04 7.90001 16.08C8.10001 16.32 8.32001 16.52 8.56001 16.72C8.92001 16.2 9.48001 15.84 10.12 15.72C10.9 13.54 12.28 11.6 14.1 10.12ZM17.22 20.1C17.3 20.44 17.56 20.72 17.9 20.8C18.08 20.86 18.24 20.92 18.44 20.94C20.72 21.34 22.86 20.02 23.34 19.7C23.38 19.68 23.4 19.7 23.38 19.74C23.36 19.76 23.34 19.78 23.34 19.8C22.76 20.56 21.18 21.44 19.12 21.44C18.22 21.44 17.32 21.12 17 20.64C16.48 19.88 16.98 18.78 17.82 18.9C17.82 18.9 18.12 18.94 18.2 18.94C19.52 19.06 20.86 18.86 22.08 18.32C23.24 17.78 23.68 17.18 23.62 16.7C23.6 16.56 23.52 16.42 23.42 16.3C23.1 16.04 22.72 15.86 22.32 15.78C22.14 15.72 22.02 15.7 21.88 15.66C21.64 15.58 21.52 15.52 21.5 15.06C21.48 14.86 21.46 14.18 21.44 13.88C21.42 13.38 21.36 12.7 20.94 12.42C20.84 12.34 20.7 12.3 20.58 12.3C20.5 12.3 20.44 12.3 20.36 12.32C20.14 12.36 19.96 12.48 19.8 12.64C19.4 13 18.88 13.18 18.34 13.14C18.04 13.12 17.74 13.08 17.38 13.06C17.32 13.06 17.24 13.06 17.18 13.04C16.22 13.06 15.44 13.78 15.32 14.74C15.12 16.16 16.14 16.88 16.44 17.32C16.48 17.38 16.52 17.44 16.52 17.52C16.52 17.6 16.48 17.68 16.42 17.72C15.6 18.64 15.3 19.92 15.62 21.12C15.66 21.26 15.7 21.4 15.76 21.54C16.5 23.28 18.82 24.1 21.08 23.36C21.38 23.26 21.66 23.14 21.94 23C22.44 22.76 22.88 22.42 23.26 22.02C23.84 21.44 24.22 20.68 24.36 19.86C24.42 19.4 24.32 19.24 24.2 19.16C24.1 19.1 24 19.08 23.88 19.1C23.82 18.74 23.72 18.4 23.58 18.08C22.94 18.56 22.2 18.94 21.42 19.16C20.48 19.42 19.52 19.52 18.54 19.48C17.92 19.42 17.5 19.24 17.34 19.76C18.28 20.08 19.28 20.18 20.28 20.06C20.3 20.06 20.34 20.08 20.34 20.1C20.34 20.12 20.32 20.14 20.3 20.16C20.22 20.14 19.06 20.68 17.22 20.1ZM13.84 11.88C14.6 11.34 15.48 10.96 16.38 10.76C17.42 10.52 18.48 10.52 19.52 10.76C19.56 10.76 19.58 10.7 19.54 10.68C19 10.4 18.42 10.24 17.8 10.22C17.78 10.22 17.76 10.2 17.76 10.18V10.16C17.86 10.04 17.96 9.92 18.08 9.84C18.1 9.82 18.1 9.8 18.08 9.8L18.06 9.78C17.32 9.86 16.62 10.1 15.98 10.52C15.96 10.52 15.94 10.52 15.94 10.52V10.5C15.98 10.32 16.06 10.14 16.16 9.96C16.16 9.94 16.16 9.92 16.14 9.92H16.12C15.22 10.42 14.42 11.08 13.76 11.86C13.74 11.88 13.74 11.9 13.76 11.9C13.8 11.9 13.82 11.9 13.84 11.88ZM19.84 16.7C19.96 16.78 20.14 16.76 20.24 16.64C20.3 16.52 20.22 16.38 20.06 16.3C19.94 16.22 19.76 16.24 19.66 16.36C19.6 16.46 19.68 16.62 19.84 16.7ZM20.34 14.88C20.38 15.08 20.46 15.28 20.58 15.44C20.7 15.42 20.84 15.42 20.96 15.44C21.04 15.22 21.04 14.98 20.98 14.76C20.88 14.34 20.76 14.1 20.52 14.14C20.26 14.18 20.24 14.48 20.34 14.88ZM20.88 15.84C20.72 15.8 20.54 15.88 20.48 16.06C20.44 16.22 20.52 16.4 20.7 16.46C20.88 16.52 21.04 16.42 21.1 16.24C21.1 16.22 21.12 16.18 21.12 16.16C21.12 16 21.02 15.86 20.88 15.84Z" fill="black"></path><path d="M16.66 15.8C16.62 15.8 16.6 15.78 16.6 15.76C16.58 15.68 16.7 15.58 16.8 15.48C17.14 15.22 17.6 15.18 17.98 15.34C18.16 15.42 18.32 15.54 18.42 15.7C18.46 15.76 18.46 15.82 18.44 15.84C18.4 15.88 18.3 15.84 18.12 15.76C17.92 15.66 17.68 15.6 17.46 15.62C17.2 15.66 16.92 15.72 16.66 15.8ZM18.38 16.16C18.22 16 18 15.92 17.8 15.96C17.64 15.98 17.5 16.04 17.38 16.14C17.32 16.18 17.28 16.24 17.28 16.32C17.28 16.34 17.28 16.36 17.3 16.36C17.32 16.36 17.32 16.38 17.34 16.38C17.4 16.38 17.46 16.36 17.5 16.34C17.74 16.26 17.98 16.22 18.22 16.26C18.34 16.28 18.38 16.28 18.42 16.24C18.4 16.2 18.4 16.18 18.38 16.16Z" fill="black"></path></g><defs><clipPath id="clip0_11766_122079"><rect width="32" height="32" fill="white"></rect></clipPath></defs></svg>
      </div>
    </div>

<div class="grow pb-8 group-last:pb-0">
      <h3 class="mb-1 text-xs text-muted-foreground-2">
        2021 - 2023
      </h3>

<p class="font-semibold text-sm text-foreground">
        Senior Software Engineer at Mailchimp
      </p>

<p class="mt-1 text-sm text-muted-foreground-2">
        This is an excellent company and they reward their employees. It's becoming a big company but it's still private, so the culture is as good as it gets at 1,000+ employees if you ask me. Managers are still adapting to the growth I think, but everyone has to. Great place to work.
      </p>

<div class="grow p-4 ms-32 sm:ms-48">
              <div class="min-h-24 flex flex-col justify-center">
                <h3 class="font-semibold text-sm text-foreground">
                  Studio by Mailchimp
                </h3>
                <p class="mt-1 text-sm text-muted-foreground-2">
                  Produce professional, reliable streams easily leveraging Mailchimp's innovative broadcast studio.
                </p>
              </div>
            </div>
          </div>
        </a>
        
      </div>
    </div>
    
  </div>

<div class="grow pb-8 group-last:pb-0">
      <h3 class="mb-1 text-xs text-muted-foreground-2">
        2011 - 2021
      </h3>

<p class="font-semibold text-sm text-foreground">
        Junior Software Engineer at Slack
      </p>

<p class="mt-1 text-sm text-muted-foreground-2">
        Work in Slack is one of the beautiful experience I can do in my entire life. There are a lot of interesting thing to learn and manager respect your time and your personality.
      </p>
    </div>
    
  </div>

<div class="grow pb-8 group-last:pb-0">
      <h3 class="mb-1 text-xs text-muted-foreground-2">
        2010 - 2011
      </h3>

<p class="font-semibold text-sm text-foreground">
        Freelance Graphic Designer
      </p>

<ul class="list-disc ms-6 mt-3 space-y-1.5">
        <li class="ps-1 text-sm text-muted-foreground-2">
          Worked with a diverse range of clients, delivering tailored design solutions.
        </li>
        <li class="ps-1 text-sm text-muted-foreground-2">
          Developed and maintained strong client relationships through effective communication and project management.
        </li>
        <li class="ps-1 text-sm text-muted-foreground-2">
          Utilized tools such as Notion for project tracking, Mailchimp for email marketing designs, Slack for team collaboration, and GitHub for version control and project sharing.
        </li>
      </ul>
    </div>
    
  </div>
  
</div>