<html>
  <head>
    <link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin="" />
    <link
      rel="stylesheet"
      as="style"
      onload="this.rel='stylesheet'"
      href="https://fonts.googleapis.com/css2?display=swap&amp;family=Noto+Serif%3Awght%40400%3B500%3B700%3B900&amp;family=Noto+Sans%3Awght%40400%3B500%3B700%3B900"
    />

    <title>Stitch Design</title>
    <link rel="icon" type="image/x-icon" href="data:image/x-icon;base64," />

    <script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
  </head>
  <body>
    <div
      class="relative flex size-full min-h-screen flex-col bg-[#fcfaf8] justify-between group/design-root overflow-x-hidden"
      style='font-family: "Noto Serif", "Noto Sans", sans-serif;'
    >
      <div>
        <div class="flex items-center bg-[#fcfaf8] p-4 pb-2 justify-between">
          <div class="text-[#1c150d] flex size-12 shrink-0 items-center" data-icon="ArrowLeft" data-size="24px" data-weight="regular">
            <svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" fill="currentColor" viewBox="0 0 256 256">
              <path d="M224,128a8,8,0,0,1-8,8H59.31l58.35,58.34a8,8,0,0,1-11.32,11.32l-72-72a8,8,0,0,1,0-11.32l72-72a8,8,0,0,1,11.32,11.32L59.31,120H216A8,8,0,0,1,224,128Z"></path>
            </svg>
          </div>
          <h2 class="text-[#1c150d] text-lg font-bold leading-tight tracking-[-0.015em] flex-1 text-center pr-12">Vehicle Tracker</h2>
        </div>
        <h2 class="text-[#1c150d] text-[22px] font-bold leading-tight tracking-[-0.015em] px-4 pb-3 pt-5">Driving Habits</h2>
        <div class="flex flex-wrap gap-4 p-4">
          <div class="flex min-w-[158px] flex-1 flex-col gap-2 rounded-xl p-6 border border-[#e8dcce]">
            <p class="text-[#1c150d] text-base font-medium leading-normal">Total Miles</p>
            <p class="text-[#1c150d] tracking-light text-2xl font-bold leading-tight">12,450</p>
          </div>
          <div class="flex min-w-[158px] flex-1 flex-col gap-2 rounded-xl p-6 border border-[#e8dcce]">
            <p class="text-[#1c150d] text-base font-medium leading-normal">Average MPG</p>
            <p class="text-[#1c150d] tracking-light text-2xl font-bold leading-tight">28.5</p>
          </div>
          <div class="flex min-w-[158px] flex-1 flex-col gap-2 rounded-xl p-6 border border-[#e8dcce]">
            <p class="text-[#1c150d] text-base font-medium leading-normal">Trips</p>
            <p class="text-[#1c150d] tracking-light text-2xl font-bold leading-tight">230</p>
          </div>
        </div>
        <h2 class="text-[#1c150d] text-[22px] font-bold leading-tight tracking-[-0.015em] px-4 pb-3 pt-5">Fuel Efficiency</h2>
        <div class="flex flex-wrap gap-4 px-4 py-6">
          <div class="flex min-w-72 flex-1 flex-col gap-2">
            <p class="text-[#1c150d] text-base font-medium leading-normal">Fuel Efficiency Over Time</p>
            <p class="text-[#1c150d] tracking-light text-[32px] font-bold leading-tight truncate">28.5 MPG</p>
            <div class="flex gap-1">
              <p class="text-[#9c7449] text-base font-normal leading-normal">Last 30 Days</p>
              <p class="text-[#07880e] text-base font-medium leading-normal">+2.1%</p>
            </div>
            <div class="flex min-h-[180px] flex-1 flex-col gap-8 py-4">
              <svg width="100%" height="148" viewBox="-3 0 478 150" fill="none" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none">
                <path
                  d="M0 109C18.1538 109 18.1538 21 36.3077 21C54.4615 21 54.4615 41 72.6154 41C90.7692 41 90.7692 93 108.923 93C127.077 93 127.077 33 145.231 33C163.385 33 163.385 101 181.538 101C199.692 101 199.692 61 217.846 61C236 61 236 45 254.154 45C272.308 45 272.308 121 290.462 121C308.615 121 308.615 149 326.769 149C344.923 149 344.923 1 363.077 1C381.231 1 381.231 81 399.385 81C417.538 81 417.538 129 435.692 129C453.846 129 453.846 25 472 25V149H326.769H0V109Z"
                  fill="url(#paint0_linear_1131_5935)"
                ></path>
                <path
                  d="M0 109C18.1538 109 18.1538 21 36.3077 21C54.4615 21 54.4615 41 72.6154 41C90.7692 41 90.7692 93 108.923 93C127.077 93 127.077 33 145.231 33C163.385 33 163.385 101 181.538 101C199.692 101 199.692 61 217.846 61C236 61 236 45 254.154 45C272.308 45 272.308 121 290.462 121C308.615 121 308.615 149 326.769 149C344.923 149 344.923 1 363.077 1C381.231 1 381.231 81 399.385 81C417.538 81 417.538 129 435.692 129C453.846 129 453.846 25 472 25"
                  stroke="#9c7449"
                  stroke-width="3"
                  stroke-linecap="round"
                ></path>
                <defs>
                  <linearGradient id="paint0_linear_1131_5935" x1="236" y1="1" x2="236" y2="149" gradientUnits="userSpaceOnUse">
                    <stop stop-color="#f4ede7"></stop>
                    <stop offset="1" stop-color="#f4ede7" stop-opacity="0"></stop>
                  </linearGradient>
                </defs>
              </svg>
              <div class="flex justify-around">
                <p class="text-[#9c7449] text-[13px] font-bold leading-normal tracking-[0.015em]">Week 1</p>
                <p class="text-[#9c7449] text-[13px] font-bold leading-normal tracking-[0.015em]">Week 2</p>
                <p class="text-[#9c7449] text-[13px] font-bold leading-normal tracking-[0.015em]">Week 3</p>
                <p class="text-[#9c7449] text-[13px] font-bold leading-normal tracking-[0.015em]">Week 4</p>
              </div>
            </div>
          </div>
        </div>
        <h2 class="text-[#1c150d] text-[22px] font-bold leading-tight tracking-[-0.015em] px-4 pb-3 pt-5">Trip History</h2>
        <div class="flex items-center gap-4 bg-[#fcfaf8] px-4 min-h-[72px] py-2">
          <div class="text-[#1c150d] flex items-center justify-center rounded-lg bg-[#f4ede7] shrink-0 size-12" data-icon="MapPin" data-size="24px" data-weight="regular">
            <svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" fill="currentColor" viewBox="0 0 256 256">
              <path
                d="M128,64a40,40,0,1,0,40,40A40,40,0,0,0,128,64Zm0,64a24,24,0,1,1,24-24A24,24,0,0,1,128,128Zm0-112a88.1,88.1,0,0,0-88,88c0,31.4,14.51,64.68,42,96.25a254.19,254.19,0,0,0,41.45,38.3,8,8,0,0,0,9.18,0A254.19,254.19,0,0,0,174,200.25c27.45-31.57,42-64.85,42-96.25A88.1,88.1,0,0,0,128,16Zm0,206c-16.53-13-72-60.75-72-118a72,72,0,0,1,144,0C200,161.23,144.53,209,128,222Z"
              ></path>
            </svg>
          </div>
          <div class="flex flex-col justify-center">
            <p class="text-[#1c150d] text-base font-medium leading-normal line-clamp-1">Trip to San Francisco</p>
            <p class="text-[#9c7449] text-sm font-normal leading-normal line-clamp-2">120 miles</p>
          </div>
        </div>
        <div class="flex items-center gap-4 bg-[#fcfaf8] px-4 min-h-[72px] py-2">
          <div class="text-[#1c150d] flex items-center justify-center rounded-lg bg-[#f4ede7] shrink-0 size-12" data-icon="MapPin" data-size="24px" data-weight="regular">
            <svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" fill="currentColor" viewBox="0 0 256 256">
              <path
                d="M128,64a40,40,0,1,0,40,40A40,40,0,0,0,128,64Zm0,64a24,24,0,1,1,24-24A24,24,0,0,1,128,128Zm0-112a88.1,88.1,0,0,0-88,88c0,31.4,14.51,64.68,42,96.25a254.19,254.19,0,0,0,41.45,38.3,8,8,0,0,0,9.18,0A254.19,254.19,0,0,0,174,200.25c27.45-31.57,42-64.85,42-96.25A88.1,88.1,0,0,0,128,16Zm0,206c-16.53-13-72-60.75-72-118a72,72,0,0,1,144,0C200,161.23,144.53,209,128,222Z"
              ></path>
            </svg>
          </div>
          <div class="flex flex-col justify-center">
            <p class="text-[#1c150d] text-base font-medium leading-normal line-clamp-1">Trip to Yosemite</p>
            <p class="text-[#9c7449] text-sm font-normal leading-normal line-clamp-2">85 miles</p>
          </div>
        </div>
        <div class="flex items-center gap-4 bg-[#fcfaf8] px-4 min-h-[72px] py-2">
          <div class="text-[#1c150d] flex items-center justify-center rounded-lg bg-[#f4ede7] shrink-0 size-12" data-icon="MapPin" data-size="24px" data-weight="regular">
            <svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" fill="currentColor" viewBox="0 0 256 256">
              <path
                d="M128,64a40,40,0,1,0,40,40A40,40,0,0,0,128,64Zm0,64a24,24,0,1,1,24-24A24,24,0,0,1,128,128Zm0-112a88.1,88.1,0,0,0-88,88c0,31.4,14.51,64.68,42,96.25a254.19,254.19,0,0,0,41.45,38.3,8,8,0,0,0,9.18,0A254.19,254.19,0,0,0,174,200.25c27.45-31.57,42-64.85,42-96.25A88.1,88.1,0,0,0,128,16Zm0,206c-16.53-13-72-60.75-72-118a72,72,0,0,1,144,0C200,161.23,144.53,209,128,222Z"
              ></path>
            </svg>
          </div>
          <div class="flex flex-col justify-center">
            <p class="text-[#1c150d] text-base font-medium leading-normal line-clamp-1">Trip to Lake Tahoe</p>
            <p class="text-[#9c7449] text-sm font-normal leading-normal line-clamp-2">45 miles</p>
          </div>
        </div>
      </div>
      <div>
        <div class="flex gap-2 border-t border-[#f4ede7] bg-[#fcfaf8] px-4 pb-3 pt-2">
          <a class="just flex flex-1 flex-col items-center justify-end gap-1 text-[#9c7449]" href="#">
            <div class="text-[#9c7449] flex h-8 items-center justify-center" data-icon="House" data-size="24px" data-weight="regular">
              <svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" fill="currentColor" viewBox="0 0 256 256">
                <path
                  d="M218.83,103.77l-80-75.48a1.14,1.14,0,0,1-.11-.11,16,16,0,0,0-21.53,0l-.11.11L37.17,103.77A16,16,0,0,0,32,115.55V208a16,16,0,0,0,16,16H96a16,16,0,0,0,16-16V160h32v48a16,16,0,0,0,16,16h48a16,16,0,0,0,16-16V115.55A16,16,0,0,0,218.83,103.77ZM208,208H160V160a16,16,0,0,0-16-16H112a16,16,0,0,0-16,16v48H48V115.55l.11-.1L128,40l79.9,75.43.11.1Z"
                ></path>
              </svg>
            </div>
            <p class="text-[#9c7449] text-xs font-medium leading-normal tracking-[0.015em]">Home</p>
          </a>
          <a class="just flex flex-1 flex-col items-center justify-end gap-1 rounded-full text-[#1c150d]" href="#">
            <div class="text-[#1c150d] flex h-8 items-center justify-center" data-icon="Car" data-size="24px" data-weight="fill">
              <svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" fill="currentColor" viewBox="0 0 256 256">
                <path
                  d="M240,112H229.2L201.42,49.5A16,16,0,0,0,186.8,40H69.2a16,16,0,0,0-14.62,9.5L26.8,112H16a8,8,0,0,0,0,16h8v80a16,16,0,0,0,16,16H64a16,16,0,0,0,16-16V192h96v16a16,16,0,0,0,16,16h24a16,16,0,0,0,16-16V128h8a8,8,0,0,0,0-16ZM80,160H64a8,8,0,0,1,0-16H80a8,8,0,0,1,0,16Zm96,0a8,8,0,0,1,0-16h16a8,8,0,0,1,0,16Z"
                ></path>
              </svg>
            </div>
            <p class="text-[#1c150d] text-xs font-medium leading-normal tracking-[0.015em]">Tracker</p>
          </a>
          <a class="just flex flex-1 flex-col items-center justify-end gap-1 text-[#9c7449]" href="#">
            <div class="text-[#9c7449] flex h-8 items-center justify-center" data-icon="Wrench" data-size="24px" data-weight="regular">
              <svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" fill="currentColor" viewBox="0 0 256 256">
                <path
                  d="M226.76,69a8,8,0,0,0-12.84-2.88l-40.3,37.19-17.23-3.7-3.7-17.23,37.19-40.3A8,8,0,0,0,187,29.24,72,72,0,0,0,88,96,72.34,72.34,0,0,0,94,124.94L33.79,177c-.15.12-.29.26-.43.39a32,32,0,0,0,45.26,45.26c.13-.13.27-.28.39-.42L131.06,162A72,72,0,0,0,232,96,71.56,71.56,0,0,0,226.76,69ZM160,152a56.14,56.14,0,0,1-27.07-7,8,8,0,0,0-9.92,1.77L67.11,211.51a16,16,0,0,1-22.62-22.62L109.18,133a8,8,0,0,0,1.77-9.93,56,56,0,0,1,58.36-82.31l-31.2,33.81a8,8,0,0,0-1.94,7.1L141.83,108a8,8,0,0,0,6.14,6.14l26.35,5.66a8,8,0,0,0,7.1-1.94l33.81-31.2A56.06,56.06,0,0,1,160,152Z"
                ></path>
              </svg>
            </div>
            <p class="text-[#9c7449] text-xs font-medium leading-normal tracking-[0.015em]">Service</p>
          </a>
          <a class="just flex flex-1 flex-col items-center justify-end gap-1 text-[#9c7449]" href="#">
            <div class="text-[#9c7449] flex h-8 items-center justify-center" data-icon="User" data-size="24px" data-weight="regular">
              <svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" fill="currentColor" viewBox="0 0 256 256">
                <path
                  d="M230.92,212c-15.23-26.33-38.7-45.21-66.09-54.16a72,72,0,1,0-73.66,0C63.78,166.78,40.31,185.66,25.08,212a8,8,0,1,0,13.85,8c18.84-32.56,52.14-52,89.07-52s70.23,19.44,89.07,52a8,8,0,1,0,13.85-8ZM72,96a56,56,0,1,1,56,56A56.06,56.06,0,0,1,72,96Z"
                ></path>
              </svg>
            </div>
            <p class="text-[#9c7449] text-xs font-medium leading-normal tracking-[0.015em]">Profile</p>
          </a>
        </div>
        <div class="h-5 bg-[#fcfaf8]"></div>
      </div>
    </div>
  </body>
</html>


what css classes are these