Shuffle Components in Trizzle library

<section class="py-3">
  <div class="container px-4 mx-auto">
    <div class="relative pt-12 px-6 md:px-10 rounded-2xl overflow-hidden">
      <img class="absolute top-0 left-0 h-full w-full" src="trizzle-assets/images/background-medium-banner.png" alt="">
      <div class="relative text-center mb-12">
        <h3 class="text-3xl font-bold text-white mb-3">Ideal banner asset for your dashboard project</h3>
        <p class="font-medium text-blue-200 mb-6">Go global with our UI Resources and solutions</p>
        <a class="inline-block w-full sm:w-auto px-16 py-3 leading-6 text-center font-semibold text-blue-50 bg-gray-500 hover:bg-gray-600 transition duration-200 rounded-lg" href="#">Get Started</a>
      </div>
      <img class="block mx-auto relative" src="trizzle-assets/images/banner-placeholder-center-dashboard.png" alt="">
    </div>
  </div>
</section>

<div x-data="{ modal: true }" :class="{ 'hidden': !modal }" class="z-50 fixed right-0 bottom-0 p-4">
  <div class="w-full max-w-xl p-6 mt-auto ml-auto bg-gray-500 rounded-lg">
    <div class="flex flex-wrap items-center justify-between -m-2">
      <div class="w-auto p-2">
        <div class="flex flex-wrap items-center -m-2">
          <div class="w-auto p-2 self-start">
            <img class="block w-12 h-12 object-cover" src="trizzle-assets/images/avatar-message-notify.png" alt="">
          </div>
          <div class="w-auto p-2">
            <h5 class="text-gray-100 font-semibold">Rose Joe</h5>
            <span class="text-xs font-medium text-gray-300">See you there!</span>
          </div>
        </div>
      </div>
      <div class="w-auto p-2">
        <div class="flex flex-wrap items-center -m-3">
          <div class="w-auto p-3">
            <a x-on:click="modal = false" class="inline-block text-sm font-bold text-white hover:text-gray-100" href="#">Cancel</a>
          </div>
          <div class="w-auto p-3">
            <a x-on:click="modal = false" class="inline-block py-1 px-4 text-sm leading-6 font-bold text-white bg-blue-500 hover:bg-blue-600 rounded-lg" href="#">Reply</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<div x-data="{ modal: true }" :class="{ 'hidden': !modal }" class="py-3">
  <div class="container px-4 mx-auto">
    <div class="w-full p-4 bg-yellow-900 rounded-lg">
      <div class="flex w-full h-full items-center justify-between">
        <div class="flex items-center pr-6">
          <span class="flex-shrink-0 self-start">
            <svg width="24" height="21" viewBox="0 0 24 21" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M12.0005 15C11.8027 15 11.6093 15.0587 11.4449 15.1686C11.2804 15.2784 11.1523 15.4346 11.0766 15.6173C11.0009 15.8001 10.9811 16.0011 11.0197 16.1951C11.0583 16.3891 11.1535 16.5673 11.2933 16.7071C11.4332 16.847 11.6114 16.9422 11.8054 16.9808C11.9993 17.0194 12.2004 16.9996 12.3831 16.9239C12.5659 16.8482 12.722 16.72 12.8319 16.5556C12.9418 16.3911 13.0005 16.1978 13.0005 16C13.0005 15.7348 12.8951 15.4805 12.7076 15.2929C12.52 15.1054 12.2657 15 12.0005 15ZM22.6705 16.47L14.6205 2.47003C14.3603 2.00354 13.9802 1.61498 13.5196 1.3445C13.0591 1.07401 12.5346 0.931396 12.0005 0.931396C11.4663 0.931396 10.9419 1.07401 10.4813 1.3445C10.0207 1.61498 9.64065 2.00354 9.38046 2.47003L1.38046 16.47C1.11125 16.924 0.966598 17.441 0.9611 17.9688C0.955602 18.4966 1.08945 19.0166 1.34914 19.4761C1.60883 19.9356 1.98516 20.3185 2.44014 20.5861C2.89512 20.8536 3.41264 20.9964 3.94046 21H20.0605C20.5925 21.0053 21.1164 20.8689 21.5784 20.6049C22.0403 20.341 22.4238 19.9589 22.6894 19.4978C22.9551 19.0368 23.0933 18.5134 23.09 17.9814C23.0866 17.4493 22.9418 16.9277 22.6705 16.47ZM20.9405 18.47C20.8528 18.626 20.7249 18.7556 20.5701 18.8453C20.4154 18.935 20.2393 18.9815 20.0605 18.98H3.94046C3.76157 18.9815 3.58556 18.935 3.43077 18.8453C3.27599 18.7556 3.14811 18.626 3.06046 18.47C2.97269 18.318 2.92648 18.1456 2.92648 17.97C2.92648 17.7945 2.97269 17.622 3.06046 17.47L11.0605 3.47003C11.1444 3.30623 11.2719 3.16876 11.4289 3.07277C11.5859 2.97678 11.7664 2.92599 11.9505 2.92599C12.1345 2.92599 12.315 2.97678 12.472 3.07277C12.629 3.16876 12.7565 3.30623 12.8405 3.47003L20.8905 17.47C20.9897 17.6199 21.0467 17.7937 21.0555 17.9732C21.0643 18.1527 21.0245 18.3312 20.9405 18.49V18.47ZM12.0005 7.00003C11.7352 7.00003 11.4809 7.10538 11.2933 7.29292C11.1058 7.48046 11.0005 7.73481 11.0005 8.00003V12C11.0005 12.2652 11.1058 12.5196 11.2933 12.7071C11.4809 12.8947 11.7352 13 12.0005 13C12.2657 13 12.52 12.8947 12.7076 12.7071C12.8951 12.5196 13.0005 12.2652 13.0005 12V8.00003C13.0005 7.73481 12.8951 7.48046 12.7076 7.29292C12.52 7.10538 12.2657 7.00003 12.0005 7.00003Z" fill="#FFC107"></path>
            </svg>
          </span>
          <span class="text-sm leading-5 text-blue-50 font-medium ml-3">This is an Info alert — check it out!</span>
        </div>
        <button x-on:click="modal = false" class="inline-block text-yellow-50">
          <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M7.17495 5.99999L10.7583 2.42499C10.9152 2.26807 11.0034 2.05524 11.0034 1.83333C11.0034 1.61141 10.9152 1.39858 10.7583 1.24166C10.6014 1.08474 10.3885 0.996582 10.1666 0.996582C9.9447 0.996582 9.73187 1.08474 9.57495 1.24166L5.99995 4.82499L2.42495 1.24166C2.26803 1.08474 2.0552 0.996582 1.83328 0.996582C1.61136 0.996582 1.39854 1.08474 1.24162 1.24166C1.0847 1.39858 0.996539 1.61141 0.996539 1.83333C0.996539 2.05524 1.0847 2.26807 1.24162 2.42499L4.82495 5.99999L1.24162 9.57499C1.16351 9.65246 1.10151 9.74463 1.05921 9.84618C1.0169 9.94773 0.995117 10.0566 0.995117 10.1667C0.995117 10.2767 1.0169 10.3856 1.05921 10.4871C1.10151 10.5887 1.16351 10.6809 1.24162 10.7583C1.31908 10.8364 1.41125 10.8984 1.5128 10.9407C1.61435 10.983 1.72327 11.0048 1.83328 11.0048C1.94329 11.0048 2.05221 10.983 2.15376 10.9407C2.25531 10.8984 2.34748 10.8364 2.42495 10.7583L5.99995 7.17499L9.57495 10.7583C9.65242 10.8364 9.74459 10.8984 9.84614 10.9407C9.94769 10.983 10.0566 11.0048 10.1666 11.0048C10.2766 11.0048 10.3855 10.983 10.4871 10.9407C10.5886 10.8984 10.6808 10.8364 10.7583 10.7583C10.8364 10.6809 10.8984 10.5887 10.9407 10.4871C10.983 10.3856 11.0048 10.2767 11.0048 10.1667C11.0048 10.0566 10.983 9.94773 10.9407 9.84618C10.8984 9.74463 10.8364 9.65246 10.7583 9.57499L7.17495 5.99999Z" fill="currentColor"></path>
          </svg>
        </button>
      </div>
    </div>
  </div>
</div>

<div x-data="{ modal: true }" :class="{ 'hidden': !modal }" class="z-50 fixed top-0 left-0 right-0 bottom-0 flex items-center w-full h-full p-4 bg-gray-800 bg-opacity-80 overflow-y-auto">
  <div class="max-w-xl w-full mx-auto bg-gray-500 rounded-xl overflow-hidden">
    <div class="max-w-md mx-auto pt-12 pb-12 px-5">
      <h4 class="text-xl text-gray-100 font-semibold mb-5">Default modal tittle</h4>
      <p class="text-gray-300 font-medium">Default modals in Trizzle are used for displaying information that is important to the user.</p>
    </div>
    <div class="pt-5 pb-6 px-6 text-right bg-gray-600 -mb-2">
      <a x-on:click.prevent="modal = false" class="inline-block w-full sm:w-auto py-3 px-5 mb-2 mr-4 text-center font-semibold leading-6 text-gray-200 bg-gray-500 hover:bg-gray-400 rounded-lg transition duration-200" href="#">Cancel</a>
      <a x-on:click.prevent="modal = false" class="inline-block w-full sm:w-auto py-3 px-5 mb-2 text-center font-semibold leading-6 text-blue-50 bg-blue-500 hover:bg-blue-600 rounded-lg transition duration-200" href="#">Confirm</a>
    </div>
  </div>
</div>

<div x-data="{ snackbar: true }" :class="{ 'hidden': !snackbar }" class="z-50 fixed left-0 bottom-0 p-4">
  <div class="max-w-xs p-4 bg-gray-500 rounded-lg shadow">
    <div class="flex w-full h-full items-center justify-between">
      <div class="flex items-center pr-6">
        <div class="flex-shrink-0 self-start inline-flex items-center justify-center w-10 h-10 mr-3 bg-green-500 bg-opacity-20 rounded-xl">
          <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M12.72 6.79L8.43001 11.09L6.78 9.44C6.69036 9.33532 6.58004 9.2503 6.45597 9.19027C6.33191 9.13025 6.19678 9.09652 6.05906 9.0912C5.92134 9.08588 5.78401 9.10909 5.65568 9.15936C5.52736 9.20964 5.41081 9.28589 5.31335 9.38335C5.2159 9.4808 5.13964 9.59735 5.08937 9.72568C5.03909 9.854 5.01589 9.99133 5.02121 10.1291C5.02653 10.2668 5.06026 10.4019 5.12028 10.526C5.1803 10.65 5.26532 10.7604 5.37 10.85L7.72 13.21C7.81344 13.3027 7.92426 13.376 8.0461 13.4258C8.16794 13.4755 8.2984 13.5008 8.43001 13.5C8.69234 13.4989 8.94374 13.3947 9.13 13.21L14.13 8.21C14.2237 8.11704 14.2981 8.00644 14.3489 7.88458C14.3997 7.76272 14.4258 7.63201 14.4258 7.5C14.4258 7.36799 14.3997 7.23728 14.3489 7.11542C14.2981 6.99356 14.2237 6.88296 14.13 6.79C13.9426 6.60375 13.6892 6.49921 13.425 6.49921C13.1608 6.49921 12.9074 6.60375 12.72 6.79ZM10 0C8.02219 0 6.08879 0.58649 4.4443 1.6853C2.79981 2.78412 1.51809 4.3459 0.761209 6.17317C0.00433284 8.00043 -0.193701 10.0111 0.192152 11.9509C0.578004 13.8907 1.53041 15.6725 2.92894 17.0711C4.32746 18.4696 6.10929 19.422 8.0491 19.8079C9.98891 20.1937 11.9996 19.9957 13.8268 19.2388C15.6541 18.4819 17.2159 17.2002 18.3147 15.5557C19.4135 13.9112 20 11.9778 20 10C20 8.68678 19.7413 7.38642 19.2388 6.17317C18.7363 4.95991 17.9997 3.85752 17.0711 2.92893C16.1425 2.00035 15.0401 1.26375 13.8268 0.761205C12.6136 0.258658 11.3132 0 10 0ZM10 18C8.41775 18 6.87104 17.5308 5.55544 16.6518C4.23985 15.7727 3.21447 14.5233 2.60897 13.0615C2.00347 11.5997 1.84504 9.99113 2.15372 8.43928C2.4624 6.88743 3.22433 5.46197 4.34315 4.34315C5.46197 3.22433 6.88743 2.4624 8.43928 2.15372C9.99113 1.84504 11.5997 2.00346 13.0615 2.60896C14.5233 3.21447 15.7727 4.23984 16.6518 5.55544C17.5308 6.87103 18 8.41775 18 10C18 12.1217 17.1572 14.1566 15.6569 15.6569C14.1566 17.1571 12.1217 18 10 18Z" fill="#54D62C"></path>
          </svg>
        </div>
        <span class="text-sm leading-5 text-gray-200 font-semibold">This is a success message!</span>
      </div>
      <button x-on:click="snackbar = false" class="inline-block text-gray-400 hover:text-gray-300">
        <svg width="10" height="10" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M5.93996 5.00001L8.80663 2.14001C8.93216 2.01448 9.00269 1.84421 9.00269 1.66668C9.00269 1.48914 8.93216 1.31888 8.80663 1.19335C8.68109 1.06781 8.51083 0.997284 8.33329 0.997284C8.15576 0.997284 7.9855 1.06781 7.85996 1.19335L4.99996 4.06001L2.13996 1.19335C2.01442 1.06781 1.84416 0.997284 1.66663 0.997284C1.48909 0.997284 1.31883 1.06781 1.19329 1.19335C1.06776 1.31888 0.997231 1.48914 0.997231 1.66668C0.997231 1.84421 1.06776 2.01448 1.19329 2.14001L4.05996 5.00001L1.19329 7.86001C1.13081 7.92199 1.08121 7.99572 1.04737 8.07696C1.01352 8.1582 0.996094 8.24534 0.996094 8.33334C0.996094 8.42135 1.01352 8.50849 1.04737 8.58973C1.08121 8.67097 1.13081 8.7447 1.19329 8.80668C1.25527 8.86916 1.329 8.91876 1.41024 8.95261C1.49148 8.98645 1.57862 9.00388 1.66663 9.00388C1.75463 9.00388 1.84177 8.98645 1.92301 8.95261C2.00425 8.91876 2.07798 8.86916 2.13996 8.80668L4.99996 5.94001L7.85996 8.80668C7.92194 8.86916 7.99567 8.91876 8.07691 8.95261C8.15815 8.98645 8.24529 9.00388 8.33329 9.00388C8.4213 9.00388 8.50844 8.98645 8.58968 8.95261C8.67092 8.91876 8.74465 8.86916 8.80663 8.80668C8.86911 8.7447 8.91871 8.67097 8.95255 8.58973C8.9864 8.50849 9.00383 8.42135 9.00383 8.33334C9.00383 8.24534 8.9864 8.1582 8.95255 8.07696C8.91871 7.99572 8.86911 7.92199 8.80663 7.86001L5.93996 5.00001Z" fill="currentColor"></path>
        </svg>
      </button>
    </div>
  </div>
</div>

<section class="py-3">
  <div class="container px-4 mx-auto">
    <div class="px-4 pt-6 pb-8 bg-gray-500 rounded-xl">
      <div class="flex items-center justify-between mb-3">
        <div class="flex items-center">
          <h3 class="text-lg text-white font-semibold mr-2">To do</h3>
          <span class="inline-flex items-center justify-center w-6 h-7 rounded-full bg-gray-600 text-xs font-medium text-gray-400">3</span>
        </div>
        <div>
          <button class="inline-block mr-2 text-gray-400 hover:text-gray-300">
            <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M10.6667 5.33329H6.66675V1.33329C6.66675 1.15648 6.59651 0.986913 6.47149 0.861888C6.34646 0.736864 6.17689 0.666626 6.00008 0.666626C5.82327 0.666626 5.6537 0.736864 5.52868 0.861888C5.40365 0.986913 5.33342 1.15648 5.33342 1.33329V5.33329H1.33341C1.1566 5.33329 0.987035 5.40353 0.86201 5.52855C0.736986 5.65358 0.666748 5.82315 0.666748 5.99996C0.666748 6.17677 0.736986 6.34634 0.86201 6.47136C0.987035 6.59639 1.1566 6.66663 1.33341 6.66663H5.33342V10.6666C5.33342 10.8434 5.40365 11.013 5.52868 11.138C5.6537 11.2631 5.82327 11.3333 6.00008 11.3333C6.17689 11.3333 6.34646 11.2631 6.47149 11.138C6.59651 11.013 6.66675 10.8434 6.66675 10.6666V6.66663H10.6667C10.8436 6.66663 11.0131 6.59639 11.1382 6.47136C11.2632 6.34634 11.3334 6.17677 11.3334 5.99996C11.3334 5.82315 11.2632 5.65358 11.1382 5.52855C11.0131 5.40353 10.8436 5.33329 10.6667 5.33329Z" fill="currentColor"></path>
            </svg>
          </button>
          <a class="inline-block py-1 text-gray-400 hover:text-gray-300" href="#">
            <svg width="12" height="4" viewBox="0 0 12 4" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M6 0.666626C5.73629 0.666626 5.47851 0.744825 5.25924 0.891333C5.03998 1.03784 4.86908 1.24608 4.76816 1.48971C4.66724 1.73335 4.64084 2.00144 4.69229 2.26008C4.74373 2.51872 4.87072 2.7563 5.05719 2.94277C5.24366 3.12924 5.48124 3.25623 5.73988 3.30767C5.99852 3.35912 6.26661 3.33272 6.51025 3.2318C6.75388 3.13088 6.96212 2.95998 7.10863 2.74072C7.25514 2.52145 7.33333 2.26367 7.33333 1.99996C7.33333 1.64634 7.19286 1.3072 6.94281 1.05715C6.69276 0.807102 6.35362 0.666626 6 0.666626ZM1.33333 0.666626C1.06963 0.666626 0.811839 0.744825 0.592574 0.891333C0.373308 1.03784 0.202411 1.24608 0.101495 1.48971C0.000577708 1.73335 -0.0258267 2.00144 0.0256202 2.26008C0.0770672 2.51872 0.204055 2.7563 0.390525 2.94277C0.576995 3.12924 0.814572 3.25623 1.07321 3.30767C1.33185 3.35912 1.59994 3.33272 1.84358 3.2318C2.08721 3.13088 2.29545 2.95998 2.44196 2.74072C2.58847 2.52145 2.66667 2.26367 2.66667 1.99996C2.66667 1.64634 2.52619 1.3072 2.27614 1.05715C2.02609 0.807102 1.68696 0.666626 1.33333 0.666626ZM10.6667 0.666626C10.403 0.666626 10.1452 0.744825 9.92591 0.891333C9.70664 1.03784 9.53574 1.24608 9.43483 1.48971C9.33391 1.73335 9.30751 2.00144 9.35895 2.26008C9.4104 2.51872 9.53739 2.7563 9.72386 2.94277C9.91033 3.12924 10.1479 3.25623 10.4065 3.30767C10.6652 3.35912 10.9333 3.33272 11.1769 3.2318C11.4205 3.13088 11.6288 2.95998 11.7753 2.74072C11.9218 2.52145 12 2.26367 12 1.99996C12 1.64634 11.8595 1.3072 11.6095 1.05715C11.3594 0.807102 11.0203 0.666626 10.6667 0.666626Z" fill="currentColor"></path>
            </svg>
          </a>
        </div>
      </div>
      <div class="h-1 w-full rounded-full bg-purple-500"></div>
    </div>
  </div>
</section>

<section class="py-3">
  <div class="container px-4 mx-auto">
    <div class="p-6 bg-gray-500 rounded-xl">
      <div class="flex flex-wrap -mx-4 -mb-4 justify-between items-center">
        <div class="w-auto px-4 mb-4">
          <div class="flex items-center">
            <h4 class="text-gray-100 font-bold tracking-wide">Audience Insight</h4>
            <span class="group relative ml-2 text-gray-200">
              <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M7 13C10.3137 13 13 10.3137 13 7C13 3.68629 10.3137 1 7 1C3.68629 1 1 3.68629 1 7C1 10.3137 3.68629 13 7 13Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                <path d="M7 4.33337V7.00004" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                <path d="M7 9.66663H7.00667" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
              </svg>
              <div class="hidden group-hover:block absolute -top-3 left-full ml-2 px-2 min-w-max bg-gray-600 rounded-lg">
                <span class="text-xs text-gray-300">Lorem ipsum dolor sit insight</span>
              </div>
            </span>
          </div>
        </div>
        <div class="w-auto px-4 mb-4">
          <a class="inline-block p-1 text-gray-300 hover:text-gray-200" href="#">
            <svg width="18" height="4" viewBox="0 0 18 4" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M2 3C2.55228 3 3 2.55228 3 2C3 1.44772 2.55228 1 2 1C1.44772 1 1 1.44772 1 2C1 2.55228 1.44772 3 2 3Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
              <path d="M9 3C9.55228 3 10 2.55228 10 2C10 1.44772 9.55228 1 9 1C8.44772 1 8 1.44772 8 2C8 2.55228 8.44772 3 9 3Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
              <path d="M16 3C16.5523 3 17 2.55228 17 2C17 1.44772 16.5523 1 16 1C15.4477 1 15 1.44772 15 2C15 2.55228 15.4477 3 16 3Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
            </svg>
          </a>
        </div>
      </div>
      <div class="chart mt-8 mb-3" data-type="columns-thin" style="min-height: 200px;"></div>
      <div class="flex flex-col md:flex-row items-center justify-center">
        <div class="flex mb-4 md:mb-0 md:mr-20 items-center">
          <span class="inline-block h-3 w-3 mr-2 bg-blue-500 rounded-sm"></span>
          <span class="text-xs text-gray-300 font-semibold">Men</span>
        </div>
        <div class="flex mb-4 md:mb-0 md:mr-20 items-center">
          <span class="inline-block h-3 w-3 mr-2 bg-purple-500 rounded-sm"></span>
          <span class="text-xs text-gray-300 font-semibold">Woman</span>
        </div>
        <div class="flex items-center">
          <span class="inline-block h-3 w-3 mr-2 bg-yellow-500 rounded-sm"></span>
          <span class="text-xs text-gray-300 font-semibold">Not Specific</span>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="py-3">
  <div class="container px-4 mx-auto">
    <div class="p-6 bg-gray-500 rounded-xl">
      <h4 class="text-xl font-semibold text-white">Latest files</h4>
      <p class="text-xs font-medium text-gray-300 mb-4">Your subtitle text about files goes here</p>
      <div class="flex flex-wrap py-1 px-4 items-center justify-between bg-gray-600 rounded-md">
        <div class="w-auto p-2">
          <div class="flex flex-wrap items-center -m-1.5">
            <div class="w-auto p-1.5">
              <div class="flex self-start w-10 h-10 items-center justify-center rounded-md bg-gray-700">
                <svg width="20" height="16" viewBox="0 0 20 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M17 0H3C2.20435 0 1.44129 0.316071 0.87868 0.87868C0.316071 1.44129 0 2.20435 0 3V13C0 13.7956 0.316071 14.5587 0.87868 15.1213C1.44129 15.6839 2.20435 16 3 16H17C17.7956 16 18.5587 15.6839 19.1213 15.1213C19.6839 14.5587 20 13.7956 20 13V3C20 2.20435 19.6839 1.44129 19.1213 0.87868C18.5587 0.316071 17.7956 0 17 0ZM3 14C2.73478 14 2.48043 13.8946 2.29289 13.7071C2.10536 13.5196 2 13.2652 2 13V10.58L5.3 7.29C5.48693 7.10677 5.73825 7.00414 6 7.00414C6.26175 7.00414 6.51307 7.10677 6.7 7.29L13.41 14H3ZM18 13C18 13.2652 17.8946 13.5196 17.7071 13.7071C17.5196 13.8946 17.2652 14 17 14H16.23L12.42 10.17L13.3 9.29C13.4869 9.10677 13.7382 9.00414 14 9.00414C14.2618 9.00414 14.5131 9.10677 14.7 9.29L18 12.58V13ZM18 9.76L16.12 7.89C15.5501 7.34243 14.7904 7.03663 14 7.03663C13.2096 7.03663 12.4499 7.34243 11.88 7.89L11 8.77L8.12 5.89C7.55006 5.34243 6.79036 5.03663 6 5.03663C5.20964 5.03663 4.44994 5.34243 3.88 5.89L2 7.76V3C2 2.73478 2.10536 2.48043 2.29289 2.29289C2.48043 2.10536 2.73478 2 3 2H17C17.2652 2 17.5196 2.10536 17.7071 2.29289C17.8946 2.48043 18 2.73478 18 3V9.76Z" fill="#FACC15"></path>
                </svg>
              </div>
            </div>
            <div class="w-auto p-1.5">
              <h5 class="text-sm leading-none font-semibold text-gray-100">Images</h5>
              <span class="text-xs leading-none text-gray-300 font-medium">344 images</span>
            </div>
          </div>
        </div>
        <div class="w-auto p-2">
          <span class="text-sm font-medium text-gray-100">16 GB</span>
        </div>
      </div>
      <div class="flex flex-wrap py-1 px-4 items-center justify-between rounded-md">
        <div class="w-auto p-2">
          <div class="flex flex-wrap items-center -m-1.5">
            <div class="w-auto p-1.5">
              <div class="flex self-start w-10 h-10 items-center justify-center rounded-md bg-gray-700">
                <svg width="16" height="20" viewBox="0 0 16 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M16 6.94C15.9896 6.84813 15.9695 6.75763 15.94 6.67V6.58C15.8919 6.47718 15.8278 6.38267 15.75 6.3L9.75 0.3C9.66734 0.222216 9.57282 0.158081 9.47 0.11H9.38C9.27841 0.0517412 9.16622 0.0143442 9.05 0H3C2.20435 0 1.44129 0.316071 0.87868 0.87868C0.316071 1.44129 0 2.20435 0 3V17C0 17.7956 0.316071 18.5587 0.87868 19.1213C1.44129 19.6839 2.20435 20 3 20H13C13.7956 20 14.5587 19.6839 15.1213 19.1213C15.6839 18.5587 16 17.7956 16 17V7C16 7 16 7 16 6.94ZM10 3.41L12.59 6H11C10.7348 6 10.4804 5.89464 10.2929 5.70711C10.1054 5.51957 10 5.26522 10 5V3.41ZM14 17C14 17.2652 13.8946 17.5196 13.7071 17.7071C13.5196 17.8946 13.2652 18 13 18H3C2.73478 18 2.48043 17.8946 2.29289 17.7071C2.10536 17.5196 2 17.2652 2 17V3C2 2.73478 2.10536 2.48043 2.29289 2.29289C2.48043 2.10536 2.73478 2 3 2H8V5C8 5.79565 8.31607 6.55871 8.87868 7.12132C9.44129 7.68393 10.2044 8 11 8H14V17Z" fill="#24D164"></path>
                </svg>
              </div>
            </div>
            <div class="w-auto p-1.5">
              <h5 class="text-sm leading-none font-semibold text-gray-100">Files</h5>
              <span class="text-xs leading-none text-gray-300 font-medium">424 images</span>
            </div>
          </div>
        </div>
        <div class="w-auto p-2">
          <span class="text-sm font-medium text-gray-100">45 GB</span>
        </div>
      </div>
      <div class="flex flex-wrap py-1 px-4 items-center justify-between bg-gray-600 rounded-md">
        <div class="w-auto p-2">
          <div class="flex flex-wrap items-center -m-1.5">
            <div class="w-auto p-1.5">
              <div class="flex self-start w-10 h-10 items-center justify-center rounded-md bg-gray-700">
                <svg width="20" height="12" viewBox="0 0 20 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M19.53 1.15C19.378 1.06223 19.2055 1.01603 19.03 1.01603C18.8545 1.01603 18.682 1.06223 18.53 1.15L15 2.89C14.9715 2.11357 14.6429 1.37847 14.0834 0.839439C13.5238 0.300405 12.777 -0.000521775 12 6.79157e-07H3C2.20435 6.79157e-07 1.44129 0.316071 0.87868 0.87868C0.316071 1.44129 0 2.20435 0 3V9C0 9.79565 0.316071 10.5587 0.87868 11.1213C1.44129 11.6839 2.20435 12 3 12H12C12.777 12.0005 13.5238 11.6996 14.0834 11.1606C14.6429 10.6215 14.9715 9.88643 15 9.11L18.56 10.89C18.6963 10.9599 18.8468 10.9975 19 11C19.1872 11.0006 19.3709 10.9486 19.53 10.85C19.6741 10.7599 19.7929 10.6346 19.8751 10.4859C19.9574 10.3372 20.0003 10.1699 20 10V2C20.0003 1.83006 19.9574 1.66283 19.8751 1.51411C19.7929 1.36538 19.6741 1.24007 19.53 1.15ZM13 9C13 9.26522 12.8946 9.51957 12.7071 9.70711C12.5196 9.89464 12.2652 10 12 10H3C2.73478 10 2.48043 9.89464 2.29289 9.70711C2.10536 9.51957 2 9.26522 2 9V3C2 2.73478 2.10536 2.48043 2.29289 2.29289C2.48043 2.10536 2.73478 2 3 2H12C12.2652 2 12.5196 2.10536 12.7071 2.29289C12.8946 2.48043 13 2.73478 13 3V9ZM18 8.38L15 6.88V5.12L18 3.62V8.38Z" fill="#1890FF"></path>
                </svg>
              </div>
            </div>
            <div class="w-auto p-1.5">
              <h5 class="text-sm leading-none font-semibold text-gray-100">Videos</h5>
              <span class="text-xs leading-none text-gray-300 font-medium">131 images</span>
            </div>
          </div>
        </div>
        <div class="w-auto p-2">
          <span class="text-sm font-medium text-gray-100">165.3 GB</span>
        </div>
      </div>
    </div>
  </div>
</section>

<section x-data="{ inc: 3, show: 3, max: 45, dots: true }" class="py-3">
  <div class="container px-4 mx-auto">
    <div class="p-6 bg-gray-500 rounded-xl">
      <div class="flex flex-wrap items-center justify-between -m-2">
        <div class="order-2 sm:w-auto sm:order-1 p-2">
          <a x-on:click.prevent="inc > show ? inc -= show : inc" class="inline-flex group items-center text-sm font-semibold" href="#">
            <span class="text-gray-400 group-hover:text-gray-300">
              <svg width="8" height="10" viewBox="0 0 8 10" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M7.33294 4.33338H2.27294L4.47294 2.14004C4.59847 2.01451 4.669 1.84424 4.669 1.66671C4.669 1.48917 4.59847 1.31891 4.47294 1.19338C4.3474 1.06784 4.17714 0.997314 3.99961 0.997314C3.82207 0.997314 3.65181 1.06784 3.52627 1.19338L0.192939 4.52671C0.132245 4.59011 0.0846683 4.66487 0.0529387 4.74671C-0.01374 4.90902 -0.01374 5.09107 0.0529387 5.25338C0.0846683 5.33521 0.132245 5.40997 0.192939 5.47338L3.52627 8.80671C3.58825 8.86919 3.66198 8.91879 3.74322 8.95264C3.82446 8.98648 3.9116 9.00391 3.99961 9.00391C4.08761 9.00391 4.17475 8.98648 4.25599 8.95264C4.33723 8.91879 4.41096 8.86919 4.47294 8.80671C4.53542 8.74473 4.58502 8.671 4.61887 8.58976C4.65271 8.50852 4.67014 8.42138 4.67014 8.33337C4.67014 8.24537 4.65271 8.15823 4.61887 8.07699C4.58502 7.99575 4.53542 7.92202 4.47294 7.86004L2.27294 5.66671H7.33294C7.50975 5.66671 7.67932 5.59647 7.80434 5.47145C7.92937 5.34642 7.99961 5.17685 7.99961 5.00004C7.99961 4.82323 7.92937 4.65366 7.80434 4.52864C7.67932 4.40361 7.50975 4.33338 7.33294 4.33338Z" fill="currentColor"></path>
              </svg>
            </span>
            <span class="ml-2 text-gray-100 group-hover:text-gray-200">Previous</span>
          </a>
        </div>
        <div class="order-1 w-full sm:w-auto p-2">
          <div class="flex items-center">
            <a x-text="!dots || inc == max ? max - 4 : inc - 2" class="inline-block px-4 text-sm font-semibold text-gray-100 hover:text-gray-200" href="#">1</a>
            <a x-text="!dots || inc == max ? max - 3 : inc - 1" class="px-4 text-sm font-semibold text-gray-100 hover:text-gray-200" href="#">2</a>
            <a x-text="!dots || inc == max ? max - 2 : inc" class="hidden sm:inline-block px-4 text-sm font-semibold text-gray-100 hover:text-gray-200" href="#">3</a>
            <a x-on:click="dots = false" :class="{'hidden': !dots || inc == max }" class="inline-block px-4 text-sm text-gray-400 hover:text-gray-300" href="#">...</a>
            <a x-text="!dots || inc == max ? max - 1 : max - 1" class="hidden sm:inline-block px-4 text-sm font-semibold text-gray-100 hover:text-gray-200" href="#">44</a>
            <a x-text="!dots || inc == max ? max : max" class="inline-block px-4 text-sm font-semibold text-gray-100 hover:text-gray-200" href="#">45</a>
          </div>
        </div>
        <div class="order-3 sm:w-auto p-2">
          <a x-on:click.prevent="inc < max ? inc += show : max" class="inline-flex group items-center text-sm font-semibold" href="#">
            <span class="mr-2 text-gray-100 group-hover:text-gray-200">Next</span>
            <span class="text-gray-400 group-hover:text-gray-300">
              <svg width="8" height="10" viewBox="0 0 8 10" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M0.667061 5.66663L5.72706 5.66662L3.52706 7.85996C3.40152 7.98549 3.331 8.15576 3.331 8.33329C3.331 8.51083 3.40152 8.68109 3.52706 8.80662C3.6526 8.93216 3.82286 9.00269 4.00039 9.00269C4.17793 9.00269 4.34819 8.93216 4.47373 8.80662L7.80706 5.47329C7.86775 5.40989 7.91533 5.33513 7.94706 5.25329C8.01374 5.09098 8.01374 4.90893 7.94706 4.74662C7.91533 4.66479 7.86775 4.59003 7.80706 4.52662L4.47373 1.19329C4.41175 1.13081 4.33802 1.08121 4.25678 1.04736C4.17554 1.01352 4.0884 0.996093 4.00039 0.996093C3.91239 0.996093 3.82525 1.01352 3.74401 1.04736C3.66277 1.08121 3.58904 1.13081 3.52706 1.19329C3.46457 1.25527 3.41498 1.329 3.38113 1.41024C3.34729 1.49148 3.32986 1.57862 3.32986 1.66663C3.32986 1.75463 3.34729 1.84177 3.38113 1.92301C3.41498 2.00425 3.46457 2.07798 3.52706 2.13996L5.72706 4.33329L0.667061 4.33329C0.49025 4.33329 0.32068 4.40353 0.195656 4.52855C0.0706316 4.65358 0.000394456 4.82315 0.000394471 4.99996C0.000394487 5.17677 0.0706317 5.34634 0.195656 5.47136C0.32068 5.59639 0.49025 5.66663 0.667061 5.66663Z" fill="currentColor"></path>
              </svg>
            </span>
          </a>
        </div>
      </div>
    </div>
  </div>
</section>

<section x-data="{ inc: 10, show: 10, min: 10, max: 20 }" class="py-3">
  <div class="container px-4 mx-auto">
    <div class="pt-6 pb-8 bg-gray-500 rounded-xl">
      <div class="px-6">
        <div class="sm:flex mb-6 items-center justify-between">
          <div class="relative w-full h-14 max-w-xs py-4 px-3 mb-5 sm:mb-0 border border-gray-400 hover:border-white focus-within:border-green-500 rounded-lg">
            <span class="absolute bottom-full left-0 ml-3 -mb-1 transform translate-y-0.5 text-xs font-semibold text-gray-100 px-1 bg-gray-500">Search</span>
            <div class="flex items-center">
              <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M13.4733 12.5267L10.9999 10.0734C11.96 8.87633 12.4249 7.35692 12.2991 5.82759C12.1733 4.29826 11.4664 2.87525 10.3236 1.85115C9.18085 0.827062 7.68914 0.279732 6.15522 0.321705C4.62129 0.363679 3.16175 0.991766 2.0767 2.07682C0.991644 3.16187 0.363557 4.62142 0.321583 6.15534C0.27961 7.68926 0.82694 9.18097 1.85103 10.3237C2.87512 11.4665 4.29814 12.1735 5.82747 12.2993C7.3568 12.4251 8.87621 11.9601 10.0733 11.0001L12.5266 13.4534C12.5886 13.5159 12.6623 13.5655 12.7436 13.5993C12.8248 13.6332 12.9119 13.6506 12.9999 13.6506C13.0879 13.6506 13.1751 13.6332 13.2563 13.5993C13.3376 13.5655 13.4113 13.5159 13.4733 13.4534C13.5934 13.3291 13.6606 13.163 13.6606 12.9901C13.6606 12.8172 13.5934 12.651 13.4733 12.5267ZM6.33327 11.0001C5.41029 11.0001 4.50804 10.7264 3.74061 10.2136C2.97318 9.7008 2.37504 8.97197 2.02183 8.11925C1.66862 7.26653 1.57621 6.32821 1.75627 5.42297C1.93634 4.51773 2.38079 3.6862 3.03344 3.03356C3.68608 2.38091 4.5176 1.93646 5.42285 1.75639C6.32809 1.57633 7.2664 1.66874 8.11913 2.02195C8.97185 2.37516 9.70068 2.9733 10.2135 3.74073C10.7262 4.50816 10.9999 5.41041 10.9999 6.33339C10.9999 7.57107 10.5083 8.75805 9.6331 9.63322C8.75793 10.5084 7.57095 11.0001 6.33327 11.0001Z" fill="#3D485B"></path>
              </svg>
              <input class="block w-full ml-2 outline-none bg-transparent text-sm text-gray-100 font-medium" id="messagesInput1-1" placeholder="Search products..." type="search">
            </div>
          </div>
          <button class="inline-flex h-14 py-1 px-4 items-center bg-gray-600 hover:bg-gray-700 rounded-lg transition duration-200">
            <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M11.6668 0.333374H2.3335C1.80306 0.333374 1.29436 0.544088 0.919283 0.91916C0.54421 1.29423 0.333496 1.80294 0.333496 2.33337V3.11337C0.333401 3.38867 0.39014 3.66102 0.500163 3.91337V3.95337C0.594349 4.16735 0.727758 4.36181 0.893496 4.52671L5.00016 8.60671V13C4.99994 13.1133 5.02859 13.2248 5.08341 13.324C5.13823 13.4231 5.21742 13.5067 5.3135 13.5667C5.41959 13.6325 5.54201 13.6671 5.66683 13.6667C5.77119 13.6661 5.87395 13.641 5.96683 13.5934L8.6335 12.26C8.74344 12.2046 8.83589 12.1199 8.90061 12.0152C8.96533 11.9104 8.99979 11.7898 9.00016 11.6667V8.60671L13.0802 4.52671C13.2459 4.36181 13.3793 4.16735 13.4735 3.95337V3.91337C13.5927 3.66299 13.6585 3.39056 13.6668 3.11337V2.33337C13.6668 1.80294 13.4561 1.29423 13.081 0.91916C12.706 0.544088 12.1973 0.333374 11.6668 0.333374ZM7.86016 7.86004C7.79837 7.92233 7.74949 7.99621 7.71632 8.07744C7.68314 8.15866 7.66632 8.24564 7.66683 8.33337V11.2534L6.3335 11.92V8.33337C6.334 8.24564 6.31719 8.15866 6.28401 8.07744C6.25083 7.99621 6.20195 7.92233 6.14016 7.86004L2.60683 4.33337H11.3935L7.86016 7.86004ZM12.3335 3.00004H1.66683V2.33337C1.66683 2.15656 1.73707 1.98699 1.86209 1.86197C1.98712 1.73695 2.15669 1.66671 2.3335 1.66671H11.6668C11.8436 1.66671 12.0132 1.73695 12.1382 1.86197C12.2633 1.98699 12.3335 2.15656 12.3335 2.33337V3.00004Z" fill="#3D485B"></path>
            </svg>
            <span class="ml-1 text-sm text-gray-200 font-semibold">Filters</span>
          </button>
        </div>
        <div class="w-full pb-6 overflow-x-auto">
          <table class="w-full min-w-max">
            <thead>
              <tr class="text-left">
                <th class="p-0">
                  <div class="flex h-11 items-center py-3 px-6 rounded-l-xl bg-gray-600">
                    <input type="checkbox" value="" id="">
                    <span class="ml-3 text-xs text-gray-300 font-semibold">PRODUCT</span>
                  </div>
                </th>
                <th class="p-0">
                  <div class="flex items-center h-11 px-6 bg-gray-600">
                    <span class="text-xs text-gray-300 font-semibold">CREATE AT</span>
                  </div>
                </th>
                <th class="p-0">
                  <div class="flex items-center h-11 px-6 bg-gray-600">
                    <span class="text-xs text-gray-300 font-semibold">STATUS</span>
                  </div>
                </th>
                <th class="p-0">
                  <div class="flex items-center h-11 px-6 rounded-r-xl bg-gray-600">
                    <span class="text-xs text-gray-300 font-semibold">PRICE</span>
                  </div>
                </th>
              </tr>
            </thead>
            <tbody>
               <tr :class="{ 'hidden': inc != 10 }">
                <td class="p-0">
                  <div class="flex items-center h-16 px-6">
                    <div class="flex h-full items-center">
                      <input type="checkbox" value="" id="">
                      <img class="w-8 h-8 ml-4 mr-3 rounded-md object-cover" src="trizzle-assets/images/shoe-white-table.png" alt="">
                      <span class="text-sm font-medium text-gray-100">Kappa training shoes</span>
                    </div>
                  </div>
                </td>
                <td class="p-0">
                  <div class="flex items-center h-16 px-6">
                    <span class="text-sm text-gray-100 font-medium">25 July 2022</span>
                  </div>
                </td>
                <td class="p-0">
                  <span class="inline-block py-1 px-2 text-xs leading-5 font-medium text-yellow-500 bg-yellow-900 rounded-full">LOW STOCK</span>
                </td>
                <td class="p-0">
                  <div class="flex items-center h-16 px-6">
                    <span class="text-sm text-gray-100 font-medium">$35.50</span>
                  </div>
                </td>
              </tr>
              <tr :class="{ 'hidden': inc != 20 }" class="hidden">
                <td class="p-0">
                  <div class="flex items-center h-16 px-6">
                    <div class="flex h-full items-center">
                      <input type="checkbox" value="" id="">
                      <img class="w-8 h-8 ml-4 mr-3 rounded-md object-cover" src="trizzle-assets/images/shoe-white-table.png" alt="">
                      <span class="text-sm font-medium text-gray-100">Shoe training</span>
                    </div>
                  </div>
                </td>
                <td class="p-0">
                  <div class="flex items-center h-16 px-6">
                    <span class="text-sm text-gray-100 font-medium">25 July 2022</span>
                  </div>
                </td>
                <td class="p-0">
                  <span class="inline-block py-1 px-2 text-xs leading-5 font-medium text-yellow-500 bg-yellow-900 rounded-full">LOW STOCK</span>
                </td>
                <td class="p-0">
                  <div class="flex items-center h-16 px-6">
                    <span class="text-sm text-gray-100 font-medium">$35.50</span>
                  </div>
                </td>
              </tr>
               <tr :class="{ 'hidden': inc != 10 }">
                <td class="p-0">
                  <div class="flex items-center h-16 px-6">
                    <div class="flex h-full items-center">
                      <input type="checkbox" value="" id="">
                      <img class="w-8 h-8 ml-4 mr-3 rounded-md object-cover" src="trizzle-assets/images/shoe-white-table.png" alt="">
                      <span class="text-sm font-medium text-gray-100">Kappa training shoes</span>
                    </div>
                  </div>
                </td>
                <td class="p-0">
                  <div class="flex items-center h-16 px-6">
                    <span class="text-sm text-gray-100 font-medium">25 July 2022</span>
                  </div>
                </td>
                <td class="p-0">
                  <span class="inline-block py-1 px-2 text-xs leading-5 font-medium text-red-500 bg-red-900 rounded-full">OUT OF STOCK</span>
                </td>
                <td class="p-0">
                  <div class="flex items-center h-16 px-6">
                    <span class="text-sm text-gray-100 font-medium">$35.50</span>
                  </div>
                </td>
              </tr>
              <tr :class="{ 'hidden': inc != 20 }" class="hidden">
                <td class="p-0">
                  <div class="flex items-center h-16 px-6">
                    <div class="flex h-full items-center">
                      <input type="checkbox" value="" id="">
                      <img class="w-8 h-8 ml-4 mr-3 rounded-md object-cover" src="trizzle-assets/images/shoe-white-table.png" alt="">
                      <span class="text-sm font-medium text-gray-100">Shoe training</span>
                    </div>
                  </div>
                </td>
                <td class="p-0">
                  <div class="flex items-center h-16 px-6">
                    <span class="text-sm text-gray-100 font-medium">25 July 2022</span>
                  </div>
                </td>
                <td class="p-0">
                  <span class="inline-block py-1 px-2 text-xs leading-5 font-medium text-yellow-500 bg-yellow-900 rounded-full">LOW STOCK</span>
                </td>
                <td class="p-0">
                  <div class="flex items-center h-16 px-6">
                    <span class="text-sm text-gray-100 font-medium">$35.50</span>
                  </div>
                </td>
              </tr>
               <tr :class="{ 'hidden': inc != 10 }">
                <td class="p-0">
                  <div class="flex items-center h-16 px-6">
                    <div class="flex h-full items-center">
                      <input type="checkbox" value="" id="">
                      <img class="w-8 h-8 ml-4 mr-3 rounded-md object-cover" src="trizzle-assets/images/shoe-white-table.png" alt="">
                      <span class="text-sm font-medium text-gray-100">Kappa training shoes</span>
                    </div>
                  </div>
                </td>
                <td class="p-0">
                  <div class="flex items-center h-16 px-6">
                    <span class="text-sm text-gray-100 font-medium">25 July 2022</span>
                  </div>
                </td>
                <td class="p-0">
                  <span class="inline-block py-1 px-2 text-xs leading-5 font-medium text-green-500 bg-green-800 rounded-full">IN STOCK</span>
                </td>
                <td class="p-0">
                  <div class="flex items-center h-16 px-6">
                    <span class="text-sm text-gray-100 font-medium">$35.50</span>
                  </div>
                </td>
              </tr>
              <tr :class="{ 'hidden': inc != 20 }" class="hidden">
                <td class="p-0">
                  <div class="flex items-center h-16 px-6">
                    <div class="flex h-full items-center">
                      <input type="checkbox" value="" id="">
                      <img class="w-8 h-8 ml-4 mr-3 rounded-md object-cover" src="trizzle-assets/images/shoe-white-table.png" alt="">
                      <span class="text-sm font-medium text-gray-100">Shoe training</span>
                    </div>
                  </div>
                </td>
                <td class="p-0">
                  <div class="flex items-center h-16 px-6">
                    <span class="text-sm text-gray-100 font-medium">25 July 2022</span>
                  </div>
                </td>
                <td class="p-0">
                  <span class="inline-block py-1 px-2 text-xs leading-5 font-medium text-yellow-500 bg-yellow-900 rounded-full">LOW STOCK</span>
                </td>
                <td class="p-0">
                  <div class="flex items-center h-16 px-6">
                    <span class="text-sm text-gray-100 font-medium">$35.50</span>
                  </div>
                </td>
              </tr>
               <tr :class="{ 'hidden': inc != 10 }">
                <td class="p-0">
                  <div class="flex items-center h-16 px-6">
                    <div class="flex h-full items-center">
                      <input type="checkbox" value="" id="">
                      <img class="w-8 h-8 ml-4 mr-3 rounded-md object-cover" src="trizzle-assets/images/shoe-white-table.png" alt="">
                      <span class="text-sm font-medium text-gray-100">Kappa training shoes</span>
                    </div>
                  </div>
                </td>
                <td class="p-0">
                  <div class="flex items-center h-16 px-6">
                    <span class="text-sm text-gray-100 font-medium">25 July 2022</span>
                  </div>
                </td>
                <td class="p-0">
                  <span class="inline-block py-1 px-2 text-xs leading-5 font-medium text-yellow-500 bg-yellow-900 rounded-full">LOW STOCK</span>
                </td>
                <td class="p-0">
                  <div class="flex items-center h-16 px-6">
                    <span class="text-sm text-gray-100 font-medium">$35.50</span>
                  </div>
                </td>
              </tr>
              <tr :class="{ 'hidden': inc != 20 }" class="hidden">
                <td class="p-0">
                  <div class="flex items-center h-16 px-6">
                    <div class="flex h-full items-center">
                      <input type="checkbox" value="" id="">
                      <img class="w-8 h-8 ml-4 mr-3 rounded-md object-cover" src="trizzle-assets/images/shoe-white-table.png" alt="">
                      <span class="text-sm font-medium text-gray-100">Shoe training</span>
                    </div>
                  </div>
                </td>
                <td class="p-0">
                  <div class="flex items-center h-16 px-6">
                    <span class="text-sm text-gray-100 font-medium">25 July 2022</span>
                  </div>
                </td>
                <td class="p-0">
                  <span class="inline-block py-1 px-2 text-xs leading-5 font-medium text-yellow-500 bg-yellow-900 rounded-full">LOW STOCK</span>
                </td>
                <td class="p-0">
                  <div class="flex items-center h-16 px-6">
                    <span class="text-sm text-gray-100 font-medium">$35.50</span>
                  </div>
                </td>
              </tr>
               <tr :class="{ 'hidden': inc != 10 }">
                <td class="p-0">
                  <div class="flex items-center h-16 px-6">
                    <div class="flex h-full items-center">
                      <input type="checkbox" value="" id="">
                      <img class="w-8 h-8 ml-4 mr-3 rounded-md object-cover" src="trizzle-assets/images/shoe-white-table.png" alt="">
                      <span class="text-sm font-medium text-gray-100">Kappa training shoes</span>
                    </div>
                  </div>
                </td>
                <td class="p-0">
                  <div class="flex items-center h-16 px-6">
                    <span class="text-sm text-gray-100 font-medium">25 July 2022</span>
                  </div>
                </td>
                <td class="p-0">
                  <span class="inline-block py-1 px-2 text-xs leading-5 font-medium text-red-500 bg-red-900 rounded-full">OUT OF STOCK</span>
                </td>
                <td class="p-0">
                  <div class="flex items-center h-16 px-6">
                    <span class="text-sm text-gray-100 font-medium">$35.50</span>
                  </div>
                </td>
              </tr>
              <tr :class="{ 'hidden': inc != 20 }" class="hidden">
                <td class="p-0">
                  <div class="flex items-center h-16 px-6">
                    <div class="flex h-full items-center">
                      <input type="checkbox" value="" id="">
                      <img class="w-8 h-8 ml-4 mr-3 rounded-md object-cover" src="trizzle-assets/images/shoe-white-table.png" alt="">
                      <span class="text-sm font-medium text-gray-100">Shoe training</span>
                    </div>
                  </div>
                </td>
                <td class="p-0">
                  <div class="flex items-center h-16 px-6">
                    <span class="text-sm text-gray-100 font-medium">25 July 2022</span>
                  </div>
                </td>
                <td class="p-0">
                  <span class="inline-block py-1 px-2 text-xs leading-5 font-medium text-yellow-500 bg-yellow-900 rounded-full">LOW STOCK</span>
                </td>
                <td class="p-0">
                  <div class="flex items-center h-16 px-6">
                    <span class="text-sm text-gray-100 font-medium">$35.50</span>
                  </div>
                </td>
              </tr>
               <tr :class="{ 'hidden': inc != 10 }">
                <td class="p-0">
                  <div class="flex items-center h-16 px-6">
                    <div class="flex h-full items-center">
                      <input type="checkbox" value="" id="">
                      <img class="w-8 h-8 ml-4 mr-3 rounded-md object-cover" src="trizzle-assets/images/shoe-white-table.png" alt="">
                      <span class="text-sm font-medium text-gray-100">Kappa training shoes</span>
                    </div>
                  </div>
                </td>
                <td class="p-0">
                  <div class="flex items-center h-16 px-6">
                    <span class="text-sm text-gray-100 font-medium">25 July 2022</span>
                  </div>
                </td>
                <td class="p-0">
                  <span class="inline-block py-1 px-2 text-xs leading-5 font-medium text-yellow-500 bg-yellow-900 rounded-full">LOW STOCK</span>
                </td>
                <td class="p-0">
                  <div class="flex items-center h-16 px-6">
                    <span class="text-sm text-gray-100 font-medium">$35.50</span>
                  </div>
                </td>
              </tr>
              <tr :class="{ 'hidden': inc != 20 }" class="hidden">
                <td class="p-0">
                  <div class="flex items-center h-16 px-6">
                    <div class="flex h-full items-center">
                      <input type="checkbox" value="" id="">
                      <img class="w-8 h-8 ml-4 mr-3 rounded-md object-cover" src="trizzle-assets/images/shoe-white-table.png" alt="">
                      <span class="text-sm font-medium text-gray-100">Shoe training</span>
                    </div>
                  </div>
                </td>
                <td class="p-0">
                  <div class="flex items-center h-16 px-6">
                    <span class="text-sm text-gray-100 font-medium">25 July 2022</span>
                  </div>
                </td>
                <td class="p-0">
                  <span class="inline-block py-1 px-2 text-xs leading-5 font-medium text-yellow-500 bg-yellow-900 rounded-full">LOW STOCK</span>
                </td>
                <td class="p-0">
                  <div class="flex items-center h-16 px-6">
                    <span class="text-sm text-gray-100 font-medium">$35.50</span>
                  </div>
                </td>
              </tr>
               <tr :class="{ 'hidden': inc != 10 }">
                <td class="p-0">
                  <div class="flex items-center h-16 px-6">
                    <div class="flex h-full items-center">
                      <input type="checkbox" value="" id="">
                      <img class="w-8 h-8 ml-4 mr-3 rounded-md object-cover" src="trizzle-assets/images/shoe-white-table.png" alt="">
                      <span class="text-sm font-medium text-gray-100">Kappa training shoes</span>
                    </div>
                  </div>
                </td>
                <td class="p-0">
                  <div class="flex items-center h-16 px-6">
                    <span class="text-sm text-gray-100 font-medium">25 July 2022</span>
                  </div>
                </td>
                <td class="p-0">
                  <span class="inline-block py-1 px-2 text-xs leading-5 font-medium text-green-500 bg-green-800 rounded-full">IN STOCK</span>
                </td>
                <td class="p-0">
                  <div class="flex items-center h-16 px-6">
                    <span class="text-sm text-gray-100 font-medium">$35.50</span>
                  </div>
                </td>
              </tr>
              <tr :class="{ 'hidden': inc != 20 }" class="hidden">
                <td class="p-0">
                  <div class="flex items-center h-16 px-6">
                    <div class="flex h-full items-center">
                      <input type="checkbox" value="" id="">
                      <img class="w-8 h-8 ml-4 mr-3 rounded-md object-cover" src="trizzle-assets/images/shoe-white-table.png" alt="">
                      <span class="text-sm font-medium text-gray-100">Shoe training</span>
                    </div>
                  </div>
                </td>
                <td class="p-0">
                  <div class="flex items-center h-16 px-6">
                    <span class="text-sm text-gray-100 font-medium">25 July 2022</span>
                  </div>
                </td>
                <td class="p-0">
                  <span class="inline-block py-1 px-2 text-xs leading-5 font-medium text-yellow-500 bg-yellow-900 rounded-full">LOW STOCK</span>
                </td>
                <td class="p-0">
                  <div class="flex items-center h-16 px-6">
                    <span class="text-sm text-gray-100 font-medium">$35.50</span>
                  </div>
                </td>
              </tr>
               <tr :class="{ 'hidden': inc != 10 }">
                <td class="p-0">
                  <div class="flex items-center h-16 px-6">
                    <div class="flex h-full items-center">
                      <input type="checkbox" value="" id="">
                      <img class="w-8 h-8 ml-4 mr-3 rounded-md object-cover" src="trizzle-assets/images/shoe-white-table.png" alt="">
                      <span class="text-sm font-medium text-gray-100">Kappa training shoes</span>
                    </div>
                  </div>
                </td>
                <td class="p-0">
                  <div class="flex items-center h-16 px-6">
                    <span class="text-sm text-gray-100 font-medium">25 July 2022</span>
                  </div>
                </td>
                <td class="p-0">
                  <span class="inline-block py-1 px-2 text-xs leading-5 font-medium text-yellow-500 bg-yellow-900 rounded-full">LOW STOCK</span>
                </td>
                <td class="p-0">
                  <div class="flex items-center h-16 px-6">
                    <span class="text-sm text-gray-100 font-medium">$35.50</span>
                  </div>
                </td>
              </tr>
              <tr :class="{ 'hidden': inc != 20 }" class="hidden">
                <td class="p-0">
                  <div class="flex items-center h-16 px-6">
                    <div class="flex h-full items-center">
                      <input type="checkbox" value="" id="">
                      <img class="w-8 h-8 ml-4 mr-3 rounded-md object-cover" src="trizzle-assets/images/shoe-white-table.png" alt="">
                      <span class="text-sm font-medium text-gray-100">Shoe training</span>
                    </div>
                  </div>
                </td>
                <td class="p-0">
                  <div class="flex items-center h-16 px-6">
                    <span class="text-sm text-gray-100 font-medium">25 July 2022</span>
                  </div>
                </td>
                <td class="p-0">
                  <span class="inline-block py-1 px-2 text-xs leading-5 font-medium text-yellow-500 bg-yellow-900 rounded-full">LOW STOCK</span>
                </td>
                <td class="p-0">
                  <div class="flex items-center h-16 px-6">
                    <span class="text-sm text-gray-100 font-medium">$35.50</span>
                  </div>
                </td>
              </tr>
               <tr :class="{ 'hidden': inc != 10 }">
                <td class="p-0">
                  <div class="flex items-center h-16 px-6">
                    <div class="flex h-full items-center">
                      <input type="checkbox" value="" id="">
                      <img class="w-8 h-8 ml-4 mr-3 rounded-md object-cover" src="trizzle-assets/images/shoe-white-table.png" alt="">
                      <span class="text-sm font-medium text-gray-100">Kappa training shoes</span>
                    </div>
                  </div>
                </td>
                <td class="p-0">
                  <div class="flex items-center h-16 px-6">
                    <span class="text-sm text-gray-100 font-medium">25 July 2022</span>
                  </div>
                </td>
                <td class="p-0">
                  <span class="inline-block py-1 px-2 text-xs leading-5 font-medium text-red-500 bg-red-900 rounded-full">OUT OF STOCK</span>
                </td>
                <td class="p-0">
                  <div class="flex items-center h-16 px-6">
                    <span class="text-sm text-gray-100 font-medium">$35.50</span>
                  </div>
                </td>
              </tr>
              <tr :class="{ 'hidden': inc != 20 }" class="hidden">
                <td class="p-0">
                  <div class="flex items-center h-16 px-6">
                    <div class="flex h-full items-center">
                      <input type="checkbox" value="" id="">
                      <img class="w-8 h-8 ml-4 mr-3 rounded-md object-cover" src="trizzle-assets/images/shoe-white-table.png" alt="">
                      <span class="text-sm font-medium text-gray-100">Shoe training</span>
                    </div>
                  </div>
                </td>
                <td class="p-0">
                  <div class="flex items-center h-16 px-6">
                    <span class="text-sm text-gray-100 font-medium">25 July 2022</span>
                  </div>
                </td>
                <td class="p-0">
                  <span class="inline-block py-1 px-2 text-xs leading-5 font-medium text-yellow-500 bg-yellow-900 rounded-full">LOW STOCK</span>
                </td>
                <td class="p-0">
                  <div class="flex items-center h-16 px-6">
                    <span class="text-sm text-gray-100 font-medium">$35.50</span>
                  </div>
                </td>
              </tr>
               <tr :class="{ 'hidden': inc != 10 }">
                <td class="p-0">
                  <div class="flex items-center h-16 px-6">
                    <div class="flex h-full items-center">
                      <input type="checkbox" value="" id="">
                      <img class="w-8 h-8 ml-4 mr-3 rounded-md object-cover" src="trizzle-assets/images/shoe-white-table.png" alt="">
                      <span class="text-sm font-medium text-gray-100">Kappa training shoes</span>
                    </div>
                  </div>
                </td>
                <td class="p-0">
                  <div class="flex items-center h-16 px-6">
                    <span class="text-sm text-gray-100 font-medium">25 July 2022</span>
                  </div>
                </td>
                <td class="p-0">
                  <span class="inline-block py-1 px-2 text-xs leading-5 font-medium text-yellow-500 bg-yellow-900 rounded-full">LOW STOCK</span>
                </td>
                <td class="p-0">
                  <div class="flex items-center h-16 px-6">
                    <span class="text-sm text-gray-100 font-medium">$35.50</span>
                  </div>
                </td>
              </tr>
              <tr :class="{ 'hidden': inc != 20 }" class="hidden">
                <td class="p-0">
                  <div class="flex items-center h-16 px-6">
                    <div class="flex h-full items-center">
                      <input type="checkbox" value="" id="">
                      <img class="w-8 h-8 ml-4 mr-3 rounded-md object-cover" src="trizzle-assets/images/shoe-white-table.png" alt="">
                      <span class="text-sm font-medium text-gray-100">Shoe training</span>
                    </div>
                  </div>
                </td>
                <td class="p-0">
                  <div class="flex items-center h-16 px-6">
                    <span class="text-sm text-gray-100 font-medium">25 July 2022</span>
                  </div>
                </td>
                <td class="p-0">
                  <span class="inline-block py-1 px-2 text-xs leading-5 font-medium text-yellow-500 bg-yellow-900 rounded-full">LOW STOCK</span>
                </td>
                <td class="p-0">
                  <div class="flex items-center h-16 px-6">
                    <span class="text-sm text-gray-100 font-medium">$35.50</span>
                  </div>
                </td>
              </tr>
               <tr :class="{ 'hidden': inc != 10 }">
                <td class="p-0">
                  <div class="flex items-center h-16 px-6">
                    <div class="flex h-full items-center">
                      <input type="checkbox" value="" id="">
                      <img class="w-8 h-8 ml-4 mr-3 rounded-md object-cover" src="trizzle-assets/images/shoe-white-table.png" alt="">
                      <span class="text-sm font-medium text-gray-100">Kappa training shoes</span>
                    </div>
                  </div>
                </td>
                <td class="p-0">
                  <div class="flex items-center h-16 px-6">
                    <span class="text-sm text-gray-100 font-medium">25 July 2022</span>
                  </div>
                </td>
                <td class="p-0">
                  <span class="inline-block py-1 px-2 text-xs leading-5 font-medium text-green-500 bg-green-800 rounded-full">IN STOCK</span>
                </td>
                <td class="p-0">
                  <div class="flex items-center h-16 px-6">
                    <span class="text-sm text-gray-100 font-medium">$35.50</span>
                  </div>
                </td>
              </tr>
              <tr :class="{ 'hidden': inc != 20 }" class="hidden">
                <td class="p-0">
                  <div class="flex items-center h-16 px-6">
                    <div class="flex h-full items-center">
                      <input type="checkbox" value="" id="">
                      <img class="w-8 h-8 ml-4 mr-3 rounded-md object-cover" src="trizzle-assets/images/shoe-white-table.png" alt="">
                      <span class="text-sm font-medium text-gray-100">Shoe training</span>
                    </div>
                  </div>
                </td>
                <td class="p-0">
                  <div class="flex items-center h-16 px-6">
                    <span class="text-sm text-gray-100 font-medium">25 July 2022</span>
                  </div>
                </td>
                <td class="p-0">
                  <span class="inline-block py-1 px-2 text-xs leading-5 font-medium text-yellow-500 bg-yellow-900 rounded-full">LOW STOCK</span>
                </td>
                <td class="p-0">
                  <div class="flex items-center h-16 px-6">
                    <span class="text-sm text-gray-100 font-medium">$35.50</span>
                  </div>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
      <div class="flex flex-wrap items-center px-6 pt-8 border-t border-gray-400">
        <div class="w-full sm:w-auto mb-4 sm:mb-0 mr-auto">
          <div x-data="{ toggle: false }" class="flex items-center gap-2">
            <button x-on:click="toggle = !toggle" :class="{'bg-blue-500': toggle, 'bg-gray-600': !toggle}" class="flex items-center justify-center h-6 w-11 bg-gray-600 rounded-full">
              <div :class="{'bg-transparent': toggle, 'bg-white': !toggle}" class="h-5 w-5 rounded-full bg-white"></div>
              <div :class="{'bg-transparent': !toggle, 'bg-white': toggle}" class="h-5 w-5 rounded-full bg-transparent"></div>
            </button>
            <span class="text-sm text-gray-200 font-medium">Dense</span>
          </div>
        </div>
        <div class="w-full sm:w-auto mb-6 sm:mb-0 sm:mr-6">
          <div class="flex items-center justify-end ml-auto">
            <div class="sm:mr-8">
              <span class="text-sm text-gray-400 font-medium">Rows per page</span>
              <select class="text-sm text-gray-200 font-medium bg-transparent outline-none" name="" id="">
                <option value="">1</option>
                <option value="">2</option>
                <option value="">3</option>
              </select>
            </div>
            <span x-text="" class="hidden sm:inline text-sm text-gray-400 font-medium">1-10 of 20</span>
          </div>
        </div>
        <div class="w-full sm:w-auto mb-6 sm:mb-0">
          <div class="flex items-center justify-end">
            <a x-on:click.prevent="inc > min ? inc -= show : min" class="inline-flex items-center justify-center h-8 w-12 p-1 mr-3 text-xs text-gray-400 font-semibold bg-gray-600 hover:bg-gray-700 rounded-lg transition duration-200" href="#">
              <svg width="6" height="8" viewBox="0 0 6 8" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M2.52655 3.99988L4.88655 1.63988C5.01072 1.51498 5.08041 1.34601 5.08041 1.16988C5.08041 0.993761 5.01072 0.824793 4.88655 0.699884C4.82457 0.637399 4.75084 0.587802 4.6696 0.553957C4.58836 0.520111 4.50122 0.502686 4.41321 0.502686C4.32521 0.502686 4.23807 0.520111 4.15683 0.553957C4.07559 0.587802 4.00186 0.637399 3.93988 0.699884L1.11321 3.52655C1.05073 3.58853 1.00113 3.66226 0.967287 3.7435C0.933441 3.82474 0.916016 3.91188 0.916016 3.99988C0.916016 4.08789 0.933441 4.17503 0.967287 4.25627C1.00113 4.33751 1.05073 4.41124 1.11321 4.47322L3.93988 7.33322C4.00217 7.39501 4.07605 7.44389 4.15728 7.47707C4.2385 7.51024 4.32548 7.52706 4.41321 7.52655C4.50095 7.52706 4.58793 7.51024 4.66915 7.47707C4.75038 7.44389 4.82425 7.39501 4.88655 7.33322C5.01072 7.20831 5.08041 7.03934 5.08041 6.86322C5.08041 6.68709 5.01072 6.51813 4.88655 6.39322L2.52655 3.99988Z" fill="#919EB0"></path>
              </svg>
            </a>
            <a x-on:click.prevent="inc < max ? inc += show : max" class="inline-flex items-center justify-center h-8 w-12 p-1 text-xs text-blue-50 font-semibold bg-blue-500 hover:bg-blue-600 rounded-lg transition duration-200" href="#">
              <svg width="6" height="10" viewBox="0 0 6 10" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M5.36015 4.52661L1.58682 0.759943C1.52484 0.697457 1.45111 0.647861 1.36987 0.614016C1.28863 0.58017 1.20149 0.562744 1.11348 0.562744C1.02548 0.562744 0.938339 0.58017 0.8571 0.614016C0.77586 0.647861 0.702126 0.697457 0.640151 0.759943C0.515983 0.884851 0.446289 1.05382 0.446289 1.22994C0.446289 1.40607 0.515983 1.57503 0.640151 1.69994L3.94015 5.03328L0.640151 8.33328C0.515983 8.45818 0.446289 8.62715 0.446289 8.80328C0.446289 8.9794 0.515983 9.14837 0.640151 9.27328C0.701894 9.33627 0.775524 9.38638 0.856774 9.42071C0.938024 9.45504 1.02528 9.47291 1.11348 9.47328C1.20169 9.47291 1.28894 9.45504 1.37019 9.42071C1.45144 9.38638 1.52507 9.33627 1.58682 9.27328L5.36015 5.50661C5.42782 5.44418 5.48183 5.36841 5.51876 5.28408C5.5557 5.19975 5.57477 5.10868 5.57477 5.01661C5.57477 4.92454 5.5557 4.83347 5.51876 4.74914C5.48183 4.66481 5.42782 4.58904 5.36015 4.52661Z" fill="#F4F6FF"></path>
              </svg>
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<section x-data="{ mobileNavOpen: false }">
  <nav class="relative flex items-center justify-between p-8 bg-gray-700 mb-3">
    <div class="w-full xl:w-auto px-2 xl:mr-12">
      <div class="flex items-center justify-between">
        <a class="inline-flex items-center h-8" href="#">
          <img src="trizzle-assets/logos/trizzle-logo.svg" alt="">
        </a>
        <div class="xl:hidden">
          <button x-on:click="mobileNavOpen = !mobileNavOpen" class="text-gray-400 hover:text-gray-300 focus:outline-none">
            <svg width="20" height="12" viewBox="0 0 20 12" fill="none" xmlns="http://www.w3.org/2000/svg">
              <title>Mobile menu</title>
              <path d="M1 2H19C19.2652 2 19.5196 1.89464 19.7071 1.70711C19.8946 1.51957 20 1.26522 20 1C20 0.734784 19.8946 0.48043 19.7071 0.292893C19.5196 0.105357 19.2652 0 19 0H1C0.734784 0 0.48043 0.105357 0.292893 0.292893C0.105357 0.48043 0 0.734784 0 1C0 1.26522 0.105357 1.51957 0.292893 1.70711C0.48043 1.89464 0.734784 2 1 2ZM19 10H1C0.734784 10 0.48043 10.1054 0.292893 10.2929C0.105357 10.4804 0 10.7348 0 11C0 11.2652 0.105357 11.5196 0.292893 11.7071C0.48043 11.8946 0.734784 12 1 12H19C19.2652 12 19.5196 11.8946 19.7071 11.7071C19.8946 11.5196 20 11.2652 20 11C20 10.7348 19.8946 10.4804 19.7071 10.2929C19.5196 10.1054 19.2652 10 19 10ZM19 5H1C0.734784 5 0.48043 5.10536 0.292893 5.29289C0.105357 5.48043 0 5.73478 0 6C0 6.26522 0.105357 6.51957 0.292893 6.70711C0.48043 6.89464 0.734784 7 1 7H19C19.2652 7 19.5196 6.89464 19.7071 6.70711C19.8946 6.51957 20 6.26522 20 6C20 5.73478 19.8946 5.48043 19.7071 5.29289C19.5196 5.10536 19.2652 5 19 5Z" fill="currentColor"></path>
            </svg>
          </button>
        </div>
      </div>
    </div>
    <div class="hidden xl:block w-full md:w-auto px-2 absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
      <ul class="flex items-center">
        <li class="mr-10">
          <a class="inline-flex items-center text-sm font-semibold text-gray-300 hover:text-gray-200" href="#">
            <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M7.33317 9.83329H1.49984C1.27882 9.83329 1.06686 9.92109 0.910582 10.0774C0.754301 10.2337 0.666504 10.4456 0.666504 10.6666V16.5C0.666504 16.721 0.754301 16.9329 0.910582 17.0892C1.06686 17.2455 1.27882 17.3333 1.49984 17.3333H7.33317C7.55418 17.3333 7.76615 17.2455 7.92243 17.0892C8.07871 16.9329 8.1665 16.721 8.1665 16.5V10.6666C8.1665 10.4456 8.07871 10.2337 7.92243 10.0774C7.76615 9.92109 7.55418 9.83329 7.33317 9.83329ZM6.49984 15.6666H2.33317V11.5H6.49984V15.6666ZM16.4998 0.666626H10.6665C10.4455 0.666626 10.2335 0.754423 10.0772 0.910704C9.92097 1.06698 9.83317 1.27895 9.83317 1.49996V7.33329C9.83317 7.55431 9.92097 7.76627 10.0772 7.92255C10.2335 8.07883 10.4455 8.16663 10.6665 8.16663H16.4998C16.7208 8.16663 16.9328 8.07883 17.0891 7.92255C17.2454 7.76627 17.3332 7.55431 17.3332 7.33329V1.49996C17.3332 1.27895 17.2454 1.06698 17.0891 0.910704C16.9328 0.754423 16.7208 0.666626 16.4998 0.666626ZM15.6665 6.49996H11.4998V2.33329H15.6665V6.49996ZM16.4998 9.83329H10.6665C10.4455 9.83329 10.2335 9.92109 10.0772 10.0774C9.92097 10.2337 9.83317 10.4456 9.83317 10.6666V16.5C9.83317 16.721 9.92097 16.9329 10.0772 17.0892C10.2335 17.2455 10.4455 17.3333 10.6665 17.3333H16.4998C16.7208 17.3333 16.9328 17.2455 17.0891 17.0892C17.2454 16.9329 17.3332 16.721 17.3332 16.5V10.6666C17.3332 10.4456 17.2454 10.2337 17.0891 10.0774C16.9328 9.92109 16.7208 9.83329 16.4998 9.83329ZM15.6665 15.6666H11.4998V11.5H15.6665V15.6666ZM7.33317 0.666626H1.49984C1.27882 0.666626 1.06686 0.754423 0.910582 0.910704C0.754301 1.06698 0.666504 1.27895 0.666504 1.49996V7.33329C0.666504 7.55431 0.754301 7.76627 0.910582 7.92255C1.06686 8.07883 1.27882 8.16663 1.49984 8.16663H7.33317C7.55418 8.16663 7.76615 8.07883 7.92243 7.92255C8.07871 7.76627 8.1665 7.55431 8.1665 7.33329V1.49996C8.1665 1.27895 8.07871 1.06698 7.92243 0.910704C7.76615 0.754423 7.55418 0.666626 7.33317 0.666626ZM6.49984 6.49996H2.33317V2.33329H6.49984V6.49996Z" fill="#3D485B"></path>
            </svg>
            <span class="ml-2">Overview</span>
          </a>
        </li>
        <li class="mr-10">
          <a class="inline-flex items-center text-sm font-semibold text-gray-300 hover:text-gray-200" href="#">
            <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M8.99984 3.99996C8.77882 3.99996 8.56686 4.08776 8.41058 4.24404C8.2543 4.40032 8.1665 4.61228 8.1665 4.83329V13.1666C8.1665 13.3876 8.2543 13.5996 8.41058 13.7559C8.56686 13.9122 8.77882 14 8.99984 14C9.22085 14 9.43281 13.9122 9.58909 13.7559C9.74537 13.5996 9.83317 13.3876 9.83317 13.1666V4.83329C9.83317 4.61228 9.74537 4.40032 9.58909 4.24404C9.43281 4.08776 9.22085 3.99996 8.99984 3.99996ZM4.83317 8.99996C4.61216 8.99996 4.4002 9.08776 4.24392 9.24404C4.08763 9.40032 3.99984 9.61228 3.99984 9.83329V13.1666C3.99984 13.3876 4.08763 13.5996 4.24392 13.7559C4.4002 13.9122 4.61216 14 4.83317 14C5.05418 14 5.26615 13.9122 5.42243 13.7559C5.57871 13.5996 5.6665 13.3876 5.6665 13.1666V9.83329C5.6665 9.61228 5.57871 9.40032 5.42243 9.24404C5.26615 9.08776 5.05418 8.99996 4.83317 8.99996ZM13.1665 7.33329C12.9455 7.33329 12.7335 7.42109 12.5772 7.57737C12.421 7.73365 12.3332 7.94561 12.3332 8.16663V13.1666C12.3332 13.3876 12.421 13.5996 12.5772 13.7559C12.7335 13.9122 12.9455 14 13.1665 14C13.3875 14 13.5995 13.9122 13.7558 13.7559C13.912 13.5996 13.9998 13.3876 13.9998 13.1666V8.16663C13.9998 7.94561 13.912 7.73365 13.7558 7.57737C13.5995 7.42109 13.3875 7.33329 13.1665 7.33329ZM14.8332 0.666626H3.1665C2.50346 0.666626 1.86758 0.930018 1.39874 1.39886C0.929896 1.8677 0.666504 2.50358 0.666504 3.16663V14.8333C0.666504 15.4963 0.929896 16.1322 1.39874 16.6011C1.86758 17.0699 2.50346 17.3333 3.1665 17.3333H14.8332C15.4962 17.3333 16.1321 17.0699 16.6009 16.6011C17.0698 16.1322 17.3332 15.4963 17.3332 14.8333V3.16663C17.3332 2.50358 17.0698 1.8677 16.6009 1.39886C16.1321 0.930018 15.4962 0.666626 14.8332 0.666626ZM15.6665 14.8333C15.6665 15.0543 15.5787 15.2663 15.4224 15.4225C15.2661 15.5788 15.0542 15.6666 14.8332 15.6666H3.1665C2.94549 15.6666 2.73353 15.5788 2.57725 15.4225C2.42097 15.2663 2.33317 15.0543 2.33317 14.8333V3.16663C2.33317 2.94561 2.42097 2.73365 2.57725 2.57737C2.73353 2.42109 2.94549 2.33329 3.1665 2.33329H14.8332C15.0542 2.33329 15.2661 2.42109 15.4224 2.57737C15.5787 2.73365 15.6665 2.94561 15.6665 3.16663V14.8333Z" fill="#3D485B"></path>
            </svg>
            <span class="ml-2">Analytics</span>
          </a>
        </li>
        <li class="mr-10">
          <a class="inline-flex items-center text-sm font-semibold text-gray-300 hover:text-gray-200" href="#">
            <svg width="18" height="16" viewBox="0 0 18 16" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M14.8334 3.41671H12.3334V2.58337C12.3334 1.92033 12.07 1.28445 11.6012 0.815607C11.1323 0.346766 10.4965 0.083374 9.83341 0.083374H8.16675C7.50371 0.083374 6.86782 0.346766 6.39898 0.815607C5.93014 1.28445 5.66675 1.92033 5.66675 2.58337V3.41671H3.16675C2.50371 3.41671 1.86782 3.6801 1.39898 4.14894C0.93014 4.61778 0.666748 5.25367 0.666748 5.91671V13.4167C0.666748 14.0797 0.93014 14.7156 1.39898 15.1845C1.86782 15.6533 2.50371 15.9167 3.16675 15.9167H14.8334C15.4965 15.9167 16.1323 15.6533 16.6012 15.1845C17.07 14.7156 17.3334 14.0797 17.3334 13.4167V5.91671C17.3334 5.25367 17.07 4.61778 16.6012 4.14894C16.1323 3.6801 15.4965 3.41671 14.8334 3.41671ZM7.33341 2.58337C7.33341 2.36236 7.42121 2.1504 7.57749 1.99412C7.73377 1.83784 7.94573 1.75004 8.16675 1.75004H9.83341C10.0544 1.75004 10.2664 1.83784 10.4227 1.99412C10.5789 2.1504 10.6667 2.36236 10.6667 2.58337V3.41671H7.33341V2.58337ZM15.6667 13.4167C15.6667 13.6377 15.579 13.8497 15.4227 14.006C15.2664 14.1622 15.0544 14.25 14.8334 14.25H3.16675C2.94573 14.25 2.73377 14.1622 2.57749 14.006C2.42121 13.8497 2.33341 13.6377 2.33341 13.4167V8.83337C3.14628 9.1558 3.9819 9.41762 4.83341 9.61671V10.1084C4.83341 10.3294 4.92121 10.5413 5.07749 10.6976C5.23377 10.8539 5.44573 10.9417 5.66675 10.9417C5.88776 10.9417 6.09972 10.8539 6.256 10.6976C6.41228 10.5413 6.50008 10.3294 6.50008 10.1084V9.93337C7.3287 10.0462 8.16382 10.1046 9.00008 10.1084C9.83634 10.1046 10.6715 10.0462 11.5001 9.93337V10.1084C11.5001 10.3294 11.5879 10.5413 11.7442 10.6976C11.9004 10.8539 12.1124 10.9417 12.3334 10.9417C12.5544 10.9417 12.7664 10.8539 12.9227 10.6976C13.079 10.5413 13.1667 10.3294 13.1667 10.1084V9.61671C14.0183 9.41762 14.8539 9.1558 15.6667 8.83337V13.4167ZM15.6667 7.00837C14.8562 7.35045 14.0204 7.62907 13.1667 7.84171V7.58337C13.1667 7.36236 13.079 7.1504 12.9227 6.99412C12.7664 6.83784 12.5544 6.75004 12.3334 6.75004C12.1124 6.75004 11.9004 6.83784 11.7442 6.99412C11.5879 7.1504 11.5001 7.36236 11.5001 7.58337V8.20004C9.84279 8.45007 8.15737 8.45007 6.50008 8.20004V7.58337C6.50008 7.36236 6.41228 7.1504 6.256 6.99412C6.09972 6.83784 5.88776 6.75004 5.66675 6.75004C5.44573 6.75004 5.23377 6.83784 5.07749 6.99412C4.92121 7.1504 4.83341 7.36236 4.83341 7.58337V7.85837C3.97977 7.64573 3.14392 7.36712 2.33341 7.02504V5.91671C2.33341 5.69569 2.42121 5.48373 2.57749 5.32745C2.73377 5.17117 2.94573 5.08337 3.16675 5.08337H14.8334C15.0544 5.08337 15.2664 5.17117 15.4227 5.32745C15.579 5.48373 15.6667 5.69569 15.6667 5.91671V7.00837Z" fill="#3D485B"></path>
            </svg>
            <span class="ml-2">Products</span>
          </a>
        </li>
        <li class="mr-10">
          <a class="inline-flex items-center text-sm font-semibold text-gray-300 hover:text-gray-200" href="#">
            <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M10.6666 14C10.8876 14 11.0996 13.9122 11.2558 13.756C11.4121 13.5997 11.4999 13.3877 11.4999 13.1667V11.5C11.4999 11.279 11.4121 11.0671 11.2558 10.9108C11.0996 10.7545 10.8876 10.6667 10.6666 10.6667C10.4456 10.6667 10.2336 10.7545 10.0773 10.9108C9.92104 11.0671 9.83324 11.279 9.83324 11.5V13.1667C9.83324 13.3877 9.92104 13.5997 10.0773 13.756C10.2336 13.9122 10.4456 14 10.6666 14ZM7.33324 14C7.55426 14 7.76622 13.9122 7.9225 13.756C8.07878 13.5997 8.16658 13.3877 8.16658 13.1667V11.5C8.16658 11.279 8.07878 11.0671 7.9225 10.9108C7.76622 10.7545 7.55426 10.6667 7.33324 10.6667C7.11223 10.6667 6.90027 10.7545 6.74399 10.9108C6.58771 11.0671 6.49991 11.279 6.49991 11.5V13.1667C6.49991 13.3877 6.58771 13.5997 6.74399 13.756C6.90027 13.9122 7.11223 14 7.33324 14ZM14.8332 4.00004H13.6832L12.2416 1.12504C12.1975 1.01925 12.1321 0.923688 12.0495 0.844316C11.9668 0.764945 11.8687 0.703474 11.7612 0.663745C11.6537 0.624016 11.5392 0.606883 11.4248 0.613416C11.3104 0.61995 11.1985 0.650009 11.0963 0.701717C10.994 0.753424 10.9035 0.825668 10.8304 0.913933C10.7573 1.0022 10.7032 1.10459 10.6715 1.2147C10.6398 1.32482 10.6311 1.4403 10.646 1.55392C10.661 1.66753 10.6992 1.77685 10.7582 1.87504L11.8166 4.00004H6.18324L7.24158 1.87504C7.32246 1.6808 7.32688 1.46315 7.25393 1.26578C7.18098 1.06842 7.03607 0.905957 6.84829 0.811014C6.66052 0.716072 6.44378 0.695677 6.24159 0.753925C6.0394 0.812174 5.86673 0.944752 5.75824 1.12504L4.31658 4.00004H3.16658C2.57757 4.009 2.01064 4.22567 1.56578 4.61182C1.12093 4.99797 0.82672 5.52881 0.735051 6.11072C0.643381 6.69262 0.760139 7.2882 1.06473 7.79242C1.36932 8.29664 1.84218 8.6771 2.39991 8.86671L3.01658 15.0834C3.07876 15.7022 3.36936 16.2756 3.83164 16.6916C4.29391 17.1077 4.89466 17.3365 5.51658 17.3334H12.4999C13.1218 17.3365 13.7226 17.1077 14.1848 16.6916C14.6471 16.2756 14.9377 15.7022 14.9999 15.0834L15.6166 8.86671C16.1755 8.67654 16.6491 8.29468 16.9535 7.78878C17.2579 7.28287 17.3734 6.68557 17.2796 6.10266C17.1857 5.51976 16.8886 4.98886 16.4409 4.60402C15.9931 4.21918 15.4236 4.00522 14.8332 4.00004ZM13.3249 14.9167C13.3042 15.123 13.2073 15.3141 13.0532 15.4528C12.8991 15.5915 12.6989 15.6677 12.4916 15.6667H5.50824C5.30094 15.6677 5.10069 15.5915 4.9466 15.4528C4.7925 15.3141 4.69564 15.123 4.67491 14.9167L4.08324 9.00004H13.9166L13.3249 14.9167ZM14.8332 7.33338H3.16658C2.94556 7.33338 2.7336 7.24558 2.57732 7.0893C2.42104 6.93302 2.33324 6.72106 2.33324 6.50004C2.33324 6.27903 2.42104 6.06707 2.57732 5.91079C2.7336 5.75451 2.94556 5.66671 3.16658 5.66671H14.8332C15.0543 5.66671 15.2662 5.75451 15.4225 5.91079C15.5788 6.06707 15.6666 6.27903 15.6666 6.50004C15.6666 6.72106 15.5788 6.93302 15.4225 7.0893C15.2662 7.24558 15.0543 7.33338 14.8332 7.33338Z" fill="#3D485B"></path>
            </svg>
            <span class="ml-2">Orders</span>
            <div class="flex w-5 h-5 ml-2 items-center justify-center text-xs text-white bg-blue-500 rounded-full">4</div>
          </a>
        </li>
        <li class="mr-10">
          <a class="inline-flex items-center text-sm font-semibold text-gray-300 hover:text-gray-200" href="#">
            <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M11.3417 9.23329C11.8692 8.66683 12.1664 7.92394 12.1751 7.14996C12.1751 6.31453 11.8432 5.51331 11.2525 4.92257C10.6617 4.33183 9.86051 3.99996 9.02508 3.99996C8.18965 3.99996 7.38843 4.33183 6.7977 4.92257C6.20696 5.51331 5.87508 6.31453 5.87508 7.14996C5.88378 7.92394 6.18093 8.66683 6.70841 9.23329C5.97396 9.59902 5.34193 10.1416 4.86918 10.8122C4.39642 11.4827 4.09777 12.2603 4.00008 13.075C3.97577 13.296 4.04025 13.5176 4.17934 13.6911C4.31843 13.8645 4.52073 13.9756 4.74175 14C4.96276 14.0243 5.18438 13.9598 5.35785 13.8207C5.53132 13.6816 5.64244 13.4793 5.66675 13.2583C5.76619 12.4509 6.15745 11.7078 6.76682 11.1688C7.37619 10.6299 8.16159 10.3324 8.97508 10.3324C9.78857 10.3324 10.574 10.6299 11.1833 11.1688C11.7927 11.7078 12.184 12.4509 12.2834 13.2583C12.3066 13.472 12.4114 13.6684 12.576 13.8066C12.7406 13.9448 12.9523 14.0141 13.1667 14H13.2584C13.4769 13.9748 13.6765 13.8644 13.8139 13.6927C13.9512 13.521 14.0152 13.3019 13.9917 13.0833C13.9013 12.2729 13.6121 11.4975 13.1498 10.8258C12.6875 10.1542 12.0664 9.60712 11.3417 9.23329ZM9.00008 8.63329C8.70671 8.63329 8.41992 8.5463 8.17598 8.38331C7.93205 8.22031 7.74193 7.98865 7.62966 7.71761C7.51739 7.44656 7.48801 7.14831 7.54525 6.86058C7.60248 6.57284 7.74376 6.30853 7.95121 6.10108C8.15865 5.89364 8.42296 5.75236 8.7107 5.69513C8.99844 5.63789 9.29668 5.66727 9.56773 5.77954C9.83877 5.89181 10.0704 6.08193 10.2334 6.32586C10.3964 6.5698 10.4834 6.85658 10.4834 7.14996C10.4834 7.54336 10.3271 7.92066 10.049 8.19883C9.77078 8.47701 9.39349 8.63329 9.00008 8.63329ZM14.8334 0.666626H3.16675C2.50371 0.666626 1.86782 0.930018 1.39898 1.39886C0.93014 1.8677 0.666748 2.50358 0.666748 3.16663V14.8333C0.666748 15.4963 0.93014 16.1322 1.39898 16.6011C1.86782 17.0699 2.50371 17.3333 3.16675 17.3333H14.8334C15.4965 17.3333 16.1323 17.0699 16.6012 16.6011C17.07 16.1322 17.3334 15.4963 17.3334 14.8333V3.16663C17.3334 2.50358 17.07 1.8677 16.6012 1.39886C16.1323 0.930018 15.4965 0.666626 14.8334 0.666626ZM15.6667 14.8333C15.6667 15.0543 15.579 15.2663 15.4227 15.4225C15.2664 15.5788 15.0544 15.6666 14.8334 15.6666H3.16675C2.94573 15.6666 2.73377 15.5788 2.57749 15.4225C2.42121 15.2663 2.33341 15.0543 2.33341 14.8333V3.16663C2.33341 2.94561 2.42121 2.73365 2.57749 2.57737C2.73377 2.42109 2.94573 2.33329 3.16675 2.33329H14.8334C15.0544 2.33329 15.2664 2.42109 15.4227 2.57737C15.579 2.73365 15.6667 2.94561 15.6667 3.16663V14.8333Z" fill="#3D485B"></path>
            </svg>
            <span class="ml-2">Customers</span>
          </a>
        </li>
      </ul>
    </div>
    <div class="hidden xl:block w-full md:w-auto px-2">
      <div class="md:flex items-center">
        <div class="w-full md:w-auto mb-6 md:mb-0 md:mr-4">
          <div class="flex flex-wrap items-center -mb-2">
            <a class="inline-block mb-2 mr-6 text-gray-400 hover:text-gray-300" href="#">
              <svg width="20" height="16" viewBox="0 0 20 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M17 0H3C2.20435 0 1.44129 0.316071 0.87868 0.87868C0.316071 1.44129 0 2.20435 0 3V13C0 13.7956 0.316071 14.5587 0.87868 15.1213C1.44129 15.6839 2.20435 16 3 16H17C17.7956 16 18.5587 15.6839 19.1213 15.1213C19.6839 14.5587 20 13.7956 20 13V3C20 2.20435 19.6839 1.44129 19.1213 0.87868C18.5587 0.316071 17.7956 0 17 0ZM3 2H17C17.2652 2 17.5196 2.10536 17.7071 2.29289C17.8946 2.48043 18 2.73478 18 3L10 7.88L2 3C2 2.73478 2.10536 2.48043 2.29289 2.29289C2.48043 2.10536 2.73478 2 3 2ZM18 13C18 13.2652 17.8946 13.5196 17.7071 13.7071C17.5196 13.8946 17.2652 14 17 14H3C2.73478 14 2.48043 13.8946 2.29289 13.7071C2.10536 13.5196 2 13.2652 2 13V5.28L9.48 9.85C9.63202 9.93777 9.80446 9.98397 9.98 9.98397C10.1555 9.98397 10.328 9.93777 10.48 9.85L18 5.28V13Z" fill="currentColor"></path>
              </svg>
            </a>
            <a class="inline-block mb-2 mr-8 text-gray-400 hover:text-gray-300" href="#">
              <svg width="16" height="20" viewBox="0 0 16 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M14 11.18V8C13.9986 6.58312 13.4958 5.21247 12.5806 4.13077C11.6655 3.04908 10.3971 2.32615 9 2.09V1C9 0.734784 8.89464 0.48043 8.70711 0.292893C8.51957 0.105357 8.26522 0 8 0C7.73478 0 7.48043 0.105357 7.29289 0.292893C7.10536 0.48043 7 0.734784 7 1V2.09C5.60294 2.32615 4.33452 3.04908 3.41939 4.13077C2.50425 5.21247 2.00144 6.58312 2 8V11.18C1.41645 11.3863 0.910998 11.7681 0.552938 12.2729C0.194879 12.7778 0.00173951 13.3811 0 14V16C0 16.2652 0.105357 16.5196 0.292893 16.7071C0.48043 16.8946 0.734784 17 1 17H4.14C4.37028 17.8474 4.873 18.5954 5.5706 19.1287C6.26819 19.6621 7.1219 19.951 8 19.951C8.8781 19.951 9.73181 19.6621 10.4294 19.1287C11.127 18.5954 11.6297 17.8474 11.86 17H15C15.2652 17 15.5196 16.8946 15.7071 16.7071C15.8946 16.5196 16 16.2652 16 16V14C15.9983 13.3811 15.8051 12.7778 15.4471 12.2729C15.089 11.7681 14.5835 11.3863 14 11.18ZM4 8C4 6.93913 4.42143 5.92172 5.17157 5.17157C5.92172 4.42143 6.93913 4 8 4C9.06087 4 10.0783 4.42143 10.8284 5.17157C11.5786 5.92172 12 6.93913 12 8V11H4V8ZM8 18C7.65097 17.9979 7.30857 17.9045 7.00683 17.7291C6.70509 17.5536 6.45451 17.3023 6.28 17H9.72C9.54549 17.3023 9.29491 17.5536 8.99317 17.7291C8.69143 17.9045 8.34903 17.9979 8 18ZM14 15H2V14C2 13.7348 2.10536 13.4804 2.29289 13.2929C2.48043 13.1054 2.73478 13 3 13H13C13.2652 13 13.5196 13.1054 13.7071 13.2929C13.8946 13.4804 14 13.7348 14 14V15Z" fill="currentColor"></path>
              </svg>
            </a>
            <a class="group inline-flex mb-2 items-center" href="#">
              <img class="h-8 w-8 mr-3 rounded-full object-cover" src="trizzle-assets/images/avatar-men.png" alt="">
              <h4 class="text-white font-extrabold tracking-wide mr-4">John Doe</h4>
              <span class="text-gray-400 group-hover:text-gray-300">
                <svg width="10" height="6" viewBox="0 0 10 6" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M1 1L5 5L9 1" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                </svg>
              </span>
            </a>
          </div>
        </div>
      </div>
    </div>
  </nav>
  <div :class="{'block': mobileNavOpen, 'hidden': !mobileNavOpen}" class="hidden fixed top-0 left-0 bottom-0 w-3/4 lg:w-80 sm:max-w-xs z-50">
    <div x-on:click="mobileNavOpen = !mobileNavOpen" class="fixed top-0 left-0 w-full h-full bg-gray-800 opacity-50"></div>
    <nav class="relative flex flex-col p-8 h-full w-full bg-gray-700 overflow-y-auto">
      <div class="flex items-center justify-between mb-8">
        <a class="inline-flex items-center" href="#">
          <img class="h-10" src="trizzle-assets/logos/trizzle-logo.svg" alt="">
        </a>
        <button x-on:click="mobileNavOpen = !mobileNavOpen">
          <svg class="h-6 w-6 text-gray-400 cursor-pointer" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
          </svg>
        </button>
      </div>
      <ul class="mb-10">
        <li class="mb-10">
          <a class="inline-flex items-center text-lg font-semibold text-gray-300 hover:text-gray-200" href="#">
            <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M7.33317 9.83329H1.49984C1.27882 9.83329 1.06686 9.92109 0.910582 10.0774C0.754301 10.2337 0.666504 10.4456 0.666504 10.6666V16.5C0.666504 16.721 0.754301 16.9329 0.910582 17.0892C1.06686 17.2455 1.27882 17.3333 1.49984 17.3333H7.33317C7.55418 17.3333 7.76615 17.2455 7.92243 17.0892C8.07871 16.9329 8.1665 16.721 8.1665 16.5V10.6666C8.1665 10.4456 8.07871 10.2337 7.92243 10.0774C7.76615 9.92109 7.55418 9.83329 7.33317 9.83329ZM6.49984 15.6666H2.33317V11.5H6.49984V15.6666ZM16.4998 0.666626H10.6665C10.4455 0.666626 10.2335 0.754423 10.0772 0.910704C9.92097 1.06698 9.83317 1.27895 9.83317 1.49996V7.33329C9.83317 7.55431 9.92097 7.76627 10.0772 7.92255C10.2335 8.07883 10.4455 8.16663 10.6665 8.16663H16.4998C16.7208 8.16663 16.9328 8.07883 17.0891 7.92255C17.2454 7.76627 17.3332 7.55431 17.3332 7.33329V1.49996C17.3332 1.27895 17.2454 1.06698 17.0891 0.910704C16.9328 0.754423 16.7208 0.666626 16.4998 0.666626ZM15.6665 6.49996H11.4998V2.33329H15.6665V6.49996ZM16.4998 9.83329H10.6665C10.4455 9.83329 10.2335 9.92109 10.0772 10.0774C9.92097 10.2337 9.83317 10.4456 9.83317 10.6666V16.5C9.83317 16.721 9.92097 16.9329 10.0772 17.0892C10.2335 17.2455 10.4455 17.3333 10.6665 17.3333H16.4998C16.7208 17.3333 16.9328 17.2455 17.0891 17.0892C17.2454 16.9329 17.3332 16.721 17.3332 16.5V10.6666C17.3332 10.4456 17.2454 10.2337 17.0891 10.0774C16.9328 9.92109 16.7208 9.83329 16.4998 9.83329ZM15.6665 15.6666H11.4998V11.5H15.6665V15.6666ZM7.33317 0.666626H1.49984C1.27882 0.666626 1.06686 0.754423 0.910582 0.910704C0.754301 1.06698 0.666504 1.27895 0.666504 1.49996V7.33329C0.666504 7.55431 0.754301 7.76627 0.910582 7.92255C1.06686 8.07883 1.27882 8.16663 1.49984 8.16663H7.33317C7.55418 8.16663 7.76615 8.07883 7.92243 7.92255C8.07871 7.76627 8.1665 7.55431 8.1665 7.33329V1.49996C8.1665 1.27895 8.07871 1.06698 7.92243 0.910704C7.76615 0.754423 7.55418 0.666626 7.33317 0.666626ZM6.49984 6.49996H2.33317V2.33329H6.49984V6.49996Z" fill="#3D485B"></path>
            </svg>
            <span class="ml-2">Overview</span>
          </a>
        </li>
        <li class="mb-10">
          <a class="inline-flex items-center text-lg font-semibold text-gray-300 hover:text-gray-200" href="#">
            <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M8.99984 3.99996C8.77882 3.99996 8.56686 4.08776 8.41058 4.24404C8.2543 4.40032 8.1665 4.61228 8.1665 4.83329V13.1666C8.1665 13.3876 8.2543 13.5996 8.41058 13.7559C8.56686 13.9122 8.77882 14 8.99984 14C9.22085 14 9.43281 13.9122 9.58909 13.7559C9.74537 13.5996 9.83317 13.3876 9.83317 13.1666V4.83329C9.83317 4.61228 9.74537 4.40032 9.58909 4.24404C9.43281 4.08776 9.22085 3.99996 8.99984 3.99996ZM4.83317 8.99996C4.61216 8.99996 4.4002 9.08776 4.24392 9.24404C4.08763 9.40032 3.99984 9.61228 3.99984 9.83329V13.1666C3.99984 13.3876 4.08763 13.5996 4.24392 13.7559C4.4002 13.9122 4.61216 14 4.83317 14C5.05418 14 5.26615 13.9122 5.42243 13.7559C5.57871 13.5996 5.6665 13.3876 5.6665 13.1666V9.83329C5.6665 9.61228 5.57871 9.40032 5.42243 9.24404C5.26615 9.08776 5.05418 8.99996 4.83317 8.99996ZM13.1665 7.33329C12.9455 7.33329 12.7335 7.42109 12.5772 7.57737C12.421 7.73365 12.3332 7.94561 12.3332 8.16663V13.1666C12.3332 13.3876 12.421 13.5996 12.5772 13.7559C12.7335 13.9122 12.9455 14 13.1665 14C13.3875 14 13.5995 13.9122 13.7558 13.7559C13.912 13.5996 13.9998 13.3876 13.9998 13.1666V8.16663C13.9998 7.94561 13.912 7.73365 13.7558 7.57737C13.5995 7.42109 13.3875 7.33329 13.1665 7.33329ZM14.8332 0.666626H3.1665C2.50346 0.666626 1.86758 0.930018 1.39874 1.39886C0.929896 1.8677 0.666504 2.50358 0.666504 3.16663V14.8333C0.666504 15.4963 0.929896 16.1322 1.39874 16.6011C1.86758 17.0699 2.50346 17.3333 3.1665 17.3333H14.8332C15.4962 17.3333 16.1321 17.0699 16.6009 16.6011C17.0698 16.1322 17.3332 15.4963 17.3332 14.8333V3.16663C17.3332 2.50358 17.0698 1.8677 16.6009 1.39886C16.1321 0.930018 15.4962 0.666626 14.8332 0.666626ZM15.6665 14.8333C15.6665 15.0543 15.5787 15.2663 15.4224 15.4225C15.2661 15.5788 15.0542 15.6666 14.8332 15.6666H3.1665C2.94549 15.6666 2.73353 15.5788 2.57725 15.4225C2.42097 15.2663 2.33317 15.0543 2.33317 14.8333V3.16663C2.33317 2.94561 2.42097 2.73365 2.57725 2.57737C2.73353 2.42109 2.94549 2.33329 3.1665 2.33329H14.8332C15.0542 2.33329 15.2661 2.42109 15.4224 2.57737C15.5787 2.73365 15.6665 2.94561 15.6665 3.16663V14.8333Z" fill="#3D485B"></path>
            </svg>
            <span class="ml-2">Analytics</span>
          </a>
        </li>
        <li class="mb-10">
          <a class="inline-flex items-center text-lg font-semibold text-gray-300 hover:text-gray-200" href="#">
            <svg width="18" height="16" viewBox="0 0 18 16" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M14.8334 3.41671H12.3334V2.58337C12.3334 1.92033 12.07 1.28445 11.6012 0.815607C11.1323 0.346766 10.4965 0.083374 9.83341 0.083374H8.16675C7.50371 0.083374 6.86782 0.346766 6.39898 0.815607C5.93014 1.28445 5.66675 1.92033 5.66675 2.58337V3.41671H3.16675C2.50371 3.41671 1.86782 3.6801 1.39898 4.14894C0.93014 4.61778 0.666748 5.25367 0.666748 5.91671V13.4167C0.666748 14.0797 0.93014 14.7156 1.39898 15.1845C1.86782 15.6533 2.50371 15.9167 3.16675 15.9167H14.8334C15.4965 15.9167 16.1323 15.6533 16.6012 15.1845C17.07 14.7156 17.3334 14.0797 17.3334 13.4167V5.91671C17.3334 5.25367 17.07 4.61778 16.6012 4.14894C16.1323 3.6801 15.4965 3.41671 14.8334 3.41671ZM7.33341 2.58337C7.33341 2.36236 7.42121 2.1504 7.57749 1.99412C7.73377 1.83784 7.94573 1.75004 8.16675 1.75004H9.83341C10.0544 1.75004 10.2664 1.83784 10.4227 1.99412C10.5789 2.1504 10.6667 2.36236 10.6667 2.58337V3.41671H7.33341V2.58337ZM15.6667 13.4167C15.6667 13.6377 15.579 13.8497 15.4227 14.006C15.2664 14.1622 15.0544 14.25 14.8334 14.25H3.16675C2.94573 14.25 2.73377 14.1622 2.57749 14.006C2.42121 13.8497 2.33341 13.6377 2.33341 13.4167V8.83337C3.14628 9.1558 3.9819 9.41762 4.83341 9.61671V10.1084C4.83341 10.3294 4.92121 10.5413 5.07749 10.6976C5.23377 10.8539 5.44573 10.9417 5.66675 10.9417C5.88776 10.9417 6.09972 10.8539 6.256 10.6976C6.41228 10.5413 6.50008 10.3294 6.50008 10.1084V9.93337C7.3287 10.0462 8.16382 10.1046 9.00008 10.1084C9.83634 10.1046 10.6715 10.0462 11.5001 9.93337V10.1084C11.5001 10.3294 11.5879 10.5413 11.7442 10.6976C11.9004 10.8539 12.1124 10.9417 12.3334 10.9417C12.5544 10.9417 12.7664 10.8539 12.9227 10.6976C13.079 10.5413 13.1667 10.3294 13.1667 10.1084V9.61671C14.0183 9.41762 14.8539 9.1558 15.6667 8.83337V13.4167ZM15.6667 7.00837C14.8562 7.35045 14.0204 7.62907 13.1667 7.84171V7.58337C13.1667 7.36236 13.079 7.1504 12.9227 6.99412C12.7664 6.83784 12.5544 6.75004 12.3334 6.75004C12.1124 6.75004 11.9004 6.83784 11.7442 6.99412C11.5879 7.1504 11.5001 7.36236 11.5001 7.58337V8.20004C9.84279 8.45007 8.15737 8.45007 6.50008 8.20004V7.58337C6.50008 7.36236 6.41228 7.1504 6.256 6.99412C6.09972 6.83784 5.88776 6.75004 5.66675 6.75004C5.44573 6.75004 5.23377 6.83784 5.07749 6.99412C4.92121 7.1504 4.83341 7.36236 4.83341 7.58337V7.85837C3.97977 7.64573 3.14392 7.36712 2.33341 7.02504V5.91671C2.33341 5.69569 2.42121 5.48373 2.57749 5.32745C2.73377 5.17117 2.94573 5.08337 3.16675 5.08337H14.8334C15.0544 5.08337 15.2664 5.17117 15.4227 5.32745C15.579 5.48373 15.6667 5.69569 15.6667 5.91671V7.00837Z" fill="#3D485B"></path>
            </svg>
            <span class="ml-2">Products</span>
          </a>
        </li>
        <li class="mb-10">
          <a class="inline-flex w-full items-center text-lg font-semibold text-gray-300 hover:text-gray-200" href="#">
            <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M10.6666 14C10.8876 14 11.0996 13.9122 11.2558 13.756C11.4121 13.5997 11.4999 13.3877 11.4999 13.1667V11.5C11.4999 11.279 11.4121 11.0671 11.2558 10.9108C11.0996 10.7545 10.8876 10.6667 10.6666 10.6667C10.4456 10.6667 10.2336 10.7545 10.0773 10.9108C9.92104 11.0671 9.83324 11.279 9.83324 11.5V13.1667C9.83324 13.3877 9.92104 13.5997 10.0773 13.756C10.2336 13.9122 10.4456 14 10.6666 14ZM7.33324 14C7.55426 14 7.76622 13.9122 7.9225 13.756C8.07878 13.5997 8.16658 13.3877 8.16658 13.1667V11.5C8.16658 11.279 8.07878 11.0671 7.9225 10.9108C7.76622 10.7545 7.55426 10.6667 7.33324 10.6667C7.11223 10.6667 6.90027 10.7545 6.74399 10.9108C6.58771 11.0671 6.49991 11.279 6.49991 11.5V13.1667C6.49991 13.3877 6.58771 13.5997 6.74399 13.756C6.90027 13.9122 7.11223 14 7.33324 14ZM14.8332 4.00004H13.6832L12.2416 1.12504C12.1975 1.01925 12.1321 0.923688 12.0495 0.844316C11.9668 0.764945 11.8687 0.703474 11.7612 0.663745C11.6537 0.624016 11.5392 0.606883 11.4248 0.613416C11.3104 0.61995 11.1985 0.650009 11.0963 0.701717C10.994 0.753424 10.9035 0.825668 10.8304 0.913933C10.7573 1.0022 10.7032 1.10459 10.6715 1.2147C10.6398 1.32482 10.6311 1.4403 10.646 1.55392C10.661 1.66753 10.6992 1.77685 10.7582 1.87504L11.8166 4.00004H6.18324L7.24158 1.87504C7.32246 1.6808 7.32688 1.46315 7.25393 1.26578C7.18098 1.06842 7.03607 0.905957 6.84829 0.811014C6.66052 0.716072 6.44378 0.695677 6.24159 0.753925C6.0394 0.812174 5.86673 0.944752 5.75824 1.12504L4.31658 4.00004H3.16658C2.57757 4.009 2.01064 4.22567 1.56578 4.61182C1.12093 4.99797 0.82672 5.52881 0.735051 6.11072C0.643381 6.69262 0.760139 7.2882 1.06473 7.79242C1.36932 8.29664 1.84218 8.6771 2.39991 8.86671L3.01658 15.0834C3.07876 15.7022 3.36936 16.2756 3.83164 16.6916C4.29391 17.1077 4.89466 17.3365 5.51658 17.3334H12.4999C13.1218 17.3365 13.7226 17.1077 14.1848 16.6916C14.6471 16.2756 14.9377 15.7022 14.9999 15.0834L15.6166 8.86671C16.1755 8.67654 16.6491 8.29468 16.9535 7.78878C17.2579 7.28287 17.3734 6.68557 17.2796 6.10266C17.1857 5.51976 16.8886 4.98886 16.4409 4.60402C15.9931 4.21918 15.4236 4.00522 14.8332 4.00004ZM13.3249 14.9167C13.3042 15.123 13.2073 15.3141 13.0532 15.4528C12.8991 15.5915 12.6989 15.6677 12.4916 15.6667H5.50824C5.30094 15.6677 5.10069 15.5915 4.9466 15.4528C4.7925 15.3141 4.69564 15.123 4.67491 14.9167L4.08324 9.00004H13.9166L13.3249 14.9167ZM14.8332 7.33338H3.16658C2.94556 7.33338 2.7336 7.24558 2.57732 7.0893C2.42104 6.93302 2.33324 6.72106 2.33324 6.50004C2.33324 6.27903 2.42104 6.06707 2.57732 5.91079C2.7336 5.75451 2.94556 5.66671 3.16658 5.66671H14.8332C15.0543 5.66671 15.2662 5.75451 15.4225 5.91079C15.5788 6.06707 15.6666 6.27903 15.6666 6.50004C15.6666 6.72106 15.5788 6.93302 15.4225 7.0893C15.2662 7.24558 15.0543 7.33338 14.8332 7.33338Z" fill="#3D485B"></path>
            </svg>
            <span class="ml-2 mr-auto">Orders</span>
            <div class="flex w-5 h-5 ml-2 items-center justify-center text-xs text-white bg-blue-500 rounded-full">4</div>
          </a>
        </li>
        <li>
          <a class="inline-flex items-center text-lg font-semibold text-gray-300 hover:text-gray-200" href="#">
            <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M11.3417 9.23329C11.8692 8.66683 12.1664 7.92394 12.1751 7.14996C12.1751 6.31453 11.8432 5.51331 11.2525 4.92257C10.6617 4.33183 9.86051 3.99996 9.02508 3.99996C8.18965 3.99996 7.38843 4.33183 6.7977 4.92257C6.20696 5.51331 5.87508 6.31453 5.87508 7.14996C5.88378 7.92394 6.18093 8.66683 6.70841 9.23329C5.97396 9.59902 5.34193 10.1416 4.86918 10.8122C4.39642 11.4827 4.09777 12.2603 4.00008 13.075C3.97577 13.296 4.04025 13.5176 4.17934 13.6911C4.31843 13.8645 4.52073 13.9756 4.74175 14C4.96276 14.0243 5.18438 13.9598 5.35785 13.8207C5.53132 13.6816 5.64244 13.4793 5.66675 13.2583C5.76619 12.4509 6.15745 11.7078 6.76682 11.1688C7.37619 10.6299 8.16159 10.3324 8.97508 10.3324C9.78857 10.3324 10.574 10.6299 11.1833 11.1688C11.7927 11.7078 12.184 12.4509 12.2834 13.2583C12.3066 13.472 12.4114 13.6684 12.576 13.8066C12.7406 13.9448 12.9523 14.0141 13.1667 14H13.2584C13.4769 13.9748 13.6765 13.8644 13.8139 13.6927C13.9512 13.521 14.0152 13.3019 13.9917 13.0833C13.9013 12.2729 13.6121 11.4975 13.1498 10.8258C12.6875 10.1542 12.0664 9.60712 11.3417 9.23329ZM9.00008 8.63329C8.70671 8.63329 8.41992 8.5463 8.17598 8.38331C7.93205 8.22031 7.74193 7.98865 7.62966 7.71761C7.51739 7.44656 7.48801 7.14831 7.54525 6.86058C7.60248 6.57284 7.74376 6.30853 7.95121 6.10108C8.15865 5.89364 8.42296 5.75236 8.7107 5.69513C8.99844 5.63789 9.29668 5.66727 9.56773 5.77954C9.83877 5.89181 10.0704 6.08193 10.2334 6.32586C10.3964 6.5698 10.4834 6.85658 10.4834 7.14996C10.4834 7.54336 10.3271 7.92066 10.049 8.19883C9.77078 8.47701 9.39349 8.63329 9.00008 8.63329ZM14.8334 0.666626H3.16675C2.50371 0.666626 1.86782 0.930018 1.39898 1.39886C0.93014 1.8677 0.666748 2.50358 0.666748 3.16663V14.8333C0.666748 15.4963 0.93014 16.1322 1.39898 16.6011C1.86782 17.0699 2.50371 17.3333 3.16675 17.3333H14.8334C15.4965 17.3333 16.1323 17.0699 16.6012 16.6011C17.07 16.1322 17.3334 15.4963 17.3334 14.8333V3.16663C17.3334 2.50358 17.07 1.8677 16.6012 1.39886C16.1323 0.930018 15.4965 0.666626 14.8334 0.666626ZM15.6667 14.8333C15.6667 15.0543 15.579 15.2663 15.4227 15.4225C15.2664 15.5788 15.0544 15.6666 14.8334 15.6666H3.16675C2.94573 15.6666 2.73377 15.5788 2.57749 15.4225C2.42121 15.2663 2.33341 15.0543 2.33341 14.8333V3.16663C2.33341 2.94561 2.42121 2.73365 2.57749 2.57737C2.73377 2.42109 2.94573 2.33329 3.16675 2.33329H14.8334C15.0544 2.33329 15.2664 2.42109 15.4227 2.57737C15.579 2.73365 15.6667 2.94561 15.6667 3.16663V14.8333Z" fill="#3D485B"></path>
            </svg>
            <span class="ml-2">Customers</span>
          </a>
        </li>
      </ul>
      <a class="flex mt-auto items-center justify-between" href="#">
        <div class="flex items-center">
          <img class="h-8 w-8 mr-3 rounded-full" src="trizzle-assets/images/avatar-men-2.png" alt="">
          <h5 class="leading-none font-semibold text-gray-100">John Doe</h5>
        </div>
        <svg width="10" height="6" viewBox="0 0 10 6" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M1 1L5 5L9 1" stroke="#3D485B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
        </svg>
      </a>
    </nav>
  </div>
</section>

<section class="py-3">
  <div class="container px-4 mx-auto">
    <div class="flex flex-wrap -mx-3 -mb-6">
      <div class="w-full md:w-1/2 lg:w-1/4 px-3 mb-6">
        <div class="max-w-sm mx-auto py-8 px-6 bg-gray-500 rounded-xl">
          <div class="max-w-xs mx-auto text-center">
            <div class="flex mx-auto w-12 h-12 mb-4 items-center justify-center bg-blue-500 bg-opacity-20 text-blue-500 rounded-xl">
              <svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M21 16H1C0.734784 16 0.48043 16.1054 0.292893 16.2929C0.105357 16.4804 0 16.7348 0 17C0 17.2652 0.105357 17.5196 0.292893 17.7071C0.48043 17.8946 0.734784 18 1 18H21C21.2652 18 21.5196 17.8946 21.7071 17.7071C21.8946 17.5196 22 17.2652 22 17C22 16.7348 21.8946 16.4804 21.7071 16.2929C21.5196 16.1054 21.2652 16 21 16ZM21 20H1C0.734784 20 0.48043 20.1054 0.292893 20.2929C0.105357 20.4804 0 20.7348 0 21C0 21.2652 0.105357 21.5196 0.292893 21.7071C0.48043 21.8946 0.734784 22 1 22H21C21.2652 22 21.5196 21.8946 21.7071 21.7071C21.8946 21.5196 22 21.2652 22 21C22 20.7348 21.8946 20.4804 21.7071 20.2929C21.5196 20.1054 21.2652 20 21 20ZM5 6C4.80222 6 4.60888 6.05865 4.44443 6.16853C4.27998 6.27841 4.15181 6.43459 4.07612 6.61732C4.00043 6.80004 3.98063 7.00111 4.01921 7.19509C4.0578 7.38907 4.15304 7.56725 4.29289 7.70711C4.43275 7.84696 4.61093 7.9422 4.80491 7.98079C4.99889 8.01937 5.19996 7.99957 5.38268 7.92388C5.56541 7.84819 5.72159 7.72002 5.83147 7.55557C5.94135 7.39112 6 7.19778 6 7C6 6.73478 5.89464 6.48043 5.70711 6.29289C5.51957 6.10536 5.26522 6 5 6ZM19 0H3C2.20435 0 1.44129 0.31607 0.87868 0.87868C0.31607 1.44129 0 2.20435 0 3V11C0 11.7956 0.31607 12.5587 0.87868 13.1213C1.44129 13.6839 2.20435 14 3 14H19C19.7956 14 20.5587 13.6839 21.1213 13.1213C21.6839 12.5587 22 11.7956 22 11V3C22 2.20435 21.6839 1.44129 21.1213 0.87868C20.5587 0.31607 19.7956 0 19 0ZM20 11C20 11.2652 19.8946 11.5196 19.7071 11.7071C19.5196 11.8946 19.2652 12 19 12H3C2.73478 12 2.48043 11.8946 2.29289 11.7071C2.10536 11.5196 2 11.2652 2 11V3C2 2.73478 2.10536 2.48043 2.29289 2.29289C2.48043 2.10536 2.73478 2 3 2H19C19.2652 2 19.5196 2.10536 19.7071 2.29289C19.8946 2.48043 20 2.73478 20 3V11ZM11 4C10.4067 4 9.82664 4.17595 9.33329 4.50559C8.83994 4.83524 8.45542 5.30377 8.22836 5.85195C8.0013 6.40013 7.94189 7.00333 8.05764 7.58527C8.1734 8.16721 8.45912 8.70176 8.87868 9.12132C9.29824 9.54088 9.83279 9.8266 10.4147 9.94236C10.9967 10.0581 11.5999 9.9987 12.1481 9.77164C12.6962 9.54458 13.1648 9.16006 13.4944 8.66671C13.8241 8.17336 14 7.59334 14 7C14 6.20435 13.6839 5.44129 13.1213 4.87868C12.5587 4.31607 11.7956 4 11 4ZM11 8C10.8022 8 10.6089 7.94135 10.4444 7.83147C10.28 7.72159 10.1518 7.56541 10.0761 7.38268C10.0004 7.19996 9.98063 6.99889 10.0192 6.80491C10.0578 6.61093 10.153 6.43275 10.2929 6.29289C10.4327 6.15304 10.6109 6.0578 10.8049 6.01921C10.9989 5.98063 11.2 6.00043 11.3827 6.07612C11.5654 6.15181 11.7216 6.27998 11.8315 6.44443C11.9414 6.60888 12 6.80222 12 7C12 7.26522 11.8946 7.51957 11.7071 7.70711C11.5196 7.89464 11.2652 8 11 8ZM17 6C16.8022 6 16.6089 6.05865 16.4444 6.16853C16.28 6.27841 16.1518 6.43459 16.0761 6.61732C16.0004 6.80004 15.9806 7.00111 16.0192 7.19509C16.0578 7.38907 16.153 7.56725 16.2929 7.70711C16.4327 7.84696 16.6109 7.9422 16.8049 7.98079C16.9989 8.01937 17.2 7.99957 17.3827 7.92388C17.5654 7.84819 17.7216 7.72002 17.8315 7.55557C17.9414 7.39112 18 7.19778 18 7C18 6.73478 17.8946 6.48043 17.7071 6.29289C17.5196 6.10536 17.2652 6 17 6Z" fill="#194BFB"></path>
              </svg>
            </div>
            <span class="text-xs text-gray-300 font-semibold">Budget</span>
            <h4 class="text-2xl leading-8 text-gray-100 font-semibold mb-4">$28K</h4>
            <div class="flex flex-wrap items-center justify-center -m-1">
              <div class="w-auto p-1">
                <span class="inline-block py-1 px-2 text-xs text-green-500 font-medium bg-teal-900 rounded-full">1,0%</span>
              </div>
              <div class="w-auto p-1">
                <span class="text-xs text-gray-300 font-medium">Since last month</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="w-full md:w-1/2 lg:w-1/4 px-3 mb-6">
        <div class="max-w-sm mx-auto py-8 px-6 bg-gray-500 rounded-xl">
          <div class="max-w-xs mx-auto text-center">
            <div class="flex mx-auto w-12 h-12 mb-4 items-center justify-center bg-blue-500 bg-opacity-20 text-blue-500 rounded-xl">
              <svg width="22" height="18" viewBox="0 0 22 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M11.3 9.22C11.8336 8.75813 12.2616 8.18688 12.5549 7.54502C12.8482 6.90316 13 6.20571 13 5.5C13 4.17392 12.4732 2.90215 11.5355 1.96447C10.5979 1.02678 9.32608 0.5 8 0.5C6.67392 0.5 5.40215 1.02678 4.46447 1.96447C3.52678 2.90215 3 4.17392 3 5.5C2.99999 6.20571 3.1518 6.90316 3.44513 7.54502C3.73845 8.18688 4.16642 8.75813 4.7 9.22C3.30014 9.85388 2.11247 10.8775 1.27898 12.1685C0.445495 13.4596 0.00147185 14.9633 0 16.5C0 16.7652 0.105357 17.0196 0.292893 17.2071C0.48043 17.3946 0.734784 17.5 1 17.5C1.26522 17.5 1.51957 17.3946 1.70711 17.2071C1.89464 17.0196 2 16.7652 2 16.5C2 14.9087 2.63214 13.3826 3.75736 12.2574C4.88258 11.1321 6.4087 10.5 8 10.5C9.5913 10.5 11.1174 11.1321 12.2426 12.2574C13.3679 13.3826 14 14.9087 14 16.5C14 16.7652 14.1054 17.0196 14.2929 17.2071C14.4804 17.3946 14.7348 17.5 15 17.5C15.2652 17.5 15.5196 17.3946 15.7071 17.2071C15.8946 17.0196 16 16.7652 16 16.5C15.9985 14.9633 15.5545 13.4596 14.721 12.1685C13.8875 10.8775 12.6999 9.85388 11.3 9.22ZM8 8.5C7.40666 8.5 6.82664 8.32405 6.33329 7.99441C5.83994 7.66476 5.45542 7.19623 5.22836 6.64805C5.0013 6.09987 4.94189 5.49667 5.05764 4.91473C5.1734 4.33279 5.45912 3.79824 5.87868 3.37868C6.29824 2.95912 6.83279 2.6734 7.41473 2.55764C7.99667 2.44189 8.59987 2.5013 9.14805 2.72836C9.69623 2.95542 10.1648 3.33994 10.4944 3.83329C10.8241 4.32664 11 4.90666 11 5.5C11 6.29565 10.6839 7.05871 10.1213 7.62132C9.55871 8.18393 8.79565 8.5 8 8.5ZM17.74 8.82C18.38 8.09933 18.798 7.20905 18.9438 6.25634C19.0896 5.30362 18.9569 4.32907 18.5618 3.45C18.1666 2.57093 17.5258 1.8248 16.7165 1.30142C15.9071 0.77805 14.9638 0.499742 14 0.5C13.7348 0.5 13.4804 0.605357 13.2929 0.792893C13.1054 0.98043 13 1.23478 13 1.5C13 1.76522 13.1054 2.01957 13.2929 2.20711C13.4804 2.39464 13.7348 2.5 14 2.5C14.7956 2.5 15.5587 2.81607 16.1213 3.37868C16.6839 3.94129 17 4.70435 17 5.5C16.9986 6.02524 16.8593 6.5409 16.5961 6.99542C16.3328 7.44994 15.9549 7.82738 15.5 8.09C15.3517 8.17552 15.2279 8.29766 15.1404 8.44474C15.0528 8.59182 15.0045 8.7589 15 8.93C14.9958 9.09976 15.0349 9.2678 15.1137 9.41826C15.1924 9.56872 15.3081 9.69665 15.45 9.79L15.84 10.05L15.97 10.12C17.1754 10.6917 18.1923 11.596 18.901 12.7263C19.6096 13.8566 19.9805 15.1659 19.97 16.5C19.97 16.7652 20.0754 17.0196 20.2629 17.2071C20.4504 17.3946 20.7048 17.5 20.97 17.5C21.2352 17.5 21.4896 17.3946 21.6771 17.2071C21.8646 17.0196 21.97 16.7652 21.97 16.5C21.9782 14.9654 21.5938 13.4543 20.8535 12.1101C20.1131 10.7659 19.0413 9.63331 17.74 8.82Z" fill="#194BFB"></path>
              </svg>
            </div>
            <span class="text-xs text-gray-300 font-semibold">Total customers</span>
            <h4 class="text-2xl leading-8 text-gray-100 font-semibold mb-4">1.6K</h4>
            <div class="flex flex-wrap items-center justify-center -m-1">
              <div class="w-auto p-1">
                <span class="inline-block py-1 px-2 text-xs text-green-500 font-medium bg-teal-900 rounded-full">1,0%</span>
              </div>
              <div class="w-auto p-1">
                <span class="text-xs text-gray-300 font-medium">Since last month</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="w-full md:w-1/2 lg:w-1/4 px-3 mb-6">
        <div class="max-w-sm mx-auto py-8 px-6 bg-gray-500 rounded-xl">
          <div class="max-w-xs mx-auto text-center">
            <div class="flex mx-auto w-12 h-12 mb-4 items-center justify-center bg-blue-500 bg-opacity-20 text-blue-500 rounded-xl">
              <svg width="16" height="20" viewBox="0 0 16 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M13 2H11.82C11.6137 1.41645 11.2319 0.910998 10.7271 0.552938C10.2222 0.194879 9.61894 0.00173951 9 0H7C6.38106 0.00173951 5.7778 0.194879 5.27293 0.552938C4.76807 0.910998 4.38631 1.41645 4.18 2H3C2.20435 2 1.44129 2.31607 0.87868 2.87868C0.316071 3.44129 0 4.20435 0 5V17C0 17.7956 0.316071 18.5587 0.87868 19.1213C1.44129 19.6839 2.20435 20 3 20H13C13.7956 20 14.5587 19.6839 15.1213 19.1213C15.6839 18.5587 16 17.7956 16 17V5C16 4.20435 15.6839 3.44129 15.1213 2.87868C14.5587 2.31607 13.7956 2 13 2ZM6 3C6 2.73478 6.10536 2.48043 6.29289 2.29289C6.48043 2.10536 6.73478 2 7 2H9C9.26522 2 9.51957 2.10536 9.70711 2.29289C9.89464 2.48043 10 2.73478 10 3V4H6V3ZM14 17C14 17.2652 13.8946 17.5196 13.7071 17.7071C13.5196 17.8946 13.2652 18 13 18H3C2.73478 18 2.48043 17.8946 2.29289 17.7071C2.10536 17.5196 2 17.2652 2 17V5C2 4.73478 2.10536 4.48043 2.29289 4.29289C2.48043 4.10536 2.73478 4 3 4H4V5C4 5.26522 4.10536 5.51957 4.29289 5.70711C4.48043 5.89464 4.73478 6 5 6H11C11.2652 6 11.5196 5.89464 11.7071 5.70711C11.8946 5.51957 12 5.26522 12 5V4H13C13.2652 4 13.5196 4.10536 13.7071 4.29289C13.8946 4.48043 14 4.73478 14 5V17Z" fill="#194BFB"></path>
              </svg>
            </div>
            <span class="text-xs text-gray-300 font-semibold">Tasks Progress</span>
            <h4 class="text-2xl leading-8 text-gray-100 font-semibold mb-4">64.5%</h4>
            <div class="flex flex-wrap items-center justify-center -m-1">
              <div class="w-auto p-1">
                <span class="inline-block py-1 px-2 text-xs text-green-500 font-medium bg-teal-900 rounded-full">1,0%</span>
              </div>
              <div class="w-auto p-1">
                <span class="text-xs text-gray-300 font-medium">Since last month</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="w-full md:w-1/2 lg:w-1/4 px-3 mb-6">
        <div class="max-w-sm mx-auto py-8 px-6 bg-gray-500 rounded-xl">
          <div class="max-w-xs mx-auto text-center">
            <div class="flex mx-auto w-12 h-12 mb-4 items-center justify-center bg-blue-500 bg-opacity-20 text-blue-500 rounded-xl">
              <svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M19 0H3C2.20435 0 1.44129 0.31607 0.87868 0.87868C0.31607 1.44129 0 2.20435 0 3V19C0 19.7956 0.31607 20.5587 0.87868 21.1213C1.44129 21.6839 2.20435 22 3 22H19C19.7956 22 20.5587 21.6839 21.1213 21.1213C21.6839 20.5587 22 19.7956 22 19V3C22 2.20435 21.6839 1.44129 21.1213 0.87868C20.5587 0.31607 19.7956 0 19 0ZM7 20H3C2.73478 20 2.48043 19.8946 2.29289 19.7071C2.10536 19.5196 2 19.2652 2 19V17.82C2.32067 17.9364 2.65886 17.9973 3 18H7V20ZM7 16H3C2.73478 16 2.48043 15.8946 2.29289 15.7071C2.10536 15.5196 2 15.2652 2 15V13.82C2.32067 13.9364 2.65886 13.9973 3 14H7V16ZM7 12H3C2.73478 12 2.48043 11.8946 2.29289 11.7071C2.10536 11.5196 2 11.2652 2 11V3C2 2.73478 2.10536 2.48043 2.29289 2.29289C2.48043 2.10536 2.73478 2 3 2H7V12ZM13 20H9V14H13V20ZM13 12H9V2H13V12ZM20 19C20 19.2652 19.8946 19.5196 19.7071 19.7071C19.5196 19.8946 19.2652 20 19 20H15V18H19C19.3411 17.9973 19.6793 17.9364 20 17.82V19ZM20 15C20 15.2652 19.8946 15.5196 19.7071 15.7071C19.5196 15.8946 19.2652 16 19 16H15V14H19C19.3411 13.9973 19.6793 13.9364 20 13.82V15ZM20 11C20 11.2652 19.8946 11.5196 19.7071 11.7071C19.5196 11.8946 19.2652 12 19 12H15V2H19C19.2652 2 19.5196 2.10536 19.7071 2.29289C19.8946 2.48043 20 2.73478 20 3V11ZM17 6C16.8022 6 16.6089 6.05865 16.4444 6.16853C16.28 6.27841 16.1518 6.43459 16.0761 6.61732C16.0004 6.80004 15.9806 7.00111 16.0192 7.19509C16.0578 7.38907 16.153 7.56725 16.2929 7.70711C16.4327 7.84696 16.6109 7.9422 16.8049 7.98079C16.9989 8.01937 17.2 7.99957 17.3827 7.92388C17.5654 7.84819 17.7216 7.72002 17.8315 7.55557C17.9414 7.39112 18 7.19778 18 7C18 6.73478 17.8946 6.48043 17.7071 6.29289C17.5196 6.10536 17.2652 6 17 6ZM5 8C5.19778 8 5.39112 7.94135 5.55557 7.83147C5.72002 7.72159 5.84819 7.56541 5.92388 7.38268C5.99957 7.19996 6.01937 6.99889 5.98079 6.80491C5.9422 6.61093 5.84696 6.43275 5.70711 6.29289C5.56725 6.15304 5.38907 6.0578 5.19509 6.01921C5.00111 5.98063 4.80004 6.00043 4.61732 6.07612C4.43459 6.15181 4.27841 6.27998 4.16853 6.44443C4.05865 6.60888 4 6.80222 4 7C4 7.26522 4.10536 7.51957 4.29289 7.70711C4.48043 7.89464 4.73478 8 5 8Z" fill="#194BFB"></path>
              </svg>
            </div>
            <span class="text-xs text-gray-300 font-semibold">Total profit</span>
            <h4 class="text-2xl leading-8 text-gray-100 font-semibold mb-4">$23K</h4>
            <div class="flex flex-wrap items-center justify-center -m-1">
              <div class="w-auto p-1">
                <span class="inline-block py-1 px-2 text-xs text-green-500 font-medium bg-teal-900 rounded-full">1,0%</span>
              </div>
              <div class="w-auto p-1">
                <span class="text-xs text-gray-300 font-medium">Since last month</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<div x-data="{ mobileNavOpen: false }">
  <nav class="lg:hidden flex items-center justify-between p-8 bg-gray-700 mb-3">
    <div class="w-full xl:w-auto px-2 xl:mr-12">
      <div class="flex items-center justify-between">
        <a class="inline-flex items-center h-8" href="#">
          <img src="trizzle-assets/logos/trizzle-logo.svg" alt="">
        </a>
        <div class="xl:hidden">
          <button x-on:click="mobileNavOpen = !mobileNavOpen" class="text-gray-400 hover:text-gray-300 focus:outline-none">
            <svg width="20" height="12" viewBox="0 0 20 12" fill="none" xmlns="http://www.w3.org/2000/svg">
              <title>Mobile menu</title>
              <path d="M1 2H19C19.2652 2 19.5196 1.89464 19.7071 1.70711C19.8946 1.51957 20 1.26522 20 1C20 0.734784 19.8946 0.48043 19.7071 0.292893C19.5196 0.105357 19.2652 0 19 0H1C0.734784 0 0.48043 0.105357 0.292893 0.292893C0.105357 0.48043 0 0.734784 0 1C0 1.26522 0.105357 1.51957 0.292893 1.70711C0.48043 1.89464 0.734784 2 1 2ZM19 10H1C0.734784 10 0.48043 10.1054 0.292893 10.2929C0.105357 10.4804 0 10.7348 0 11C0 11.2652 0.105357 11.5196 0.292893 11.7071C0.48043 11.8946 0.734784 12 1 12H19C19.2652 12 19.5196 11.8946 19.7071 11.7071C19.8946 11.5196 20 11.2652 20 11C20 10.7348 19.8946 10.4804 19.7071 10.2929C19.5196 10.1054 19.2652 10 19 10ZM19 5H1C0.734784 5 0.48043 5.10536 0.292893 5.29289C0.105357 5.48043 0 5.73478 0 6C0 6.26522 0.105357 6.51957 0.292893 6.70711C0.48043 6.89464 0.734784 7 1 7H19C19.2652 7 19.5196 6.89464 19.7071 6.70711C19.8946 6.51957 20 6.26522 20 6C20 5.73478 19.8946 5.48043 19.7071 5.29289C19.5196 5.10536 19.2652 5 19 5Z" fill="currentColor"></path>
            </svg>
          </button>
        </div>
      </div>
    </div>
  </nav>
  <div :class="{'block': mobileNavOpen, 'hidden': !mobileNavOpen}" class="hidden relative z-50">
    <div x-on:click="mobileNavOpen = !mobileNavOpen" class="fixed top-0 left-0 w-full h-full bg-gray-800 opacity-50" :class="{'block': mobileNavOpen, 'hidden': !mobileNavOpen}"></div>
    <nav class="fixed top-0 left-0 bottom-0 max-w-max flex flex-col h-full py-6 px-4 bg-gray-700 overflow-auto">
      <a class="inline-block mb-12" href="#">
        <img class="h-7 mx-auto" src="trizzle-assets/logos/logo-only-trizzle.svg" alt="">
      </a>
      <div class="mb-6">
        <ul>
          <li>
            <a class="flex items-center justify-center w-12 h-12 rounded-xl text-gray-400 hover:text-blue-500 hover:bg-gray-800" href="#">
              <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M10 13H3C2.73478 13 2.48043 13.1054 2.29289 13.2929C2.10536 13.4804 2 13.7348 2 14V21C2 21.2652 2.10536 21.5196 2.29289 21.7071C2.48043 21.8946 2.73478 22 3 22H10C10.2652 22 10.5196 21.8946 10.7071 21.7071C10.8946 21.5196 11 21.2652 11 21V14C11 13.7348 10.8946 13.4804 10.7071 13.2929C10.5196 13.1054 10.2652 13 10 13ZM9 20H4V15H9V20ZM21 2H14C13.7348 2 13.4804 2.10536 13.2929 2.29289C13.1054 2.48043 13 2.73478 13 3V10C13 10.2652 13.1054 10.5196 13.2929 10.7071C13.4804 10.8946 13.7348 11 14 11H21C21.2652 11 21.5196 10.8946 21.7071 10.7071C21.8946 10.5196 22 10.2652 22 10V3C22 2.73478 21.8946 2.48043 21.7071 2.29289C21.5196 2.10536 21.2652 2 21 2ZM20 9H15V4H20V9ZM21 13H14C13.7348 13 13.4804 13.1054 13.2929 13.2929C13.1054 13.4804 13 13.7348 13 14V21C13 21.2652 13.1054 21.5196 13.2929 21.7071C13.4804 21.8946 13.7348 22 14 22H21C21.2652 22 21.5196 21.8946 21.7071 21.7071C21.8946 21.5196 22 21.2652 22 21V14C22 13.7348 21.8946 13.4804 21.7071 13.2929C21.5196 13.1054 21.2652 13 21 13ZM20 20H15V15H20V20ZM10 2H3C2.73478 2 2.48043 2.10536 2.29289 2.29289C2.10536 2.48043 2 2.73478 2 3V10C2 10.2652 2.10536 10.5196 2.29289 10.7071C2.48043 10.8946 2.73478 11 3 11H10C10.2652 11 10.5196 10.8946 10.7071 10.7071C10.8946 10.5196 11 10.2652 11 10V3C11 2.73478 10.8946 2.48043 10.7071 2.29289C10.5196 2.10536 10.2652 2 10 2ZM9 9H4V4H9V9Z" fill="currentColor"></path>
              </svg>
            </a>
          </li>
          <li>
            <a class="flex items-center justify-center w-12 h-12 rounded-xl text-gray-400 hover:text-blue-500 hover:bg-gray-800" href="#">
              <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M10 4C9.73478 4 9.48043 4.10536 9.29289 4.29289C9.10536 4.48043 9 4.73478 9 5V15C9 15.2652 9.10536 15.5196 9.29289 15.7071C9.48043 15.8946 9.73478 16 10 16C10.2652 16 10.5196 15.8946 10.7071 15.7071C10.8946 15.5196 11 15.2652 11 15V5C11 4.73478 10.8946 4.48043 10.7071 4.29289C10.5196 4.10536 10.2652 4 10 4ZM5 10C4.73478 10 4.48043 10.1054 4.29289 10.2929C4.10536 10.4804 4 10.7348 4 11V15C4 15.2652 4.10536 15.5196 4.29289 15.7071C4.48043 15.8946 4.73478 16 5 16C5.26522 16 5.51957 15.8946 5.70711 15.7071C5.89464 15.5196 6 15.2652 6 15V11C6 10.7348 5.89464 10.4804 5.70711 10.2929C5.51957 10.1054 5.26522 10 5 10ZM15 8C14.7348 8 14.4804 8.10536 14.2929 8.29289C14.1054 8.48043 14 8.73478 14 9V15C14 15.2652 14.1054 15.5196 14.2929 15.7071C14.4804 15.8946 14.7348 16 15 16C15.2652 16 15.5196 15.8946 15.7071 15.7071C15.8946 15.5196 16 15.2652 16 15V9C16 8.73478 15.8946 8.48043 15.7071 8.29289C15.5196 8.10536 15.2652 8 15 8ZM17 0H3C2.20435 0 1.44129 0.316071 0.87868 0.87868C0.316071 1.44129 0 2.20435 0 3V17C0 17.7956 0.316071 18.5587 0.87868 19.1213C1.44129 19.6839 2.20435 20 3 20H17C17.7956 20 18.5587 19.6839 19.1213 19.1213C19.6839 18.5587 20 17.7956 20 17V3C20 2.20435 19.6839 1.44129 19.1213 0.87868C18.5587 0.316071 17.7956 0 17 0ZM18 17C18 17.2652 17.8946 17.5196 17.7071 17.7071C17.5196 17.8946 17.2652 18 17 18H3C2.73478 18 2.48043 17.8946 2.29289 17.7071C2.10536 17.5196 2 17.2652 2 17V3C2 2.73478 2.10536 2.48043 2.29289 2.29289C2.48043 2.10536 2.73478 2 3 2H17C17.2652 2 17.5196 2.10536 17.7071 2.29289C17.8946 2.48043 18 2.73478 18 3V17Z" fill="currentColor"></path>
              </svg>
            </a>
          </li>
          <li>
            <a class="flex items-center justify-center w-12 h-12 rounded-xl text-gray-400 hover:text-blue-500 hover:bg-gray-800" href="#">
              <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M17 4.5H14V3.5C14 2.70435 13.6839 1.94129 13.1213 1.37868C12.5587 0.816071 11.7956 0.5 11 0.5H9C8.20435 0.5 7.44129 0.816071 6.87868 1.37868C6.31607 1.94129 6 2.70435 6 3.5V4.5H3C2.20435 4.5 1.44129 4.81607 0.87868 5.37868C0.316071 5.94129 0 6.70435 0 7.5V16.5C0 17.2956 0.316071 18.0587 0.87868 18.6213C1.44129 19.1839 2.20435 19.5 3 19.5H17C17.7956 19.5 18.5587 19.1839 19.1213 18.6213C19.6839 18.0587 20 17.2956 20 16.5V7.5C20 6.70435 19.6839 5.94129 19.1213 5.37868C18.5587 4.81607 17.7956 4.5 17 4.5ZM8 3.5C8 3.23478 8.10536 2.98043 8.29289 2.79289C8.48043 2.60536 8.73478 2.5 9 2.5H11C11.2652 2.5 11.5196 2.60536 11.7071 2.79289C11.8946 2.98043 12 3.23478 12 3.5V4.5H8V3.5ZM18 16.5C18 16.7652 17.8946 17.0196 17.7071 17.2071C17.5196 17.3946 17.2652 17.5 17 17.5H3C2.73478 17.5 2.48043 17.3946 2.29289 17.2071C2.10536 17.0196 2 16.7652 2 16.5V11C2.97544 11.3869 3.97818 11.7011 5 11.94V12.53C5 12.7952 5.10536 13.0496 5.29289 13.2371C5.48043 13.4246 5.73478 13.53 6 13.53C6.26522 13.53 6.51957 13.4246 6.70711 13.2371C6.89464 13.0496 7 12.7952 7 12.53V12.32C7.99435 12.4554 8.99649 12.5255 10 12.53C11.0035 12.5255 12.0057 12.4554 13 12.32V12.53C13 12.7952 13.1054 13.0496 13.2929 13.2371C13.4804 13.4246 13.7348 13.53 14 13.53C14.2652 13.53 14.5196 13.4246 14.7071 13.2371C14.8946 13.0496 15 12.7952 15 12.53V11.94C16.0218 11.7011 17.0246 11.3869 18 11V16.5ZM18 8.81C17.0274 9.22049 16.0244 9.55483 15 9.81V9.5C15 9.23478 14.8946 8.98043 14.7071 8.79289C14.5196 8.60536 14.2652 8.5 14 8.5C13.7348 8.5 13.4804 8.60536 13.2929 8.79289C13.1054 8.98043 13 9.23478 13 9.5V10.24C11.0113 10.54 8.98875 10.54 7 10.24V9.5C7 9.23478 6.89464 8.98043 6.70711 8.79289C6.51957 8.60536 6.26522 8.5 6 8.5C5.73478 8.5 5.48043 8.60536 5.29289 8.79289C5.10536 8.98043 5 9.23478 5 9.5V9.83C3.97562 9.57483 2.9726 9.24049 2 8.83V7.5C2 7.23478 2.10536 6.98043 2.29289 6.79289C2.48043 6.60536 2.73478 6.5 3 6.5H17C17.2652 6.5 17.5196 6.60536 17.7071 6.79289C17.8946 6.98043 18 7.23478 18 7.5V8.81Z" fill="currentColor"></path>
              </svg>
            </a>
          </li>
          <li>
            <a class="flex items-center justify-center w-12 h-12 rounded-xl text-gray-400 hover:text-blue-500 hover:bg-gray-800" href="#">
              <svg width="20" height="21" viewBox="0 0 20 21" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M11.9998 16.9999C12.265 16.9999 12.5194 16.8945 12.7069 16.707C12.8944 16.5195 12.9998 16.2651 12.9998 15.9999V13.9999C12.9998 13.7347 12.8944 13.4803 12.7069 13.2928C12.5194 13.1053 12.265 12.9999 11.9998 12.9999C11.7346 12.9999 11.4802 13.1053 11.2927 13.2928C11.1052 13.4803 10.9998 13.7347 10.9998 13.9999V15.9999C10.9998 16.2651 11.1052 16.5195 11.2927 16.707C11.4802 16.8945 11.7346 16.9999 11.9998 16.9999ZM7.99979 16.9999C8.26501 16.9999 8.51936 16.8945 8.7069 16.707C8.89444 16.5195 8.99979 16.2651 8.99979 15.9999V13.9999C8.99979 13.7347 8.89444 13.4803 8.7069 13.2928C8.51936 13.1053 8.26501 12.9999 7.99979 12.9999C7.73458 12.9999 7.48022 13.1053 7.29269 13.2928C7.10515 13.4803 6.99979 13.7347 6.99979 13.9999V15.9999C6.99979 16.2651 7.10515 16.5195 7.29269 16.707C7.48022 16.8945 7.73458 16.9999 7.99979 16.9999ZM16.9998 4.99991H15.6198L13.8898 1.5499C13.8369 1.42296 13.7585 1.30828 13.6593 1.21303C13.5601 1.11779 13.4423 1.04402 13.3133 0.996347C13.1843 0.948672 13.0469 0.928113 12.9096 0.935953C12.7723 0.943793 12.6381 0.979865 12.5154 1.04191C12.3927 1.10396 12.2841 1.19065 12.1964 1.29657C12.1087 1.40249 12.0438 1.52536 12.0057 1.6575C11.9676 1.78964 11.9572 1.92821 11.9752 2.06455C11.9931 2.20089 12.0389 2.33208 12.1098 2.44991L13.3798 4.99991H6.61979L7.88979 2.44991C7.98686 2.21681 7.99215 1.95563 7.90461 1.71879C7.81708 1.48196 7.64319 1.287 7.41785 1.17307C7.19252 1.05914 6.93244 1.03467 6.68981 1.10456C6.44718 1.17446 6.23997 1.33356 6.10979 1.5499L4.37979 4.99991H2.99979C2.29298 5.01066 1.61267 5.27065 1.07884 5.73404C0.545015 6.19742 0.191966 6.83443 0.0819632 7.53271C-0.02804 8.23099 0.112069 8.94569 0.477579 9.55075C0.843088 10.1558 1.41052 10.6124 2.07979 10.8399L2.81979 18.2999C2.89441 19.0425 3.24314 19.7306 3.79786 20.2298C4.35259 20.7291 5.07349 21.0036 5.81979 20.9999H14.1998C14.9461 21.0036 15.667 20.7291 16.2217 20.2298C16.7764 19.7306 17.1252 19.0425 17.1998 18.2999L17.9398 10.8399C18.6105 10.6117 19.1788 10.1535 19.5441 9.54639C19.9093 8.9393 20.048 8.22254 19.9354 7.52305C19.8228 6.82356 19.4663 6.18649 18.929 5.72468C18.3917 5.26287 17.7083 5.00612 16.9998 4.99991ZM15.1898 18.0999C15.1649 18.3474 15.0487 18.5768 14.8638 18.7432C14.6789 18.9096 14.4386 19.0012 14.1898 18.9999H5.80979C5.56103 19.0012 5.32073 18.9096 5.13582 18.7432C4.95091 18.5768 4.83467 18.3474 4.80979 18.0999L4.09979 10.9999H15.8998L15.1898 18.0999ZM16.9998 8.9999H2.99979C2.73458 8.9999 2.48022 8.89455 2.29269 8.70701C2.10515 8.51948 1.99979 8.26512 1.99979 7.99991C1.99979 7.73469 2.10515 7.48033 2.29269 7.2928C2.48022 7.10526 2.73458 6.99991 2.99979 6.99991H16.9998C17.265 6.99991 17.5194 7.10526 17.7069 7.2928C17.8944 7.48033 17.9998 7.73469 17.9998 7.99991C17.9998 8.26512 17.8944 8.51948 17.7069 8.70701C17.5194 8.89455 17.265 8.9999 16.9998 8.9999Z" fill="currentColor"></path>
              </svg>
            </a>
          </li>
          <li>
            <a class="flex items-center justify-center w-12 h-12 rounded-xl text-gray-400 hover:text-blue-500 hover:bg-gray-800" href="#">
              <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M12.81 10.28C13.443 9.60024 13.7996 8.70877 13.81 7.78C13.81 6.77748 13.4118 5.81602 12.7029 5.10714C11.994 4.39825 11.0325 4 10.03 4C9.02748 4 8.06602 4.39825 7.35714 5.10714C6.64825 5.81602 6.25 6.77748 6.25 7.78C6.26044 8.70877 6.61702 9.60024 7.25 10.28C6.36865 10.7189 5.61022 11.3699 5.04292 12.1746C4.47561 12.9793 4.11723 13.9124 4 14.89C3.97083 15.1552 4.0482 15.4212 4.21511 15.6293C4.38202 15.8375 4.62478 15.9708 4.89 16C5.15522 16.0292 5.42116 15.9518 5.62932 15.7849C5.83749 15.618 5.97083 15.3752 6 15.11C6.11933 14.1411 6.58885 13.2494 7.32009 12.6027C8.05133 11.956 8.99382 11.599 9.97 11.599C10.9462 11.599 11.8887 11.956 12.6199 12.6027C13.3512 13.2494 13.8207 14.1411 13.94 15.11C13.9678 15.3664 14.0936 15.6022 14.2911 15.768C14.4887 15.9339 14.7426 16.017 15 16H15.11C15.3721 15.9698 15.6117 15.8373 15.7766 15.6313C15.9414 15.4252 16.0181 15.1624 15.99 14.9C15.8815 13.9276 15.5344 12.997 14.9796 12.191C14.4248 11.3851 13.6796 10.7286 12.81 10.28ZM10 9.56C9.64795 9.56 9.3038 9.4556 9.01108 9.26002C8.71836 9.06443 8.49022 8.78643 8.35549 8.46118C8.22077 8.13592 8.18552 7.77803 8.2542 7.43274C8.32288 7.08745 8.49241 6.77029 8.74135 6.52135C8.99029 6.27241 9.30745 6.10288 9.65274 6.0342C9.99803 5.96552 10.3559 6.00077 10.6812 6.13549C11.0064 6.27022 11.2844 6.49837 11.48 6.79109C11.6756 7.0838 11.78 7.42795 11.78 7.78C11.78 8.25208 11.5925 8.70484 11.2586 9.03865C10.9248 9.37247 10.4721 9.56 10 9.56ZM17 0H3C2.20435 0 1.44129 0.316071 0.87868 0.87868C0.316071 1.44129 0 2.20435 0 3V17C0 17.7956 0.316071 18.5587 0.87868 19.1213C1.44129 19.6839 2.20435 20 3 20H17C17.7956 20 18.5587 19.6839 19.1213 19.1213C19.6839 18.5587 20 17.7956 20 17V3C20 2.20435 19.6839 1.44129 19.1213 0.87868C18.5587 0.316071 17.7956 0 17 0ZM18 17C18 17.2652 17.8946 17.5196 17.7071 17.7071C17.5196 17.8946 17.2652 18 17 18H3C2.73478 18 2.48043 17.8946 2.29289 17.7071C2.10536 17.5196 2 17.2652 2 17V3C2 2.73478 2.10536 2.48043 2.29289 2.29289C2.48043 2.10536 2.73478 2 3 2H17C17.2652 2 17.5196 2.10536 17.7071 2.29289C17.8946 2.48043 18 2.73478 18 3V17Z" fill="currentColor"></path>
              </svg>
            </a>
          </li>
          <li>
            <a class="flex items-center justify-center w-12 h-12 rounded-xl text-gray-400 hover:text-blue-500 hover:bg-gray-800" href="#">
              <svg width="21" height="22" viewBox="0 0 21 22" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M18.8999 11.6599C18.7396 11.4774 18.6512 11.2428 18.6512 10.9999C18.6512 10.757 18.7396 10.5224 18.8999 10.3399L20.1799 8.89989C20.3209 8.74256 20.4085 8.5446 20.4301 8.3344C20.4516 8.12421 20.4061 7.91258 20.2999 7.72989L18.2999 4.2699C18.1948 4.08742 18.0348 3.94277 17.8426 3.85658C17.6505 3.77039 17.4361 3.74705 17.2299 3.7899L15.3499 4.1699C15.1107 4.21932 14.8616 4.17948 14.6498 4.0579C14.4379 3.93631 14.2779 3.74138 14.1999 3.5099L13.5899 1.6799C13.5228 1.48127 13.395 1.30876 13.2245 1.18674C13.0541 1.06471 12.8495 0.999354 12.6399 0.999895H8.6399C8.42183 0.988513 8.20603 1.04882 8.02546 1.17161C7.84489 1.2944 7.70948 1.47291 7.6399 1.6799L7.0799 3.5099C7.0019 3.74138 6.84187 3.93631 6.63001 4.0579C6.41815 4.17948 6.16911 4.21932 5.9299 4.1699L3.9999 3.7899C3.80445 3.76228 3.6052 3.79312 3.42724 3.87853C3.24929 3.96395 3.1006 4.10012 2.9999 4.2699L0.999896 7.72989C0.891056 7.91054 0.842118 8.12098 0.860079 8.33112C0.878039 8.54126 0.961979 8.74034 1.0999 8.89989L2.3699 10.3399C2.53022 10.5224 2.61863 10.757 2.61863 10.9999C2.61863 11.2428 2.53022 11.4774 2.3699 11.6599L1.0999 13.0999C0.961979 13.2595 0.878039 13.4585 0.860079 13.6687C0.842118 13.8788 0.891056 14.0892 0.999896 14.2699L2.9999 17.7299C3.10499 17.9124 3.26502 18.057 3.45715 18.1432C3.64928 18.2294 3.86372 18.2527 4.0699 18.2099L5.9499 17.8299C6.18911 17.7805 6.43815 17.8203 6.65001 17.9419C6.86187 18.0635 7.0219 18.2584 7.0999 18.4899L7.7099 20.3199C7.77948 20.5269 7.91489 20.7054 8.09546 20.8282C8.27603 20.951 8.49183 21.0113 8.7099 20.9999H12.7099C12.9195 21.0004 13.1241 20.9351 13.2945 20.8131C13.465 20.691 13.5928 20.5185 13.6599 20.3199L14.2699 18.4899C14.3479 18.2584 14.5079 18.0635 14.7198 17.9419C14.9316 17.8203 15.1807 17.7805 15.4199 17.8299L17.2999 18.2099C17.5061 18.2527 17.7205 18.2294 17.9126 18.1432C18.1048 18.057 18.2648 17.9124 18.3699 17.7299L20.3699 14.2699C20.4761 14.0872 20.5216 13.8756 20.5001 13.6654C20.4785 13.4552 20.3909 13.2572 20.2499 13.0999L18.8999 11.6599ZM17.4099 12.9999L18.2099 13.8999L16.9299 16.1199L15.7499 15.8799C15.0297 15.7327 14.2805 15.855 13.6445 16.2237C13.0085 16.5924 12.53 17.1817 12.2999 17.8799L11.9199 18.9999H9.3599L8.9999 17.8599C8.76975 17.1617 8.29128 16.5724 7.6553 16.2037C7.01932 15.835 6.27012 15.7127 5.5499 15.8599L4.3699 16.0999L3.0699 13.8899L3.8699 12.9899C4.36185 12.4399 4.63383 11.7278 4.63383 10.9899C4.63383 10.252 4.36185 9.53992 3.8699 8.98989L3.0699 8.0899L4.3499 5.88989L5.5299 6.1299C6.25012 6.27712 6.99932 6.15478 7.6353 5.78609C8.27128 5.41741 8.74975 4.82805 8.9799 4.1299L9.3599 2.9999H11.9199L12.2999 4.13989C12.53 4.83805 13.0085 5.42741 13.6445 5.79609C14.2805 6.16478 15.0297 6.28712 15.7499 6.13989L16.9299 5.8999L18.2099 8.11989L17.4099 9.0199C16.9235 9.56866 16.6549 10.2766 16.6549 11.0099C16.6549 11.7432 16.9235 12.4511 17.4099 12.9999ZM10.6399 6.9999C9.84877 6.9999 9.07541 7.23449 8.41761 7.67402C7.75982 8.11354 7.24713 8.73826 6.94438 9.46916C6.64163 10.2001 6.56241 11.0043 6.71675 11.7803C6.8711 12.5562 7.25206 13.2689 7.81147 13.8283C8.37088 14.3877 9.08361 14.7687 9.85954 14.923C10.6355 15.0774 11.4397 14.9982 12.1706 14.6954C12.9015 14.3927 13.5262 13.88 13.9658 13.2222C14.4053 12.5644 14.6399 11.791 14.6399 10.9999C14.6399 9.93903 14.2185 8.92161 13.4683 8.17147C12.7182 7.42132 11.7008 6.9999 10.6399 6.9999ZM10.6399 12.9999C10.2443 12.9999 9.85765 12.8826 9.52876 12.6628C9.19986 12.4431 8.94351 12.1307 8.79214 11.7653C8.64076 11.3998 8.60116 10.9977 8.67833 10.6097C8.7555 10.2218 8.94598 9.86539 9.22568 9.58568C9.50539 9.30598 9.86175 9.11549 10.2497 9.03832C10.6377 8.96115 11.0398 9.00076 11.4053 9.15214C11.7707 9.30351 12.0831 9.55986 12.3028 9.88875C12.5226 10.2177 12.6399 10.6043 12.6399 10.9999C12.6399 11.5303 12.4292 12.039 12.0541 12.4141C11.679 12.7892 11.1703 12.9999 10.6399 12.9999Z" fill="currentColor"></path>
              </svg>
            </a>
          </li>
          <li>
            <a class="flex items-center justify-center w-12 h-12 rounded-xl text-gray-400 hover:text-blue-500 hover:bg-gray-800" href="#">
              <svg width="16" height="20" viewBox="0 0 16 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M14 11.18V8C13.9986 6.58312 13.4958 5.21247 12.5806 4.13077C11.6655 3.04908 10.3971 2.32615 9 2.09V1C9 0.734784 8.89464 0.48043 8.70711 0.292893C8.51957 0.105357 8.26522 0 8 0C7.73478 0 7.48043 0.105357 7.29289 0.292893C7.10536 0.48043 7 0.734784 7 1V2.09C5.60294 2.32615 4.33452 3.04908 3.41939 4.13077C2.50425 5.21247 2.00144 6.58312 2 8V11.18C1.41645 11.3863 0.910998 11.7681 0.552938 12.2729C0.194879 12.7778 0.00173951 13.3811 0 14V16C0 16.2652 0.105357 16.5196 0.292893 16.7071C0.48043 16.8946 0.734784 17 1 17H4.14C4.37028 17.8474 4.873 18.5954 5.5706 19.1287C6.26819 19.6621 7.1219 19.951 8 19.951C8.8781 19.951 9.73181 19.6621 10.4294 19.1287C11.127 18.5954 11.6297 17.8474 11.86 17H15C15.2652 17 15.5196 16.8946 15.7071 16.7071C15.8946 16.5196 16 16.2652 16 16V14C15.9983 13.3811 15.8051 12.7778 15.4471 12.2729C15.089 11.7681 14.5835 11.3863 14 11.18V11.18ZM4 8C4 6.93913 4.42143 5.92172 5.17157 5.17157C5.92172 4.42143 6.93913 4 8 4C9.06087 4 10.0783 4.42143 10.8284 5.17157C11.5786 5.92172 12 6.93913 12 8V11H4V8ZM8 18C7.65097 17.9979 7.30857 17.9045 7.00683 17.7291C6.70509 17.5536 6.45451 17.3023 6.28 17H9.72C9.54549 17.3023 9.29491 17.5536 8.99317 17.7291C8.69143 17.9045 8.34903 17.9979 8 18ZM14 15H2V14C2 13.7348 2.10536 13.4804 2.29289 13.2929C2.48043 13.1054 2.73478 13 3 13H13C13.2652 13 13.5196 13.1054 13.7071 13.2929C13.8946 13.4804 14 13.7348 14 14V15Z" fill="currentColor"></path>
              </svg>
            </a>
          </li>
        </ul>
      </div>
      <div class="mt-auto">
        <a class="flex items-center justify-center w-12 h-12 rounded-xl text-gray-400 hover:text-blue-500 hover:bg-gray-800" href="#">
          <svg width="20" height="22" viewBox="0 0 20 22" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M13.71 11.7099C14.6904 10.9385 15.406 9.8808 15.7572 8.68382C16.1085 7.48684 16.0779 6.21015 15.6698 5.03135C15.2617 3.85255 14.4963 2.83027 13.4801 2.10674C12.4639 1.3832 11.2474 0.994385 10 0.994385C8.75255 0.994385 7.53611 1.3832 6.51993 2.10674C5.50374 2.83027 4.73834 3.85255 4.33021 5.03135C3.92208 6.21015 3.89151 7.48684 4.24276 8.68382C4.59401 9.8808 5.3096 10.9385 6.29 11.7099C4.61007 12.3829 3.14428 13.4992 2.04889 14.9398C0.953495 16.3804 0.26956 18.0912 0.0699967 19.8899C0.0555513 20.0212 0.0671132 20.1541 0.104022 20.2809C0.140931 20.4078 0.202464 20.5261 0.285108 20.6292C0.452016 20.8374 0.69478 20.9707 0.959997 20.9999C1.22521 21.0291 1.49116 20.9517 1.69932 20.7848C1.90749 20.6179 2.04082 20.3751 2.07 20.1099C2.28958 18.1551 3.22168 16.3497 4.68822 15.0387C6.15475 13.7277 8.0529 13.0029 10.02 13.0029C11.9871 13.0029 13.8852 13.7277 15.3518 15.0387C16.8183 16.3497 17.7504 18.1551 17.97 20.1099C17.9972 20.3556 18.1144 20.5825 18.2991 20.7469C18.4838 20.9113 18.7228 21.0014 18.97 20.9999H19.08C19.3421 20.9697 19.5817 20.8372 19.7466 20.6311C19.9114 20.4251 19.9881 20.1622 19.96 19.8999C19.7595 18.0961 19.0719 16.3809 17.9708 14.9381C16.8698 13.4953 15.3969 12.3794 13.71 11.7099ZM10 10.9999C9.20887 10.9999 8.43551 10.7653 7.77772 10.3258C7.11992 9.88623 6.60723 9.26152 6.30448 8.53061C6.00173 7.79971 5.92251 6.99544 6.07686 6.21952C6.2312 5.4436 6.61216 4.73086 7.17157 4.17145C7.73098 3.61204 8.44371 3.23108 9.21964 3.07674C9.99556 2.9224 10.7998 3.00161 11.5307 3.30436C12.2616 3.60711 12.8863 4.1198 13.3259 4.7776C13.7654 5.4354 14 6.20876 14 6.99988C14 8.06075 13.5786 9.07816 12.8284 9.82831C12.0783 10.5785 11.0609 10.9999 10 10.9999Z" fill="currentColor"></path>
          </svg>
        </a>
        <a class="flex items-center justify-center w-12 h-12 rounded-xl text-gray-400 hover:text-blue-500 bg-gray-800" href="#">
          <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M10.59 11.0001L8.29 13.2901C8.19627 13.3831 8.12188 13.4937 8.07111 13.6155C8.02034 13.7374 7.9942 13.8681 7.9942 14.0001C7.9942 14.1321 8.02034 14.2628 8.07111 14.3847C8.12188 14.5065 8.19627 14.6171 8.29 14.7101C8.38296 14.8038 8.49356 14.8782 8.61542 14.929C8.73728 14.9798 8.86799 15.0059 9 15.0059C9.13201 15.0059 9.26272 14.9798 9.38458 14.929C9.50644 14.8782 9.61704 14.8038 9.71 14.7101L13.71 10.7101C13.801 10.615 13.8724 10.5029 13.92 10.3801C14.02 10.1366 14.02 9.86356 13.92 9.6201C13.8724 9.49735 13.801 9.3852 13.71 9.2901L9.71 5.2901C9.61676 5.19686 9.50607 5.1229 9.38425 5.07244C9.26243 5.02198 9.13186 4.99601 9 4.99601C8.86814 4.99601 8.73757 5.02198 8.61575 5.07244C8.49393 5.1229 8.38324 5.19686 8.29 5.2901C8.19676 5.38334 8.1228 5.49403 8.07234 5.61585C8.02188 5.73767 7.99591 5.86824 7.99591 6.0001C7.99591 6.13196 8.02188 6.26253 8.07234 6.38435C8.1228 6.50617 8.19676 6.61686 8.29 6.7101L10.59 9.0001H1C0.734784 9.0001 0.48043 9.10546 0.292893 9.29299C0.105357 9.48053 0 9.73488 0 10.0001C0 10.2653 0.105357 10.5197 0.292893 10.7072C0.48043 10.8947 0.734784 11.0001 1 11.0001H10.59ZM10 9.96937e-05C8.13109 -0.00824409 6.29724 0.507313 4.70647 1.48829C3.11569 2.46927 1.83165 3.87641 1 5.5501C0.880653 5.78879 0.861015 6.06512 0.945406 6.3183C1.0298 6.57147 1.21131 6.78075 1.45 6.9001C1.68869 7.01945 1.96502 7.03909 2.2182 6.95469C2.47137 6.8703 2.68065 6.68879 2.8 6.4501C3.43219 5.17342 4.39383 4.08872 5.58555 3.30809C6.77727 2.52746 8.15582 2.07922 9.57876 2.00969C11.0017 1.94017 12.4174 2.25188 13.6795 2.91261C14.9417 3.57334 16.0045 4.55913 16.7581 5.7681C17.5118 6.97706 17.9289 8.36535 17.9664 9.78948C18.0039 11.2136 17.6605 12.6219 16.9715 13.8689C16.2826 15.1159 15.2731 16.1563 14.0475 16.8825C12.8219 17.6088 11.4246 17.9946 10 18.0001C8.50888 18.0066 7.04615 17.5925 5.77969 16.8053C4.51323 16.0182 3.49435 14.89 2.84 13.5501C2.72065 13.3114 2.51137 13.1299 2.2582 13.0455C2.00502 12.9611 1.72869 12.9808 1.49 13.1001C1.25131 13.2194 1.0698 13.4287 0.985406 13.6819C0.901015 13.9351 0.920653 14.2114 1.04 14.4501C1.83283 16.0456 3.03752 17.4003 4.52947 18.3741C6.02142 19.348 7.74645 19.9055 9.52612 19.9891C11.3058 20.0727 13.0755 19.6793 14.6521 18.8496C16.2288 18.0199 17.5552 16.7841 18.4941 15.2699C19.433 13.7558 19.9503 12.0182 19.9925 10.2371C20.0347 8.45597 19.6003 6.69589 18.7342 5.13893C17.8682 3.58197 16.6018 2.28467 15.0663 1.38121C13.5307 0.477745 11.7816 0.000936146 10 9.96937e-05Z" fill="currentColor"></path>
          </svg>
        </a>
      </div>
    </nav>
  </div>
  <div class="hidden lg:block relative z-50">
    <nav class="fixed top-0 left-0 bottom-0 max-w-max flex flex-col h-full py-6 px-4 bg-gray-700 overflow-auto">
      <a class="inline-block mb-12" href="#">
        <img class="h-7 mx-auto" src="trizzle-assets/logos/logo-only-trizzle.svg" alt="">
      </a>
      <div class="mb-6">
        <ul>
          <li>
            <a class="flex items-center justify-center w-12 h-12 rounded-xl text-gray-400 hover:text-blue-500 hover:bg-gray-800" href="#">
              <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M10 13H3C2.73478 13 2.48043 13.1054 2.29289 13.2929C2.10536 13.4804 2 13.7348 2 14V21C2 21.2652 2.10536 21.5196 2.29289 21.7071C2.48043 21.8946 2.73478 22 3 22H10C10.2652 22 10.5196 21.8946 10.7071 21.7071C10.8946 21.5196 11 21.2652 11 21V14C11 13.7348 10.8946 13.4804 10.7071 13.2929C10.5196 13.1054 10.2652 13 10 13ZM9 20H4V15H9V20ZM21 2H14C13.7348 2 13.4804 2.10536 13.2929 2.29289C13.1054 2.48043 13 2.73478 13 3V10C13 10.2652 13.1054 10.5196 13.2929 10.7071C13.4804 10.8946 13.7348 11 14 11H21C21.2652 11 21.5196 10.8946 21.7071 10.7071C21.8946 10.5196 22 10.2652 22 10V3C22 2.73478 21.8946 2.48043 21.7071 2.29289C21.5196 2.10536 21.2652 2 21 2ZM20 9H15V4H20V9ZM21 13H14C13.7348 13 13.4804 13.1054 13.2929 13.2929C13.1054 13.4804 13 13.7348 13 14V21C13 21.2652 13.1054 21.5196 13.2929 21.7071C13.4804 21.8946 13.7348 22 14 22H21C21.2652 22 21.5196 21.8946 21.7071 21.7071C21.8946 21.5196 22 21.2652 22 21V14C22 13.7348 21.8946 13.4804 21.7071 13.2929C21.5196 13.1054 21.2652 13 21 13ZM20 20H15V15H20V20ZM10 2H3C2.73478 2 2.48043 2.10536 2.29289 2.29289C2.10536 2.48043 2 2.73478 2 3V10C2 10.2652 2.10536 10.5196 2.29289 10.7071C2.48043 10.8946 2.73478 11 3 11H10C10.2652 11 10.5196 10.8946 10.7071 10.7071C10.8946 10.5196 11 10.2652 11 10V3C11 2.73478 10.8946 2.48043 10.7071 2.29289C10.5196 2.10536 10.2652 2 10 2ZM9 9H4V4H9V9Z" fill="currentColor"></path>
              </svg>
            </a>
          </li>
          <li>
            <a class="flex items-center justify-center w-12 h-12 rounded-xl text-gray-400 hover:text-blue-500 hover:bg-gray-800" href="#">
              <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M10 4C9.73478 4 9.48043 4.10536 9.29289 4.29289C9.10536 4.48043 9 4.73478 9 5V15C9 15.2652 9.10536 15.5196 9.29289 15.7071C9.48043 15.8946 9.73478 16 10 16C10.2652 16 10.5196 15.8946 10.7071 15.7071C10.8946 15.5196 11 15.2652 11 15V5C11 4.73478 10.8946 4.48043 10.7071 4.29289C10.5196 4.10536 10.2652 4 10 4ZM5 10C4.73478 10 4.48043 10.1054 4.29289 10.2929C4.10536 10.4804 4 10.7348 4 11V15C4 15.2652 4.10536 15.5196 4.29289 15.7071C4.48043 15.8946 4.73478 16 5 16C5.26522 16 5.51957 15.8946 5.70711 15.7071C5.89464 15.5196 6 15.2652 6 15V11C6 10.7348 5.89464 10.4804 5.70711 10.2929C5.51957 10.1054 5.26522 10 5 10ZM15 8C14.7348 8 14.4804 8.10536 14.2929 8.29289C14.1054 8.48043 14 8.73478 14 9V15C14 15.2652 14.1054 15.5196 14.2929 15.7071C14.4804 15.8946 14.7348 16 15 16C15.2652 16 15.5196 15.8946 15.7071 15.7071C15.8946 15.5196 16 15.2652 16 15V9C16 8.73478 15.8946 8.48043 15.7071 8.29289C15.5196 8.10536 15.2652 8 15 8ZM17 0H3C2.20435 0 1.44129 0.316071 0.87868 0.87868C0.316071 1.44129 0 2.20435 0 3V17C0 17.7956 0.316071 18.5587 0.87868 19.1213C1.44129 19.6839 2.20435 20 3 20H17C17.7956 20 18.5587 19.6839 19.1213 19.1213C19.6839 18.5587 20 17.7956 20 17V3C20 2.20435 19.6839 1.44129 19.1213 0.87868C18.5587 0.316071 17.7956 0 17 0ZM18 17C18 17.2652 17.8946 17.5196 17.7071 17.7071C17.5196 17.8946 17.2652 18 17 18H3C2.73478 18 2.48043 17.8946 2.29289 17.7071C2.10536 17.5196 2 17.2652 2 17V3C2 2.73478 2.10536 2.48043 2.29289 2.29289C2.48043 2.10536 2.73478 2 3 2H17C17.2652 2 17.5196 2.10536 17.7071 2.29289C17.8946 2.48043 18 2.73478 18 3V17Z" fill="currentColor"></path>
              </svg>
            </a>
          </li>
          <li>
            <a class="flex items-center justify-center w-12 h-12 rounded-xl text-gray-400 hover:text-blue-500 hover:bg-gray-800" href="#">
              <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M17 4.5H14V3.5C14 2.70435 13.6839 1.94129 13.1213 1.37868C12.5587 0.816071 11.7956 0.5 11 0.5H9C8.20435 0.5 7.44129 0.816071 6.87868 1.37868C6.31607 1.94129 6 2.70435 6 3.5V4.5H3C2.20435 4.5 1.44129 4.81607 0.87868 5.37868C0.316071 5.94129 0 6.70435 0 7.5V16.5C0 17.2956 0.316071 18.0587 0.87868 18.6213C1.44129 19.1839 2.20435 19.5 3 19.5H17C17.7956 19.5 18.5587 19.1839 19.1213 18.6213C19.6839 18.0587 20 17.2956 20 16.5V7.5C20 6.70435 19.6839 5.94129 19.1213 5.37868C18.5587 4.81607 17.7956 4.5 17 4.5ZM8 3.5C8 3.23478 8.10536 2.98043 8.29289 2.79289C8.48043 2.60536 8.73478 2.5 9 2.5H11C11.2652 2.5 11.5196 2.60536 11.7071 2.79289C11.8946 2.98043 12 3.23478 12 3.5V4.5H8V3.5ZM18 16.5C18 16.7652 17.8946 17.0196 17.7071 17.2071C17.5196 17.3946 17.2652 17.5 17 17.5H3C2.73478 17.5 2.48043 17.3946 2.29289 17.2071C2.10536 17.0196 2 16.7652 2 16.5V11C2.97544 11.3869 3.97818 11.7011 5 11.94V12.53C5 12.7952 5.10536 13.0496 5.29289 13.2371C5.48043 13.4246 5.73478 13.53 6 13.53C6.26522 13.53 6.51957 13.4246 6.70711 13.2371C6.89464 13.0496 7 12.7952 7 12.53V12.32C7.99435 12.4554 8.99649 12.5255 10 12.53C11.0035 12.5255 12.0057 12.4554 13 12.32V12.53C13 12.7952 13.1054 13.0496 13.2929 13.2371C13.4804 13.4246 13.7348 13.53 14 13.53C14.2652 13.53 14.5196 13.4246 14.7071 13.2371C14.8946 13.0496 15 12.7952 15 12.53V11.94C16.0218 11.7011 17.0246 11.3869 18 11V16.5ZM18 8.81C17.0274 9.22049 16.0244 9.55483 15 9.81V9.5C15 9.23478 14.8946 8.98043 14.7071 8.79289C14.5196 8.60536 14.2652 8.5 14 8.5C13.7348 8.5 13.4804 8.60536 13.2929 8.79289C13.1054 8.98043 13 9.23478 13 9.5V10.24C11.0113 10.54 8.98875 10.54 7 10.24V9.5C7 9.23478 6.89464 8.98043 6.70711 8.79289C6.51957 8.60536 6.26522 8.5 6 8.5C5.73478 8.5 5.48043 8.60536 5.29289 8.79289C5.10536 8.98043 5 9.23478 5 9.5V9.83C3.97562 9.57483 2.9726 9.24049 2 8.83V7.5C2 7.23478 2.10536 6.98043 2.29289 6.79289C2.48043 6.60536 2.73478 6.5 3 6.5H17C17.2652 6.5 17.5196 6.60536 17.7071 6.79289C17.8946 6.98043 18 7.23478 18 7.5V8.81Z" fill="currentColor"></path>
              </svg>
            </a>
          </li>
          <li>
            <a class="flex items-center justify-center w-12 h-12 rounded-xl text-gray-400 hover:text-blue-500 hover:bg-gray-800" href="#">
              <svg width="20" height="21" viewBox="0 0 20 21" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M11.9998 16.9999C12.265 16.9999 12.5194 16.8945 12.7069 16.707C12.8944 16.5195 12.9998 16.2651 12.9998 15.9999V13.9999C12.9998 13.7347 12.8944 13.4803 12.7069 13.2928C12.5194 13.1053 12.265 12.9999 11.9998 12.9999C11.7346 12.9999 11.4802 13.1053 11.2927 13.2928C11.1052 13.4803 10.9998 13.7347 10.9998 13.9999V15.9999C10.9998 16.2651 11.1052 16.5195 11.2927 16.707C11.4802 16.8945 11.7346 16.9999 11.9998 16.9999ZM7.99979 16.9999C8.26501 16.9999 8.51936 16.8945 8.7069 16.707C8.89444 16.5195 8.99979 16.2651 8.99979 15.9999V13.9999C8.99979 13.7347 8.89444 13.4803 8.7069 13.2928C8.51936 13.1053 8.26501 12.9999 7.99979 12.9999C7.73458 12.9999 7.48022 13.1053 7.29269 13.2928C7.10515 13.4803 6.99979 13.7347 6.99979 13.9999V15.9999C6.99979 16.2651 7.10515 16.5195 7.29269 16.707C7.48022 16.8945 7.73458 16.9999 7.99979 16.9999ZM16.9998 4.99991H15.6198L13.8898 1.5499C13.8369 1.42296 13.7585 1.30828 13.6593 1.21303C13.5601 1.11779 13.4423 1.04402 13.3133 0.996347C13.1843 0.948672 13.0469 0.928113 12.9096 0.935953C12.7723 0.943793 12.6381 0.979865 12.5154 1.04191C12.3927 1.10396 12.2841 1.19065 12.1964 1.29657C12.1087 1.40249 12.0438 1.52536 12.0057 1.6575C11.9676 1.78964 11.9572 1.92821 11.9752 2.06455C11.9931 2.20089 12.0389 2.33208 12.1098 2.44991L13.3798 4.99991H6.61979L7.88979 2.44991C7.98686 2.21681 7.99215 1.95563 7.90461 1.71879C7.81708 1.48196 7.64319 1.287 7.41785 1.17307C7.19252 1.05914 6.93244 1.03467 6.68981 1.10456C6.44718 1.17446 6.23997 1.33356 6.10979 1.5499L4.37979 4.99991H2.99979C2.29298 5.01066 1.61267 5.27065 1.07884 5.73404C0.545015 6.19742 0.191966 6.83443 0.0819632 7.53271C-0.02804 8.23099 0.112069 8.94569 0.477579 9.55075C0.843088 10.1558 1.41052 10.6124 2.07979 10.8399L2.81979 18.2999C2.89441 19.0425 3.24314 19.7306 3.79786 20.2298C4.35259 20.7291 5.07349 21.0036 5.81979 20.9999H14.1998C14.9461 21.0036 15.667 20.7291 16.2217 20.2298C16.7764 19.7306 17.1252 19.0425 17.1998 18.2999L17.9398 10.8399C18.6105 10.6117 19.1788 10.1535 19.5441 9.54639C19.9093 8.9393 20.048 8.22254 19.9354 7.52305C19.8228 6.82356 19.4663 6.18649 18.929 5.72468C18.3917 5.26287 17.7083 5.00612 16.9998 4.99991ZM15.1898 18.0999C15.1649 18.3474 15.0487 18.5768 14.8638 18.7432C14.6789 18.9096 14.4386 19.0012 14.1898 18.9999H5.80979C5.56103 19.0012 5.32073 18.9096 5.13582 18.7432C4.95091 18.5768 4.83467 18.3474 4.80979 18.0999L4.09979 10.9999H15.8998L15.1898 18.0999ZM16.9998 8.9999H2.99979C2.73458 8.9999 2.48022 8.89455 2.29269 8.70701C2.10515 8.51948 1.99979 8.26512 1.99979 7.99991C1.99979 7.73469 2.10515 7.48033 2.29269 7.2928C2.48022 7.10526 2.73458 6.99991 2.99979 6.99991H16.9998C17.265 6.99991 17.5194 7.10526 17.7069 7.2928C17.8944 7.48033 17.9998 7.73469 17.9998 7.99991C17.9998 8.26512 17.8944 8.51948 17.7069 8.70701C17.5194 8.89455 17.265 8.9999 16.9998 8.9999Z" fill="currentColor"></path>
              </svg>
            </a>
          </li>
          <li>
            <a class="flex items-center justify-center w-12 h-12 rounded-xl text-gray-400 hover:text-blue-500 hover:bg-gray-800" href="#">
              <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M12.81 10.28C13.443 9.60024 13.7996 8.70877 13.81 7.78C13.81 6.77748 13.4118 5.81602 12.7029 5.10714C11.994 4.39825 11.0325 4 10.03 4C9.02748 4 8.06602 4.39825 7.35714 5.10714C6.64825 5.81602 6.25 6.77748 6.25 7.78C6.26044 8.70877 6.61702 9.60024 7.25 10.28C6.36865 10.7189 5.61022 11.3699 5.04292 12.1746C4.47561 12.9793 4.11723 13.9124 4 14.89C3.97083 15.1552 4.0482 15.4212 4.21511 15.6293C4.38202 15.8375 4.62478 15.9708 4.89 16C5.15522 16.0292 5.42116 15.9518 5.62932 15.7849C5.83749 15.618 5.97083 15.3752 6 15.11C6.11933 14.1411 6.58885 13.2494 7.32009 12.6027C8.05133 11.956 8.99382 11.599 9.97 11.599C10.9462 11.599 11.8887 11.956 12.6199 12.6027C13.3512 13.2494 13.8207 14.1411 13.94 15.11C13.9678 15.3664 14.0936 15.6022 14.2911 15.768C14.4887 15.9339 14.7426 16.017 15 16H15.11C15.3721 15.9698 15.6117 15.8373 15.7766 15.6313C15.9414 15.4252 16.0181 15.1624 15.99 14.9C15.8815 13.9276 15.5344 12.997 14.9796 12.191C14.4248 11.3851 13.6796 10.7286 12.81 10.28ZM10 9.56C9.64795 9.56 9.3038 9.4556 9.01108 9.26002C8.71836 9.06443 8.49022 8.78643 8.35549 8.46118C8.22077 8.13592 8.18552 7.77803 8.2542 7.43274C8.32288 7.08745 8.49241 6.77029 8.74135 6.52135C8.99029 6.27241 9.30745 6.10288 9.65274 6.0342C9.99803 5.96552 10.3559 6.00077 10.6812 6.13549C11.0064 6.27022 11.2844 6.49837 11.48 6.79109C11.6756 7.0838 11.78 7.42795 11.78 7.78C11.78 8.25208 11.5925 8.70484 11.2586 9.03865C10.9248 9.37247 10.4721 9.56 10 9.56ZM17 0H3C2.20435 0 1.44129 0.316071 0.87868 0.87868C0.316071 1.44129 0 2.20435 0 3V17C0 17.7956 0.316071 18.5587 0.87868 19.1213C1.44129 19.6839 2.20435 20 3 20H17C17.7956 20 18.5587 19.6839 19.1213 19.1213C19.6839 18.5587 20 17.7956 20 17V3C20 2.20435 19.6839 1.44129 19.1213 0.87868C18.5587 0.316071 17.7956 0 17 0ZM18 17C18 17.2652 17.8946 17.5196 17.7071 17.7071C17.5196 17.8946 17.2652 18 17 18H3C2.73478 18 2.48043 17.8946 2.29289 17.7071C2.10536 17.5196 2 17.2652 2 17V3C2 2.73478 2.10536 2.48043 2.29289 2.29289C2.48043 2.10536 2.73478 2 3 2H17C17.2652 2 17.5196 2.10536 17.7071 2.29289C17.8946 2.48043 18 2.73478 18 3V17Z" fill="currentColor"></path>
              </svg>
            </a>
          </li>
          <li>
            <a class="flex items-center justify-center w-12 h-12 rounded-xl text-gray-400 hover:text-blue-500 hover:bg-gray-800" href="#">
              <svg width="21" height="22" viewBox="0 0 21 22" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M18.8999 11.6599C18.7396 11.4774 18.6512 11.2428 18.6512 10.9999C18.6512 10.757 18.7396 10.5224 18.8999 10.3399L20.1799 8.89989C20.3209 8.74256 20.4085 8.5446 20.4301 8.3344C20.4516 8.12421 20.4061 7.91258 20.2999 7.72989L18.2999 4.2699C18.1948 4.08742 18.0348 3.94277 17.8426 3.85658C17.6505 3.77039 17.4361 3.74705 17.2299 3.7899L15.3499 4.1699C15.1107 4.21932 14.8616 4.17948 14.6498 4.0579C14.4379 3.93631 14.2779 3.74138 14.1999 3.5099L13.5899 1.6799C13.5228 1.48127 13.395 1.30876 13.2245 1.18674C13.0541 1.06471 12.8495 0.999354 12.6399 0.999895H8.6399C8.42183 0.988513 8.20603 1.04882 8.02546 1.17161C7.84489 1.2944 7.70948 1.47291 7.6399 1.6799L7.0799 3.5099C7.0019 3.74138 6.84187 3.93631 6.63001 4.0579C6.41815 4.17948 6.16911 4.21932 5.9299 4.1699L3.9999 3.7899C3.80445 3.76228 3.6052 3.79312 3.42724 3.87853C3.24929 3.96395 3.1006 4.10012 2.9999 4.2699L0.999896 7.72989C0.891056 7.91054 0.842118 8.12098 0.860079 8.33112C0.878039 8.54126 0.961979 8.74034 1.0999 8.89989L2.3699 10.3399C2.53022 10.5224 2.61863 10.757 2.61863 10.9999C2.61863 11.2428 2.53022 11.4774 2.3699 11.6599L1.0999 13.0999C0.961979 13.2595 0.878039 13.4585 0.860079 13.6687C0.842118 13.8788 0.891056 14.0892 0.999896 14.2699L2.9999 17.7299C3.10499 17.9124 3.26502 18.057 3.45715 18.1432C3.64928 18.2294 3.86372 18.2527 4.0699 18.2099L5.9499 17.8299C6.18911 17.7805 6.43815 17.8203 6.65001 17.9419C6.86187 18.0635 7.0219 18.2584 7.0999 18.4899L7.7099 20.3199C7.77948 20.5269 7.91489 20.7054 8.09546 20.8282C8.27603 20.951 8.49183 21.0113 8.7099 20.9999H12.7099C12.9195 21.0004 13.1241 20.9351 13.2945 20.8131C13.465 20.691 13.5928 20.5185 13.6599 20.3199L14.2699 18.4899C14.3479 18.2584 14.5079 18.0635 14.7198 17.9419C14.9316 17.8203 15.1807 17.7805 15.4199 17.8299L17.2999 18.2099C17.5061 18.2527 17.7205 18.2294 17.9126 18.1432C18.1048 18.057 18.2648 17.9124 18.3699 17.7299L20.3699 14.2699C20.4761 14.0872 20.5216 13.8756 20.5001 13.6654C20.4785 13.4552 20.3909 13.2572 20.2499 13.0999L18.8999 11.6599ZM17.4099 12.9999L18.2099 13.8999L16.9299 16.1199L15.7499 15.8799C15.0297 15.7327 14.2805 15.855 13.6445 16.2237C13.0085 16.5924 12.53 17.1817 12.2999 17.8799L11.9199 18.9999H9.3599L8.9999 17.8599C8.76975 17.1617 8.29128 16.5724 7.6553 16.2037C7.01932 15.835 6.27012 15.7127 5.5499 15.8599L4.3699 16.0999L3.0699 13.8899L3.8699 12.9899C4.36185 12.4399 4.63383 11.7278 4.63383 10.9899C4.63383 10.252 4.36185 9.53992 3.8699 8.98989L3.0699 8.0899L4.3499 5.88989L5.5299 6.1299C6.25012 6.27712 6.99932 6.15478 7.6353 5.78609C8.27128 5.41741 8.74975 4.82805 8.9799 4.1299L9.3599 2.9999H11.9199L12.2999 4.13989C12.53 4.83805 13.0085 5.42741 13.6445 5.79609C14.2805 6.16478 15.0297 6.28712 15.7499 6.13989L16.9299 5.8999L18.2099 8.11989L17.4099 9.0199C16.9235 9.56866 16.6549 10.2766 16.6549 11.0099C16.6549 11.7432 16.9235 12.4511 17.4099 12.9999ZM10.6399 6.9999C9.84877 6.9999 9.07541 7.23449 8.41761 7.67402C7.75982 8.11354 7.24713 8.73826 6.94438 9.46916C6.64163 10.2001 6.56241 11.0043 6.71675 11.7803C6.8711 12.5562 7.25206 13.2689 7.81147 13.8283C8.37088 14.3877 9.08361 14.7687 9.85954 14.923C10.6355 15.0774 11.4397 14.9982 12.1706 14.6954C12.9015 14.3927 13.5262 13.88 13.9658 13.2222C14.4053 12.5644 14.6399 11.791 14.6399 10.9999C14.6399 9.93903 14.2185 8.92161 13.4683 8.17147C12.7182 7.42132 11.7008 6.9999 10.6399 6.9999ZM10.6399 12.9999C10.2443 12.9999 9.85765 12.8826 9.52876 12.6628C9.19986 12.4431 8.94351 12.1307 8.79214 11.7653C8.64076 11.3998 8.60116 10.9977 8.67833 10.6097C8.7555 10.2218 8.94598 9.86539 9.22568 9.58568C9.50539 9.30598 9.86175 9.11549 10.2497 9.03832C10.6377 8.96115 11.0398 9.00076 11.4053 9.15214C11.7707 9.30351 12.0831 9.55986 12.3028 9.88875C12.5226 10.2177 12.6399 10.6043 12.6399 10.9999C12.6399 11.5303 12.4292 12.039 12.0541 12.4141C11.679 12.7892 11.1703 12.9999 10.6399 12.9999Z" fill="currentColor"></path>
              </svg>
            </a>
          </li>
          <li>
            <a class="flex items-center justify-center w-12 h-12 rounded-xl text-gray-400 hover:text-blue-500 hover:bg-gray-800" href="#">
              <svg width="16" height="20" viewBox="0 0 16 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M14 11.18V8C13.9986 6.58312 13.4958 5.21247 12.5806 4.13077C11.6655 3.04908 10.3971 2.32615 9 2.09V1C9 0.734784 8.89464 0.48043 8.70711 0.292893C8.51957 0.105357 8.26522 0 8 0C7.73478 0 7.48043 0.105357 7.29289 0.292893C7.10536 0.48043 7 0.734784 7 1V2.09C5.60294 2.32615 4.33452 3.04908 3.41939 4.13077C2.50425 5.21247 2.00144 6.58312 2 8V11.18C1.41645 11.3863 0.910998 11.7681 0.552938 12.2729C0.194879 12.7778 0.00173951 13.3811 0 14V16C0 16.2652 0.105357 16.5196 0.292893 16.7071C0.48043 16.8946 0.734784 17 1 17H4.14C4.37028 17.8474 4.873 18.5954 5.5706 19.1287C6.26819 19.6621 7.1219 19.951 8 19.951C8.8781 19.951 9.73181 19.6621 10.4294 19.1287C11.127 18.5954 11.6297 17.8474 11.86 17H15C15.2652 17 15.5196 16.8946 15.7071 16.7071C15.8946 16.5196 16 16.2652 16 16V14C15.9983 13.3811 15.8051 12.7778 15.4471 12.2729C15.089 11.7681 14.5835 11.3863 14 11.18V11.18ZM4 8C4 6.93913 4.42143 5.92172 5.17157 5.17157C5.92172 4.42143 6.93913 4 8 4C9.06087 4 10.0783 4.42143 10.8284 5.17157C11.5786 5.92172 12 6.93913 12 8V11H4V8ZM8 18C7.65097 17.9979 7.30857 17.9045 7.00683 17.7291C6.70509 17.5536 6.45451 17.3023 6.28 17H9.72C9.54549 17.3023 9.29491 17.5536 8.99317 17.7291C8.69143 17.9045 8.34903 17.9979 8 18ZM14 15H2V14C2 13.7348 2.10536 13.4804 2.29289 13.2929C2.48043 13.1054 2.73478 13 3 13H13C13.2652 13 13.5196 13.1054 13.7071 13.2929C13.8946 13.4804 14 13.7348 14 14V15Z" fill="currentColor"></path>
              </svg>
            </a>
          </li>
        </ul>
      </div>
      <div class="mt-auto">
        <a class="flex items-center justify-center w-12 h-12 rounded-xl text-gray-400 hover:text-blue-500 hover:bg-gray-800" href="#">
          <svg width="20" height="22" viewBox="0 0 20 22" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M13.71 11.7099C14.6904 10.9385 15.406 9.8808 15.7572 8.68382C16.1085 7.48684 16.0779 6.21015 15.6698 5.03135C15.2617 3.85255 14.4963 2.83027 13.4801 2.10674C12.4639 1.3832 11.2474 0.994385 10 0.994385C8.75255 0.994385 7.53611 1.3832 6.51993 2.10674C5.50374 2.83027 4.73834 3.85255 4.33021 5.03135C3.92208 6.21015 3.89151 7.48684 4.24276 8.68382C4.59401 9.8808 5.3096 10.9385 6.29 11.7099C4.61007 12.3829 3.14428 13.4992 2.04889 14.9398C0.953495 16.3804 0.26956 18.0912 0.0699967 19.8899C0.0555513 20.0212 0.0671132 20.1541 0.104022 20.2809C0.140931 20.4078 0.202464 20.5261 0.285108 20.6292C0.452016 20.8374 0.69478 20.9707 0.959997 20.9999C1.22521 21.0291 1.49116 20.9517 1.69932 20.7848C1.90749 20.6179 2.04082 20.3751 2.07 20.1099C2.28958 18.1551 3.22168 16.3497 4.68822 15.0387C6.15475 13.7277 8.0529 13.0029 10.02 13.0029C11.9871 13.0029 13.8852 13.7277 15.3518 15.0387C16.8183 16.3497 17.7504 18.1551 17.97 20.1099C17.9972 20.3556 18.1144 20.5825 18.2991 20.7469C18.4838 20.9113 18.7228 21.0014 18.97 20.9999H19.08C19.3421 20.9697 19.5817 20.8372 19.7466 20.6311C19.9114 20.4251 19.9881 20.1622 19.96 19.8999C19.7595 18.0961 19.0719 16.3809 17.9708 14.9381C16.8698 13.4953 15.3969 12.3794 13.71 11.7099ZM10 10.9999C9.20887 10.9999 8.43551 10.7653 7.77772 10.3258C7.11992 9.88623 6.60723 9.26152 6.30448 8.53061C6.00173 7.79971 5.92251 6.99544 6.07686 6.21952C6.2312 5.4436 6.61216 4.73086 7.17157 4.17145C7.73098 3.61204 8.44371 3.23108 9.21964 3.07674C9.99556 2.9224 10.7998 3.00161 11.5307 3.30436C12.2616 3.60711 12.8863 4.1198 13.3259 4.7776C13.7654 5.4354 14 6.20876 14 6.99988C14 8.06075 13.5786 9.07816 12.8284 9.82831C12.0783 10.5785 11.0609 10.9999 10 10.9999Z" fill="currentColor"></path>
          </svg>
        </a>
        <a class="flex items-center justify-center w-12 h-12 rounded-xl text-gray-400 hover:text-blue-500 bg-gray-800" href="#">
          <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M10.59 11.0001L8.29 13.2901C8.19627 13.3831 8.12188 13.4937 8.07111 13.6155C8.02034 13.7374 7.9942 13.8681 7.9942 14.0001C7.9942 14.1321 8.02034 14.2628 8.07111 14.3847C8.12188 14.5065 8.19627 14.6171 8.29 14.7101C8.38296 14.8038 8.49356 14.8782 8.61542 14.929C8.73728 14.9798 8.86799 15.0059 9 15.0059C9.13201 15.0059 9.26272 14.9798 9.38458 14.929C9.50644 14.8782 9.61704 14.8038 9.71 14.7101L13.71 10.7101C13.801 10.615 13.8724 10.5029 13.92 10.3801C14.02 10.1366 14.02 9.86356 13.92 9.6201C13.8724 9.49735 13.801 9.3852 13.71 9.2901L9.71 5.2901C9.61676 5.19686 9.50607 5.1229 9.38425 5.07244C9.26243 5.02198 9.13186 4.99601 9 4.99601C8.86814 4.99601 8.73757 5.02198 8.61575 5.07244C8.49393 5.1229 8.38324 5.19686 8.29 5.2901C8.19676 5.38334 8.1228 5.49403 8.07234 5.61585C8.02188 5.73767 7.99591 5.86824 7.99591 6.0001C7.99591 6.13196 8.02188 6.26253 8.07234 6.38435C8.1228 6.50617 8.19676 6.61686 8.29 6.7101L10.59 9.0001H1C0.734784 9.0001 0.48043 9.10546 0.292893 9.29299C0.105357 9.48053 0 9.73488 0 10.0001C0 10.2653 0.105357 10.5197 0.292893 10.7072C0.48043 10.8947 0.734784 11.0001 1 11.0001H10.59ZM10 9.96937e-05C8.13109 -0.00824409 6.29724 0.507313 4.70647 1.48829C3.11569 2.46927 1.83165 3.87641 1 5.5501C0.880653 5.78879 0.861015 6.06512 0.945406 6.3183C1.0298 6.57147 1.21131 6.78075 1.45 6.9001C1.68869 7.01945 1.96502 7.03909 2.2182 6.95469C2.47137 6.8703 2.68065 6.68879 2.8 6.4501C3.43219 5.17342 4.39383 4.08872 5.58555 3.30809C6.77727 2.52746 8.15582 2.07922 9.57876 2.00969C11.0017 1.94017 12.4174 2.25188 13.6795 2.91261C14.9417 3.57334 16.0045 4.55913 16.7581 5.7681C17.5118 6.97706 17.9289 8.36535 17.9664 9.78948C18.0039 11.2136 17.6605 12.6219 16.9715 13.8689C16.2826 15.1159 15.2731 16.1563 14.0475 16.8825C12.8219 17.6088 11.4246 17.9946 10 18.0001C8.50888 18.0066 7.04615 17.5925 5.77969 16.8053C4.51323 16.0182 3.49435 14.89 2.84 13.5501C2.72065 13.3114 2.51137 13.1299 2.2582 13.0455C2.00502 12.9611 1.72869 12.9808 1.49 13.1001C1.25131 13.2194 1.0698 13.4287 0.985406 13.6819C0.901015 13.9351 0.920653 14.2114 1.04 14.4501C1.83283 16.0456 3.03752 17.4003 4.52947 18.3741C6.02142 19.348 7.74645 19.9055 9.52612 19.9891C11.3058 20.0727 13.0755 19.6793 14.6521 18.8496C16.2288 18.0199 17.5552 16.7841 18.4941 15.2699C19.433 13.7558 19.9503 12.0182 19.9925 10.2371C20.0347 8.45597 19.6003 6.69589 18.7342 5.13893C17.8682 3.58197 16.6018 2.28467 15.0663 1.38121C13.5307 0.477745 11.7816 0.000936146 10 9.96937e-05Z" fill="currentColor"></path>
          </svg>
        </a>
      </div>
    </nav>
  </div>
  <div class="relative z-50 mx-auto lg:ml-24"></div>
</div>

<section x-data="{ activeSlide: 1, slideCount: 3 }" class="py-3">
  <div class="container px-4 mx-auto">
    <div class="flex flex-wrap -mx-3">
      <div class="w-full lg:w-3/5 px-3 mb-6 lg:mb-0">
        <div class="mb-6">
          <div class="flex flex-wrap justify-center -mx-3 -mb-6">
            <div class="w-full md:w-1/3 px-3 mb-6">
              <div class="p-4 bg-gray-500 rounded-xl">
                <div class="max-w-xxs px-6 md:px-0 md:max-w-none mx-auto">
                  <div class="flex flex-wrap items-center mb-6 -m-2">
                    <div class="w-auto p-2 self-start">
                      <div class="flex w-8 h-8 items-center justify-center bg-gray-600 rounded-xl">
                        <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                          <path d="M7.3333 5.99996H9.99996C10.1768 5.99996 10.3463 5.92972 10.4714 5.8047C10.5964 5.67967 10.6666 5.5101 10.6666 5.33329C10.6666 5.15648 10.5964 4.98691 10.4714 4.86189C10.3463 4.73686 10.1768 4.66663 9.99996 4.66663H8.66663V3.99996C8.66663 3.82315 8.59639 3.65358 8.47137 3.52855C8.34634 3.40353 8.17677 3.33329 7.99996 3.33329C7.82315 3.33329 7.65358 3.40353 7.52856 3.52855C7.40353 3.65358 7.3333 3.82315 7.3333 3.99996V4.66663C6.80286 4.66663 6.29416 4.87734 5.91908 5.25241C5.54401 5.62748 5.3333 6.13619 5.3333 6.66663C5.3333 7.19706 5.54401 7.70577 5.91908 8.08084C6.29416 8.45591 6.80286 8.66663 7.3333 8.66663H8.66663C8.84344 8.66663 9.01301 8.73686 9.13803 8.86189C9.26306 8.98691 9.3333 9.15648 9.3333 9.33329C9.3333 9.5101 9.26306 9.67967 9.13803 9.8047C9.01301 9.92972 8.84344 9.99996 8.66663 9.99996H5.99996C5.82315 9.99996 5.65358 10.0702 5.52856 10.1952C5.40353 10.3202 5.3333 10.4898 5.3333 10.6666C5.3333 10.8434 5.40353 11.013 5.52856 11.138C5.65358 11.2631 5.82315 11.3333 5.99996 11.3333H7.3333V12C7.3333 12.1768 7.40353 12.3463 7.52856 12.4714C7.65358 12.5964 7.82315 12.6666 7.99996 12.6666C8.17677 12.6666 8.34634 12.5964 8.47137 12.4714C8.59639 12.3463 8.66663 12.1768 8.66663 12V11.3333C9.19706 11.3333 9.70577 11.1226 10.0808 10.7475C10.4559 10.3724 10.6666 9.86372 10.6666 9.33329C10.6666 8.80286 10.4559 8.29415 10.0808 7.91908C9.70577 7.54401 9.19706 7.33329 8.66663 7.33329H7.3333C7.15649 7.33329 6.98692 7.26305 6.86189 7.13803C6.73687 7.01301 6.66663 6.84344 6.66663 6.66663C6.66663 6.48981 6.73687 6.32025 6.86189 6.19522C6.98692 6.0702 7.15649 5.99996 7.3333 5.99996ZM7.99996 0.666626C6.54957 0.666626 5.13174 1.09672 3.92578 1.90252C2.71982 2.70831 1.77989 3.85362 1.22485 5.19361C0.669803 6.53361 0.524579 8.00809 0.807537 9.43062C1.0905 10.8531 1.78893 12.1598 2.81451 13.1854C3.8401 14.211 5.14677 14.9094 6.5693 15.1924C7.99183 15.4753 9.46632 15.3301 10.8063 14.7751C12.1463 14.22 13.2916 13.2801 14.0974 12.0741C14.9032 10.8682 15.3333 9.45036 15.3333 7.99996C15.3333 6.05504 14.5607 4.18978 13.1854 2.81451C11.8101 1.43924 9.94488 0.666626 7.99996 0.666626ZM7.99996 14C6.81327 14 5.65324 13.6481 4.66654 12.9888C3.67985 12.3295 2.91081 11.3924 2.45669 10.2961C2.00256 9.1997 1.88374 7.9933 2.11525 6.82942C2.34676 5.66553 2.91821 4.59643 3.75732 3.75732C4.59644 2.9182 5.66553 2.34676 6.82942 2.11525C7.99331 1.88374 9.19971 2.00256 10.2961 2.45668C11.3924 2.91081 12.3295 3.67984 12.9888 4.66654C13.6481 5.65323 14 6.81327 14 7.99996C14 9.59126 13.3678 11.1174 12.2426 12.2426C11.1174 13.3678 9.59126 14 7.99996 14Z" fill="#194BFB"></path>
                        </svg>
                      </div>
                    </div>
                    <div class="w-auto p-2">
                      <h5 class="text-xs leading-tight font-medium text-gray-300">Main account</h5>
                      <h4 class="leading-6 text-gray-100 font-semibold">$16,045.00</h4>
                    </div>
                  </div>
                  <div class="flex items-end -mx-2">
                    <div class="w-1/5 px-2">
                      <div class="group relative h-8 w-6 bg-gray-600 hover:bg-blue-500 rounded-t-md">
                        <div class="hidden group-hover:block absolute z-10 bottom-full left-full w-40 px-3 py-2 bg-gray-700 rounded-lg">
                          <span class="text-xs text-gray-200">Lorem ipsum 200 dolor, sit amet elit.</span>
                          <div class="absolute bottom-0 left-0 transform -translate-x-1/2 translate-y-1/2 w-2 h-2 bg-gray-100 rounded-full"></div>
                        </div>
                      </div>
                    </div>
                    <div class="w-1/5 px-2">
                      <div class="group relative h-16 w-6 bg-gray-600 hover:bg-blue-500 rounded-t-md">
                        <div class="hidden group-hover:block absolute z-10 bottom-full left-full w-40 px-3 py-2 bg-gray-700 rounded-lg">
                          <span class="text-xs text-gray-200">Lorem ipsum 200 dolor, sit amet elit.</span>
                          <div class="absolute bottom-0 left-0 transform -translate-x-1/2 translate-y-1/2 w-2 h-2 bg-gray-100 rounded-full"></div>
                        </div>
                      </div>
                    </div>
                    <div class="w-1/5 px-2">
                      <div class="group relative h-10 w-6 bg-gray-600 hover:bg-blue-500 rounded-t-md">
                        <div class="hidden group-hover:block absolute z-10 bottom-full left-full w-40 px-3 py-2 bg-gray-700 rounded-lg">
                          <span class="text-xs text-gray-200">Lorem ipsum 200 dolor, sit amet elit.</span>
                          <div class="absolute bottom-0 left-0 transform -translate-x-1/2 translate-y-1/2 w-2 h-2 bg-gray-100 rounded-full"></div>
                        </div>
                      </div>
                    </div>
                    <div class="w-1/5 px-2">
                      <div class="group relative h-14 w-6 bg-gray-600 hover:bg-blue-500 rounded-t-md">
                        <div class="hidden group-hover:block absolute z-10 bottom-full left-full w-40 px-3 py-2 bg-gray-700 rounded-lg">
                          <span class="text-xs text-gray-200">Lorem ipsum 200 dolor, sit amet elit.</span>
                          <div class="absolute bottom-0 left-0 transform -translate-x-1/2 translate-y-1/2 w-2 h-2 bg-gray-100 rounded-full"></div>
                        </div>
                      </div>
                    </div>
                    <div class="w-1/5 px-2">
                      <div class="group relative h-16 w-6 bg-gray-600 hover:bg-blue-500 rounded-t-md">
                        <div class="hidden group-hover:block absolute z-10 bottom-full left-full w-40 px-3 py-2 bg-gray-700 rounded-lg">
                          <span class="text-xs text-gray-200">Lorem ipsum 200 dolor, sit amet elit.</span>
                          <div class="absolute bottom-0 left-0 transform -translate-x-1/2 translate-y-1/2 w-2 h-2 bg-gray-100 rounded-full"></div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="w-full md:w-1/3 px-3 mb-6">
              <div class="p-4 bg-gray-500 rounded-xl">
                <div class="max-w-xxs px-6 md:px-0 md:max-w-none mx-auto">
                  <div class="flex flex-wrap items-center mb-6 -m-2">
                    <div class="w-auto p-2 self-start">
                      <div class="flex w-8 h-8 items-center justify-center bg-gray-600 rounded-xl">
                        <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
                          <path d="M5.33338 6.00001H7.00005C7.17686 6.00001 7.34643 5.92977 7.47145 5.80474C7.59647 5.67972 7.66671 5.51015 7.66671 5.33334C7.66671 5.15653 7.59647 4.98696 7.47145 4.86193C7.34643 4.73691 7.17686 4.66667 7.00005 4.66667H6.33338V4.33334C6.33338 4.15653 6.26314 3.98696 6.13812 3.86193C6.01309 3.73691 5.84352 3.66667 5.66671 3.66667C5.4899 3.66667 5.32033 3.73691 5.19531 3.86193C5.07028 3.98696 5.00005 4.15653 5.00005 4.33334V4.70001C4.595 4.78225 4.23495 5.01207 3.98982 5.34485C3.74468 5.67762 3.63194 6.08961 3.67348 6.50084C3.71501 6.91206 3.90787 7.29318 4.2146 7.57021C4.52133 7.84725 4.92006 8.00042 5.33338 8.00001H6.00005C6.08845 8.00001 6.17324 8.03512 6.23575 8.09764C6.29826 8.16015 6.33338 8.24493 6.33338 8.33334C6.33338 8.42174 6.29826 8.50653 6.23575 8.56904C6.17324 8.63155 6.08845 8.66667 6.00005 8.66667H4.33338C4.15657 8.66667 3.987 8.73691 3.86198 8.86193C3.73695 8.98696 3.66671 9.15653 3.66671 9.33334C3.66671 9.51015 3.73695 9.67972 3.86198 9.80474C3.987 9.92977 4.15657 10 4.33338 10H5.00005V10.3333C5.00005 10.5101 5.07028 10.6797 5.19531 10.8047C5.32033 10.9298 5.4899 11 5.66671 11C5.84352 11 6.01309 10.9298 6.13812 10.8047C6.26314 10.6797 6.33338 10.5101 6.33338 10.3333V9.96667C6.73843 9.88442 7.09847 9.6546 7.34361 9.32183C7.58875 8.98905 7.70149 8.57706 7.65995 8.16584C7.61841 7.75461 7.42556 7.37349 7.11882 7.09646C6.81209 6.81943 6.41336 6.66626 6.00005 6.66667H5.33338C5.24497 6.66667 5.16019 6.63155 5.09768 6.56904C5.03516 6.50653 5.00005 6.42174 5.00005 6.33334C5.00005 6.24493 5.03516 6.16015 5.09768 6.09764C5.16019 6.03512 5.24497 6.00001 5.33338 6.00001ZM13 7.00001H11V1C11.0005 0.882532 10.9699 0.767021 10.9114 0.665169C10.8529 0.563317 10.7684 0.478741 10.6667 0.420005C10.5654 0.361493 10.4504 0.330688 10.3334 0.330688C10.2164 0.330688 10.1014 0.361493 10 0.420005L8.00005 1.56667L6.00005 0.420005C5.8987 0.361493 5.78374 0.330688 5.66671 0.330688C5.54969 0.330688 5.43473 0.361493 5.33338 0.420005L3.33338 1.56667L1.33338 0.420005C1.23203 0.361493 1.11707 0.330688 1.00005 0.330688C0.883022 0.330688 0.768059 0.361493 0.666713 0.420005C0.564976 0.478741 0.480567 0.563317 0.422031 0.665169C0.363496 0.767021 0.332913 0.882532 0.333379 1V11.6667C0.333379 12.1971 0.544093 12.7058 0.919166 13.0809C1.29424 13.456 1.80295 13.6667 2.33338 13.6667H11.6667C12.1971 13.6667 12.7059 13.456 13.0809 13.0809C13.456 12.7058 13.6667 12.1971 13.6667 11.6667V7.66667C13.6667 7.48986 13.5965 7.32029 13.4715 7.19527C13.3464 7.07024 13.1769 7.00001 13 7.00001ZM2.33338 12.3333C2.15657 12.3333 1.987 12.2631 1.86197 12.1381C1.73695 12.0131 1.66671 11.8435 1.66671 11.6667V2.15334L3.00005 2.91334C3.10294 2.96708 3.2173 2.99515 3.33338 2.99515C3.44946 2.99515 3.56382 2.96708 3.66671 2.91334L5.66671 1.76667L7.66671 2.91334C7.7696 2.96708 7.88396 2.99515 8.00005 2.99515C8.11613 2.99515 8.23049 2.96708 8.33338 2.91334L9.66671 2.15334V11.6667C9.66852 11.8941 9.7091 12.1196 9.78671 12.3333H2.33338ZM12.3334 11.6667C12.3334 11.8435 12.2631 12.0131 12.1381 12.1381C12.0131 12.2631 11.8435 12.3333 11.6667 12.3333C11.4899 12.3333 11.3203 12.2631 11.1953 12.1381C11.0703 12.0131 11 11.8435 11 11.6667V8.33334H12.3334V11.6667Z" fill="#194BFB"></path>
                        </svg>
                      </div>
                    </div>
                    <div class="w-auto p-2">
                      <h5 class="text-xs leading-tight font-medium text-gray-300">Taxes</h5>
                      <h4 class="leading-6 text-gray-100 font-semibold">$5,025.00</h4>
                    </div>
                  </div>
                  <div class="flex items-end -mx-2">
                    <div class="w-1/5 px-2">
                      <div class="group relative h-8 w-6 bg-gray-600 hover:bg-blue-500 rounded-t-md">
                        <div class="hidden group-hover:block absolute z-10 bottom-full left-full w-40 px-3 py-2 bg-gray-700 rounded-lg">
                          <span class="text-xs text-gray-200">Lorem ipsum 200 dolor, sit amet elit.</span>
                          <div class="absolute bottom-0 left-0 transform -translate-x-1/2 translate-y-1/2 w-2 h-2 bg-gray-100 rounded-full"></div>
                        </div>
                      </div>
                    </div>
                    <div class="w-1/5 px-2">
                      <div class="group relative h-16 w-6 bg-gray-600 hover:bg-blue-500 rounded-t-md">
                        <div class="hidden group-hover:block absolute z-10 bottom-full left-full w-40 px-3 py-2 bg-gray-700 rounded-lg">
                          <span class="text-xs text-gray-200">Lorem ipsum 200 dolor, sit amet elit.</span>
                          <div class="absolute bottom-0 left-0 transform -translate-x-1/2 translate-y-1/2 w-2 h-2 bg-gray-100 rounded-full"></div>
                        </div>
                      </div>
                    </div>
                    <div class="w-1/5 px-2">
                      <div class="group relative h-10 w-6 bg-gray-600 hover:bg-blue-500 rounded-t-md">
                        <div class="hidden group-hover:block absolute z-10 bottom-full left-full w-40 px-3 py-2 bg-gray-700 rounded-lg">
                          <span class="text-xs text-gray-200">Lorem ipsum 200 dolor, sit amet elit.</span>
                          <div class="absolute bottom-0 left-0 transform -translate-x-1/2 translate-y-1/2 w-2 h-2 bg-gray-100 rounded-full"></div>
                        </div>
                      </div>
                    </div>
                    <div class="w-1/5 px-2">
                      <div class="group relative h-14 w-6 bg-gray-600 hover:bg-blue-500 rounded-t-md">
                        <div class="hidden group-hover:block absolute z-10 bottom-full left-full w-40 px-3 py-2 bg-gray-700 rounded-lg">
                          <span class="text-xs text-gray-200">Lorem ipsum 200 dolor, sit amet elit.</span>
                          <div class="absolute bottom-0 left-0 transform -translate-x-1/2 translate-y-1/2 w-2 h-2 bg-gray-100 rounded-full"></div>
                        </div>
                      </div>
                    </div>
                    <div class="w-1/5 px-2">
                      <div class="group relative h-16 w-6 bg-gray-600 hover:bg-blue-500 rounded-t-md">
                        <div class="hidden group-hover:block absolute z-10 bottom-full left-full w-40 px-3 py-2 bg-gray-700 rounded-lg">
                          <span class="text-xs text-gray-200">Lorem ipsum 200 dolor, sit amet elit.</span>
                          <div class="absolute bottom-0 left-0 transform -translate-x-1/2 translate-y-1/2 w-2 h-2 bg-gray-100 rounded-full"></div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="w-full md:w-1/3 px-3 mb-6">
              <div class="p-4 bg-gray-500 rounded-xl">
                <div class="max-w-xxs px-6 md:px-0 md:max-w-none mx-auto">
                  <div class="flex flex-wrap items-center mb-6 -m-2">
                    <div class="w-auto p-2 self-start">
                      <div class="flex w-8 h-8 items-center justify-center bg-gray-600 rounded-xl">
                        <svg width="14" height="12" viewBox="0 0 14 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                          <path d="M13.1467 6C13.4786 5.63491 13.6638 5.16004 13.6667 4.66667C13.6667 4.13623 13.456 3.62753 13.0809 3.25245C12.7058 2.87738 12.1971 2.66667 11.6667 2.66667H8.21337C8.31987 2.36545 8.35266 2.04311 8.30899 1.72662C8.26532 1.41013 8.14646 1.10871 7.96237 0.847589C7.77828 0.586469 7.53432 0.373251 7.2509 0.225785C6.96748 0.0783194 6.65286 0.000897008 6.33337 0H2.33337C1.80294 0 1.29423 0.210714 0.91916 0.585787C0.544088 0.960859 0.333374 1.46957 0.333374 2C0.336314 2.49337 0.521515 2.96824 0.853374 3.33333C0.525404 3.70002 0.344086 4.17471 0.344086 4.66667C0.344086 5.15862 0.525404 5.63332 0.853374 6C0.525404 6.36668 0.344086 6.84138 0.344086 7.33333C0.344086 7.82529 0.525404 8.29998 0.853374 8.66667C0.521515 9.03176 0.336314 9.50663 0.333374 10C0.333374 10.5304 0.544088 11.0391 0.91916 11.4142C1.29423 11.7893 1.80294 12 2.33337 12H11.6667C12.0519 11.9979 12.4283 11.8847 12.7506 11.6739C13.073 11.4631 13.3276 11.1637 13.4839 10.8116C13.6403 10.4596 13.6916 10.0699 13.6318 9.6894C13.5719 9.30889 13.4035 8.95376 13.1467 8.66667C13.4747 8.29998 13.656 7.82529 13.656 7.33333C13.656 6.84138 13.4747 6.36668 13.1467 6ZM6.33337 10.6667H2.33337C2.15656 10.6667 1.98699 10.5964 1.86197 10.4714C1.73695 10.3464 1.66671 10.1768 1.66671 10C1.66671 9.82319 1.73695 9.65362 1.86197 9.52859C1.98699 9.40357 2.15656 9.33333 2.33337 9.33333H6.33337C6.51018 9.33333 6.67975 9.40357 6.80478 9.52859C6.9298 9.65362 7.00004 9.82319 7.00004 10C7.00004 10.1768 6.9298 10.3464 6.80478 10.4714C6.67975 10.5964 6.51018 10.6667 6.33337 10.6667ZM6.33337 8H2.33337C2.15656 8 1.98699 7.92976 1.86197 7.80474C1.73695 7.67971 1.66671 7.51014 1.66671 7.33333C1.66671 7.15652 1.73695 6.98695 1.86197 6.86193C1.98699 6.73691 2.15656 6.66667 2.33337 6.66667H6.33337C6.51018 6.66667 6.67975 6.73691 6.80478 6.86193C6.9298 6.98695 7.00004 7.15652 7.00004 7.33333C7.00004 7.51014 6.9298 7.67971 6.80478 7.80474C6.67975 7.92976 6.51018 8 6.33337 8ZM6.33337 5.33333H2.33337C2.15656 5.33333 1.98699 5.2631 1.86197 5.13807C1.73695 5.01305 1.66671 4.84348 1.66671 4.66667C1.66671 4.48986 1.73695 4.32029 1.86197 4.19526C1.98699 4.07024 2.15656 4 2.33337 4H6.33337C6.51018 4 6.67975 4.07024 6.80478 4.19526C6.9298 4.32029 7.00004 4.48986 7.00004 4.66667C7.00004 4.84348 6.9298 5.01305 6.80478 5.13807C6.67975 5.2631 6.51018 5.33333 6.33337 5.33333ZM6.33337 2.66667H2.33337C2.15656 2.66667 1.98699 2.59643 1.86197 2.4714C1.73695 2.34638 1.66671 2.17681 1.66671 2C1.66671 1.82319 1.73695 1.65362 1.86197 1.5286C1.98699 1.40357 2.15656 1.33333 2.33337 1.33333H6.33337C6.51018 1.33333 6.67975 1.40357 6.80478 1.5286C6.9298 1.65362 7.00004 1.82319 7.00004 2C7.00004 2.17681 6.9298 2.34638 6.80478 2.4714C6.67975 2.59643 6.51018 2.66667 6.33337 2.66667ZM12.1267 10.4733C12.0676 10.5357 11.9962 10.585 11.917 10.6183C11.8378 10.6516 11.7526 10.6681 11.6667 10.6667H8.21337C8.37324 10.2366 8.37324 9.7634 8.21337 9.33333H11.6667C11.8435 9.33333 12.0131 9.40357 12.1381 9.52859C12.2631 9.65362 12.3334 9.82319 12.3334 10C12.3321 10.0887 12.3132 10.1762 12.2777 10.2575C12.2423 10.3388 12.1909 10.4121 12.1267 10.4733ZM12.1267 7.80667C12.0676 7.869 11.9962 7.91837 11.917 7.95165C11.8378 7.98493 11.7526 8.0014 11.6667 8H8.21337C8.37324 7.56993 8.37324 7.09674 8.21337 6.66667H11.6667C11.8435 6.66667 12.0131 6.73691 12.1381 6.86193C12.2631 6.98695 12.3334 7.15652 12.3334 7.33333C12.3321 7.42201 12.3132 7.50955 12.2777 7.59083C12.2423 7.6721 12.1909 7.74548 12.1267 7.80667ZM12.1267 5.14C12.0676 5.20233 11.9962 5.2517 11.917 5.28499C11.8378 5.31827 11.7526 5.33473 11.6667 5.33333H8.21337C8.37324 4.90327 8.37324 4.43007 8.21337 4H11.6667C11.8435 4 12.0131 4.07024 12.1381 4.19526C12.2631 4.32029 12.3334 4.48986 12.3334 4.66667C12.3321 4.75534 12.3132 4.84288 12.2777 4.92416C12.2423 5.00544 12.1909 5.07882 12.1267 5.14Z" fill="#194BFB"></path>
                        </svg>
                      </div>
                    </div>
                    <div class="w-auto p-2">
                      <h5 class="text-xs leading-tight font-medium text-gray-300">Savings</h5>
                      <h4 class="leading-6 text-gray-100 font-semibold">$2,525.00</h4>
                    </div>
                  </div>
                  <div class="flex items-end -mx-2">
                    <div class="w-1/5 px-2">
                      <div class="group relative h-8 w-6 bg-gray-600 hover:bg-blue-500 rounded-t-md">
                        <div class="hidden group-hover:block absolute z-10 bottom-full left-full w-40 px-3 py-2 bg-gray-700 rounded-lg">
                          <span class="text-xs text-gray-200">Lorem ipsum 200 dolor, sit amet elit.</span>
                          <div class="absolute bottom-0 left-0 transform -translate-x-1/2 translate-y-1/2 w-2 h-2 bg-gray-100 rounded-full"></div>
                        </div>
                      </div>
                    </div>
                    <div class="w-1/5 px-2">
                      <div class="group relative h-16 w-6 bg-gray-600 hover:bg-blue-500 rounded-t-md">
                        <div class="hidden group-hover:block absolute z-10 bottom-full left-full w-40 px-3 py-2 bg-gray-700 rounded-lg">
                          <span class="text-xs text-gray-200">Lorem ipsum 200 dolor, sit amet elit.</span>
                          <div class="absolute bottom-0 left-0 transform -translate-x-1/2 translate-y-1/2 w-2 h-2 bg-gray-100 rounded-full"></div>
                        </div>
                      </div>
                    </div>
                    <div class="w-1/5 px-2">
                      <div class="group relative h-10 w-6 bg-gray-600 hover:bg-blue-500 rounded-t-md">
                        <div class="hidden group-hover:block absolute z-10 bottom-full left-full w-40 px-3 py-2 bg-gray-700 rounded-lg">
                          <span class="text-xs text-gray-200">Lorem ipsum 200 dolor, sit amet elit.</span>
                          <div class="absolute bottom-0 left-0 transform -translate-x-1/2 translate-y-1/2 w-2 h-2 bg-gray-100 rounded-full"></div>
                        </div>
                      </div>
                    </div>
                    <div class="w-1/5 px-2">
                      <div class="group relative h-14 w-6 bg-gray-600 hover:bg-blue-500 rounded-t-md">
                        <div class="hidden group-hover:block absolute z-10 bottom-full left-full w-40 px-3 py-2 bg-gray-700 rounded-lg">
                          <span class="text-xs text-gray-200">Lorem ipsum 200 dolor, sit amet elit.</span>
                          <div class="absolute bottom-0 left-0 transform -translate-x-1/2 translate-y-1/2 w-2 h-2 bg-gray-100 rounded-full"></div>
                        </div>
                      </div>
                    </div>
                    <div class="w-1/5 px-2">
                      <div class="group relative h-16 w-6 bg-gray-600 hover:bg-blue-500 rounded-t-md">
                        <div class="hidden group-hover:block absolute z-10 bottom-full left-full w-40 px-3 py-2 bg-gray-700 rounded-lg">
                          <span class="text-xs text-gray-200">Lorem ipsum 200 dolor, sit amet elit.</span>
                          <div class="absolute bottom-0 left-0 transform -translate-x-1/2 translate-y-1/2 w-2 h-2 bg-gray-100 rounded-full"></div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="mb-6">
          <div class="pt-6 pb-14 px-6 bg-gray-500 rounded-xl">
            <div class="flex flex-wrap -mx-3 -mb-4 justify-between items-center">
              <div class="w-auto px-3 mb-4">
                <h4 class="text-lg text-gray-200 font-bold tracking-wide">Money Flow</h4>
              </div>
              <div class="w-full sm:w-auto px-3 mb-4">
                <div class="flex flex-wrap items-center">
                  <div class="flex items-center mr-4">
                    <span class="inline-block w-3 h-1 mr-1 bg-blue-500 rounded-full"></span>
                    <span class="text-xs font-semibold text-gray-100">Income</span>
                  </div>
                  <div class="flex items-center mr-6">
                    <span class="inline-block w-3 h-1 mr-1 bg-yellow-500 rounded-full"></span>
                    <span class="text-xs font-semibold text-gray-100">Expenses</span>
                  </div>
                  <div class="w-full sm:w-auto mt-4 sm:mt-0">
                    <div class="relative inline-block max-w-max bg-gray-600 rounded-xl">
                      <select class="relative py-3 pl-2 pr-6 cursor-pointer bg-transparent text-xs text-gray-300 font-semibold appearance-none outline-none" style="z-index: 1;" name="" id="">
                        <option value="">7 Days</option>
                        <option value="">30 Days</option>
                      </select>
                      <span class="absolute top-1/2 right-0 mr-2 transform -translate-y-1/2" style="z-index: 0;">
                        <svg width="10" height="7" viewBox="0 0 10 7" fill="none" xmlns="http://www.w3.org/2000/svg">
                          <path d="M1 1.5L5 5.5L9 1.5" stroke="#3D485B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                        </svg>
                      </span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="chart mt-8 mb-3" data-type="chart-line" style="min-height: 200px;"></div>
          </div>
        </div>
        <div>
          <div class="pt-6 pb-14 px-6 bg-gray-500 rounded-xl">
            <div class="flex flex-wrap -mx-3 mb-6 justify-between items-center">
              <div class="w-auto px-3">
                <h4 class="text-lg text-gray-200 font-bold tracking-wide">Statistics</h4>
              </div>
              <div class="w-auto px-3">
                <a class="inline-flex h-9 px-3 items-center text-xs font-semibold bg-gray-600 hover:bg-gray-700 transition duration-200 rounded-lg" href="#">
                  <span class="mr-2 text-gray-300">View All</span>
                  <svg width="7" height="10" viewBox="0 0 7 10" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M1.5 9L5.5 5L1.5 1" stroke="#3D485B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                  </svg>
                </a>
              </div>
            </div>
            <div class="px-8 md:px-14 py-10 bg-gray-600 rounded-xl">
              <div class="flex flex-wrap items-center justify-between -mx-2">
                <div class="w-full md:w-1/2 px-2 mb-12 md:mb-0">
                  <div class="max-w-xxs pr-12">
                    <div class="flex flex-wrap -mx-2 -mb-3">
                      <div class="w-1/2 px-2 mb-3">
                        <div class="flex items-center">
                          <div class="w-1.5 h-1.5 mr-3 bg-purple-500 rounded-full"></div>
                          <div>
                            <h5 class="text-sm leading-5 text-gray-300 font-semibold">$725.00</h5>
                            <span class="text-xs leading-none font-semibold text-gray-300 opacity-60">Shopping</span>
                          </div>
                        </div>
                      </div>
                      <div class="w-1/2 px-2 mb-3">
                        <div class="flex items-center">
                          <div class="w-1.5 h-1.5 mr-3 bg-green-500 rounded-full"></div>
                          <div>
                            <h5 class="text-sm leading-5 text-gray-300 font-semibold">$725.00</h5>
                            <span class="text-xs leading-none font-semibold text-gray-300 opacity-60">Food</span>
                          </div>
                        </div>
                      </div>
                      <div class="w-1/2 px-2 mb-3">
                        <div class="flex items-center">
                          <div class="w-1.5 h-1.5 mr-3 bg-blue-500 rounded-full"></div>
                          <div>
                            <h5 class="text-sm leading-5 text-gray-300 font-semibold">$2,350.00</h5>
                            <span class="text-xs leading-none font-semibold text-gray-300 opacity-60">Home</span>
                          </div>
                        </div>
                      </div>
                      <div class="w-1/2 px-2 mb-3">
                        <div class="flex items-center">
                          <div class="w-1.5 h-1.5 mr-3 bg-yellow-500 rounded-full"></div>
                          <div>
                            <h5 class="text-sm leading-5 text-gray-300 font-semibold">$710.00</h5>
                            <span class="text-xs leading-none font-semibold text-gray-300 opacity-60">Others</span>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="w-full md:w-1/2 px-2">
                  <div class="chart px-2" data-type="radial-bar-part" data-variant="four" style="min-height: 120px;"></div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="w-full lg:w-2/5 px-3">
        <div class="p-6 bg-gray-500 rounded-xl">
          <div class="flex flex-wrap -mx-3 mb-6 justify-between items-center">
            <div class="w-auto px-3">
              <h4 class="text-lg text-gray-100 font-semibold">Wallet</h4>
            </div>
            <div class="w-auto px-3">
              <a class="inline-block py-1 text-gray-300 hover:text-gray-400" href="#">
                <svg width="18" height="4" viewBox="0 0 18 4" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M8 2C8 2.55228 8.44772 3 9 3C9.55228 3 10 2.55228 10 2C10 1.44772 9.55228 1 9 1C8.44772 1 8 1.44772 8 2Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                  <path d="M1 2C1 2.55228 1.44772 3 2 3C2.55228 3 3 2.55228 3 2C3 1.44772 2.55228 1 2 1C1.44772 1 1 1.44772 1 2Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                  <path d="M15 2C15 2.55228 15.4477 3 16 3C16.5523 3 17 2.55228 17 2C17 1.44772 16.5523 1 16 1C15.4477 1 15 1.44772 15 2Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                </svg>
              </a>
            </div>
          </div>
          <div class="px-3 md:px-14 pb-6 mb-8 border-b border-gray-400">
            <div class="overflow-hidden">
              <div :style="'transform: translateX(-' + (activeSlide - 1) * 100.5 + '%)'" class="mb-8 whitespace-nowrap transition-transform duration-500 ease-in-out">
                <div class="inline-block w-full whitespace-normal">
                  <img class="block mx-auto mb-6" src="trizzle-assets/images/card.png" alt="">
                </div>
                <div class="visibility-item inline-block w-full whitespace-normal">
                  <img class="block mx-auto mb-6" src="trizzle-assets/images/card.png" alt="">
                </div>
                <div class="visibility-item inline-block w-full whitespace-normal">
                  <img class="block mx-auto mb-6" src="trizzle-assets/images/card.png" alt="">
                </div>
              </div>
            </div>
            <div class="mb-6 text-center">
              <button x-on:click="activeSlide = 1" :class="{'bg-blue-500 w-6': activeSlide == 1, 'bg-gray-600 w-2.5': activeSlide !== 1}" class="inline-block w-6 h-1 mr-1 bg-blue-500 rounded-full transition-all duration-500"></button>
              <button x-on:click="activeSlide = 2" :class="{'bg-blue-500 w-6': activeSlide == 2, 'bg-gray-600 w-2.5': activeSlide !== 2}" class="inline-block w-2.5 h-1 mr-1 bg-gray-600 rounded-full transition-all duration-500"></button>
              <button x-on:click="activeSlide = 3" :class="{'bg-blue-500 w-6': activeSlide == 3, 'bg-gray-600 w-2.5': activeSlide !== 3}" class="inline-block w-2.5 h-1 mr-1 bg-gray-600 rounded-full transition-all duration-500"></button>
            </div>
            <a class="flex w-full h-12 py-2 px-3 items-center justify-center text-gray-200 font-semibold bg-gray-600 hover:bg-gray-700 transition duration-200 rounded-lg" href="#">
              <svg width="17" height="14" viewBox="0 0 17 14" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M14.3334 0.75H2.66669C2.00365 0.75 1.36776 1.01339 0.89892 1.48223C0.430079 1.95107 0.166687 2.58696 0.166687 3.25V10.75C0.166687 11.413 0.430079 12.0489 0.89892 12.5178C1.36776 12.9866 2.00365 13.25 2.66669 13.25H14.3334C14.9964 13.25 15.6323 12.9866 16.1011 12.5178C16.57 12.0489 16.8334 11.413 16.8334 10.75V3.25C16.8334 2.58696 16.57 1.95107 16.1011 1.48223C15.6323 1.01339 14.9964 0.75 14.3334 0.75ZM15.1667 10.75C15.1667 10.971 15.0789 11.183 14.9226 11.3393C14.7663 11.4955 14.5544 11.5833 14.3334 11.5833H2.66669C2.44567 11.5833 2.23371 11.4955 2.07743 11.3393C1.92115 11.183 1.83335 10.971 1.83335 10.75V3.25C1.83335 3.02899 1.92115 2.81702 2.07743 2.66074C2.23371 2.50446 2.44567 2.41667 2.66669 2.41667H14.3334C14.5544 2.41667 14.7663 2.50446 14.9226 2.66074C15.0789 2.81702 15.1667 3.02899 15.1667 3.25V10.75ZM11.8334 5.75C11.3903 5.7531 10.956 5.87389 10.575 6.1C10.1954 5.87477 9.763 5.75405 9.32165 5.7501C8.8803 5.74615 8.44577 5.85912 8.06222 6.07752C7.67867 6.29592 7.35978 6.61197 7.13796 6.99355C6.91613 7.37513 6.79928 7.80863 6.79928 8.25C6.79928 8.69137 6.91613 9.12487 7.13796 9.50645C7.35978 9.88803 7.67867 10.2041 8.06222 10.4225C8.44577 10.6409 8.8803 10.7538 9.32165 10.7499C9.763 10.746 10.1954 10.6252 10.575 10.4C10.9065 10.5967 11.279 10.714 11.6634 10.7429C12.0477 10.7718 12.4336 10.7114 12.7908 10.5664C13.1479 10.4215 13.4667 10.1959 13.7223 9.90736C13.9778 9.6188 14.1632 9.27505 14.2639 8.90298C14.3645 8.5309 14.3778 8.14059 14.3027 7.76253C14.2275 7.38448 14.066 7.02892 13.8307 6.72364C13.5953 6.41836 13.2926 6.17163 12.9461 6.00273C12.5996 5.83383 12.2188 5.74733 11.8334 5.75ZM9.47502 9.08333C9.42788 9.08735 9.38049 9.08735 9.33335 9.08333C9.11234 9.08333 8.90038 8.99554 8.7441 8.83926C8.58782 8.68297 8.50002 8.47101 8.50002 8.25C8.50002 8.02899 8.58782 7.81702 8.7441 7.66074C8.90038 7.50446 9.11234 7.41667 9.33335 7.41667C9.38049 7.41265 9.42788 7.41265 9.47502 7.41667C9.28645 7.93333 9.28645 8.5 9.47502 9.01667V9.08333ZM11.8334 9.08333C11.6685 9.08333 11.5074 9.03446 11.3704 8.94289C11.2333 8.85132 11.1265 8.72117 11.0635 8.5689C11.0004 8.41663 10.9839 8.24908 11.016 8.08742C11.0482 7.92577 11.1276 7.77729 11.2441 7.66074C11.3606 7.5442 11.5091 7.46483 11.6708 7.43268C11.8324 7.40052 12 7.41703 12.1523 7.4801C12.3045 7.54317 12.4347 7.64998 12.5262 7.78702C12.6178 7.92407 12.6667 8.08518 12.6667 8.25C12.6667 8.47101 12.5789 8.68297 12.4226 8.83926C12.2663 8.99554 12.0544 9.08333 11.8334 9.08333Z" fill="#3D485B"></path>
              </svg>
              <span class="ml-2">Add new Card</span>
            </a>
          </div>
          <div>
            <div class="flex mb-6 items-center justify-between">
              <h4 class="text-lg text-gray-200 font-semibold">Recent Activity</h4>
              <a class="inline-block text-sm text-gray-200 hover:text-gray-300 font-medium tracking-wide" href="#">View all</a>
            </div>
            <div class="flex mb-6 items-center justify-between">
              <div class="flex items-center">
                <div class="flex w-12 h-12 mr-3 items-center justify-center bg-gray-600 rounded-full">
                  <img src="trizzle-assets/logos/s-stripe.svg" alt="">
                </div>
                <div>
                  <h5 class="text-sm font-semibold text-gray-200">Stripe</h5>
                  <span class="text-xs text-gray-400 font-semibold">Deposit</span>
                </div>
              </div>
              <div class="text-right">
                <h6 class="text-sm text-gray-300 font-semibold">+$523.10</h6>
                <span class="text-xs text-gray-400 font-semibold">Today at 7.18 AM</span>
              </div>
            </div>
            <div class="flex mb-6 items-center justify-between">
              <div class="flex items-center">
                <div class="flex w-12 h-12 mr-3 items-center justify-center bg-gray-600 rounded-full">
                  <img src="trizzle-assets/logos/f-facebook.svg" alt="">
                </div>
                <div>
                  <h5 class="text-sm font-semibold text-gray-200">Facebook</h5>
                  <span class="text-xs text-gray-400 font-semibold">Advertising</span>
                </div>
              </div>
              <div class="text-right">
                <h6 class="text-sm text-gray-300 font-semibold">+$523.10</h6>
                <span class="text-xs text-gray-400 font-semibold">Today at 7.18 AM</span>
              </div>
            </div>
            <div class="flex mb-6 items-center justify-between">
              <div class="flex items-center">
                <div class="flex w-12 h-12 mr-3 items-center justify-center bg-gray-600 rounded-full">
                  <img src="trizzle-assets/logos/twitter-icon.svg" alt="">
                </div>
                <div>
                  <h5 class="text-sm font-semibold text-gray-200">Twitter</h5>
                  <span class="text-xs text-gray-400 font-semibold">Advertising</span>
                </div>
              </div>
              <div class="text-right">
                <h6 class="text-sm text-gray-300 font-semibold">-$1,243.00</h6>
                <span class="text-xs text-gray-400 font-semibold">Yesterday at 10.00 PM</span>
              </div>
            </div>
            <div class="flex mb-6 items-center justify-between">
              <div class="flex items-center">
                <div class="flex w-12 h-12 mr-3 items-center justify-center bg-gray-600 rounded-full">
                  <img src="trizzle-assets/logos/slack-icon.svg" alt="">
                </div>
                <div>
                  <h5 class="text-sm font-semibold text-gray-200">Slack</h5>
                  <span class="text-xs text-gray-400 font-semibold">Payment</span>
                </div>
              </div>
              <div class="text-right">
                <h6 class="text-sm text-gray-300 font-semibold">-$190.00</h6>
                <span class="text-xs text-gray-400 font-semibold">Yesterday at 4.00 PM</span>
              </div>
            </div>
            <div class="flex items-center justify-between">
              <div class="flex items-center">
                <div class="flex w-12 h-12 mr-3 items-center justify-center bg-gray-600 rounded-full">
                  <img src="trizzle-assets/logos/steam-icon.svg" alt="">
                </div>
                <div>
                  <h5 class="text-sm font-semibold text-gray-200">Steam</h5>
                  <span class="text-xs text-gray-400 font-semibold">Payment</span>
                </div>
              </div>
              <div class="text-right">
                <h6 class="text-sm text-gray-300 font-semibold">-$450.00</h6>
                <span class="text-xs text-gray-400 font-semibold">Yesterday at 4.00 PM</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="py-3" x-data="{ showContent: false }">
  <div class="container px-4 mx-auto">
    <div class="p-6 bg-gray-500 rounded-xl">
      <div class="flex flex-wrap mb-4 items-center justify-between -m-2">
        <div class="w-auto p-2">
          <h4 class="text-xl font-semibold text-white">Team members</h4>
          <p class="text-xs font-medium text-gray-300 mb-4">Your subtitle text about team members goes here</p>
        </div>
        <div class="w-auto p-2"><a x-on:click.prevent="showContent = true" x-show="!showContent" class="inline-block py-2 px-4 text-xs leading-5 font-semibold text-blue-500 bg-gray-600 hover:bg-gray-700 rounded-lg" href="#">See All</a></div>
      </div>
      <div class="flex py-3 pl-4 pr-6 items-center justify-between bg-gray-600 rounded-md">
        <div class="flex items-center">
          <img class="h-12 w-12 mr-3 rounded-full" src="trizzle-assets/images/avatar-men-2.png" alt="">
          <div>
            <h5 class="text-sm leading-none font-semibold text-gray-100">John Doe</h5>
            <span class="text-xs font-medium text-gray-300">Frontend Developer</span>
          </div>
        </div>
        <div>
          <a class="text-gray-300 hover:text-gray-200" href="#">
            <svg width="4" height="12" viewBox="0 0 4 12" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M1.99999 2.66667C2.2637 2.66667 2.52148 2.58847 2.74075 2.44196C2.96002 2.29545 3.13091 2.08721 3.23183 1.84358C3.33275 1.59994 3.35915 1.33185 3.3077 1.07321C3.25626 0.814572 3.12927 0.576995 2.9428 0.390525C2.75633 0.204055 2.51875 0.0770672 2.26011 0.0256202C2.00147 -0.0258267 1.73338 0.000577708 1.48975 0.101495C1.24611 0.202411 1.03787 0.373308 0.891364 0.592574C0.744856 0.811839 0.666657 1.06963 0.666657 1.33333C0.666657 1.68696 0.807133 2.02609 1.05718 2.27614C1.30723 2.52619 1.64637 2.66667 1.99999 2.66667ZM1.99999 9.33333C1.73628 9.33333 1.4785 9.41153 1.25923 9.55804C1.03996 9.70455 0.869068 9.91279 0.768151 10.1564C0.667234 10.4001 0.64083 10.6681 0.692277 10.9268C0.743724 11.1854 0.870712 11.423 1.05718 11.6095C1.24365 11.7959 1.48123 11.9229 1.73987 11.9744C1.99851 12.0258 2.2666 11.9994 2.51023 11.8985C2.75387 11.7976 2.96211 11.6267 3.10862 11.4074C3.25512 11.1882 3.33332 10.9304 3.33332 10.6667C3.33332 10.313 3.19285 9.97391 2.9428 9.72386C2.69275 9.47381 2.35361 9.33333 1.99999 9.33333ZM1.99999 4.66667C1.73628 4.66667 1.4785 4.74487 1.25923 4.89137C1.03996 5.03788 0.869068 5.24612 0.768151 5.48976C0.667234 5.73339 0.64083 6.00148 0.692277 6.26012C0.743724 6.51876 0.870712 6.75634 1.05718 6.94281C1.24365 7.12928 1.48123 7.25627 1.73987 7.30771C1.99851 7.35916 2.2666 7.33276 2.51023 7.23184C2.75387 7.13092 2.96211 6.96003 3.10862 6.74076C3.25512 6.5215 3.33332 6.26371 3.33332 6C3.33332 5.64638 3.19285 5.30724 2.9428 5.05719C2.69275 4.80714 2.35361 4.66667 1.99999 4.66667Z" fill="currentColor"></path>
            </svg>
          </a>
        </div>
      </div>
      <div class="flex py-3 pl-4 pr-6 items-center justify-between">
        <div class="flex items-center">
          <img class="h-12 w-12 mr-3 rounded-full" src="trizzle-assets/images/avatar-men-2.png" alt="">
          <div>
            <h5 class="text-sm leading-none font-semibold text-gray-100">John Doe</h5>
            <span class="text-xs font-medium text-gray-300">Frontend Developer</span>
          </div>
        </div>
        <div>
          <a class="text-gray-300 hover:text-gray-200" href="#">
            <svg width="4" height="12" viewBox="0 0 4 12" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M1.99999 2.66667C2.2637 2.66667 2.52148 2.58847 2.74075 2.44196C2.96002 2.29545 3.13091 2.08721 3.23183 1.84358C3.33275 1.59994 3.35915 1.33185 3.3077 1.07321C3.25626 0.814572 3.12927 0.576995 2.9428 0.390525C2.75633 0.204055 2.51875 0.0770672 2.26011 0.0256202C2.00147 -0.0258267 1.73338 0.000577708 1.48975 0.101495C1.24611 0.202411 1.03787 0.373308 0.891364 0.592574C0.744856 0.811839 0.666657 1.06963 0.666657 1.33333C0.666657 1.68696 0.807133 2.02609 1.05718 2.27614C1.30723 2.52619 1.64637 2.66667 1.99999 2.66667ZM1.99999 9.33333C1.73628 9.33333 1.4785 9.41153 1.25923 9.55804C1.03996 9.70455 0.869068 9.91279 0.768151 10.1564C0.667234 10.4001 0.64083 10.6681 0.692277 10.9268C0.743724 11.1854 0.870712 11.423 1.05718 11.6095C1.24365 11.7959 1.48123 11.9229 1.73987 11.9744C1.99851 12.0258 2.2666 11.9994 2.51023 11.8985C2.75387 11.7976 2.96211 11.6267 3.10862 11.4074C3.25512 11.1882 3.33332 10.9304 3.33332 10.6667C3.33332 10.313 3.19285 9.97391 2.9428 9.72386C2.69275 9.47381 2.35361 9.33333 1.99999 9.33333ZM1.99999 4.66667C1.73628 4.66667 1.4785 4.74487 1.25923 4.89137C1.03996 5.03788 0.869068 5.24612 0.768151 5.48976C0.667234 5.73339 0.64083 6.00148 0.692277 6.26012C0.743724 6.51876 0.870712 6.75634 1.05718 6.94281C1.24365 7.12928 1.48123 7.25627 1.73987 7.30771C1.99851 7.35916 2.2666 7.33276 2.51023 7.23184C2.75387 7.13092 2.96211 6.96003 3.10862 6.74076C3.25512 6.5215 3.33332 6.26371 3.33332 6C3.33332 5.64638 3.19285 5.30724 2.9428 5.05719C2.69275 4.80714 2.35361 4.66667 1.99999 4.66667Z" fill="currentColor"></path>
            </svg>
          </a>
        </div>
      </div>
      <div class="flex py-3 pl-4 pr-6 items-center justify-between bg-gray-600 rounded-md">
        <div class="flex items-center">
          <img class="h-12 w-12 mr-3 rounded-full" src="trizzle-assets/images/avatar-men-2.png" alt="">
          <div>
            <h5 class="text-sm leading-none font-semibold text-gray-100">John Doe</h5>
            <span class="text-xs font-medium text-gray-300">Frontend Developer</span>
          </div>
        </div>
        <div>
          <a class="text-gray-300 hover:text-gray-200" href="#">
            <svg width="4" height="12" viewBox="0 0 4 12" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M1.99999 2.66667C2.2637 2.66667 2.52148 2.58847 2.74075 2.44196C2.96002 2.29545 3.13091 2.08721 3.23183 1.84358C3.33275 1.59994 3.35915 1.33185 3.3077 1.07321C3.25626 0.814572 3.12927 0.576995 2.9428 0.390525C2.75633 0.204055 2.51875 0.0770672 2.26011 0.0256202C2.00147 -0.0258267 1.73338 0.000577708 1.48975 0.101495C1.24611 0.202411 1.03787 0.373308 0.891364 0.592574C0.744856 0.811839 0.666657 1.06963 0.666657 1.33333C0.666657 1.68696 0.807133 2.02609 1.05718 2.27614C1.30723 2.52619 1.64637 2.66667 1.99999 2.66667ZM1.99999 9.33333C1.73628 9.33333 1.4785 9.41153 1.25923 9.55804C1.03996 9.70455 0.869068 9.91279 0.768151 10.1564C0.667234 10.4001 0.64083 10.6681 0.692277 10.9268C0.743724 11.1854 0.870712 11.423 1.05718 11.6095C1.24365 11.7959 1.48123 11.9229 1.73987 11.9744C1.99851 12.0258 2.2666 11.9994 2.51023 11.8985C2.75387 11.7976 2.96211 11.6267 3.10862 11.4074C3.25512 11.1882 3.33332 10.9304 3.33332 10.6667C3.33332 10.313 3.19285 9.97391 2.9428 9.72386C2.69275 9.47381 2.35361 9.33333 1.99999 9.33333ZM1.99999 4.66667C1.73628 4.66667 1.4785 4.74487 1.25923 4.89137C1.03996 5.03788 0.869068 5.24612 0.768151 5.48976C0.667234 5.73339 0.64083 6.00148 0.692277 6.26012C0.743724 6.51876 0.870712 6.75634 1.05718 6.94281C1.24365 7.12928 1.48123 7.25627 1.73987 7.30771C1.99851 7.35916 2.2666 7.33276 2.51023 7.23184C2.75387 7.13092 2.96211 6.96003 3.10862 6.74076C3.25512 6.5215 3.33332 6.26371 3.33332 6C3.33332 5.64638 3.19285 5.30724 2.9428 5.05719C2.69275 4.80714 2.35361 4.66667 1.99999 4.66667Z" fill="currentColor"></path>
            </svg>
          </a>
        </div>
      </div>
      <div x-show="showContent" class="visibility-item flex py-3 pl-4 pr-6 items-center justify-between">
        <div class="flex items-center">
          <img class="h-12 w-12 mr-3 rounded-full" src="trizzle-assets/images/avatar-men.png" alt="">
          <div>
            <h5 class="text-sm leading-none font-semibold text-gray-100">James Smith</h5>
            <span class="text-xs font-medium text-gray-300">Designer</span>
          </div>
        </div>
        <div>
          <a class="text-gray-300 hover:text-gray-200" href="#">
            <svg width="4" height="12" viewBox="0 0 4 12" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M1.99999 2.66667C2.2637 2.66667 2.52148 2.58847 2.74075 2.44196C2.96002 2.29545 3.13091 2.08721 3.23183 1.84358C3.33275 1.59994 3.35915 1.33185 3.3077 1.07321C3.25626 0.814572 3.12927 0.576995 2.9428 0.390525C2.75633 0.204055 2.51875 0.0770672 2.26011 0.0256202C2.00147 -0.0258267 1.73338 0.000577708 1.48975 0.101495C1.24611 0.202411 1.03787 0.373308 0.891364 0.592574C0.744856 0.811839 0.666657 1.06963 0.666657 1.33333C0.666657 1.68696 0.807133 2.02609 1.05718 2.27614C1.30723 2.52619 1.64637 2.66667 1.99999 2.66667ZM1.99999 9.33333C1.73628 9.33333 1.4785 9.41153 1.25923 9.55804C1.03996 9.70455 0.869068 9.91279 0.768151 10.1564C0.667234 10.4001 0.64083 10.6681 0.692277 10.9268C0.743724 11.1854 0.870712 11.423 1.05718 11.6095C1.24365 11.7959 1.48123 11.9229 1.73987 11.9744C1.99851 12.0258 2.2666 11.9994 2.51023 11.8985C2.75387 11.7976 2.96211 11.6267 3.10862 11.4074C3.25512 11.1882 3.33332 10.9304 3.33332 10.6667C3.33332 10.313 3.19285 9.97391 2.9428 9.72386C2.69275 9.47381 2.35361 9.33333 1.99999 9.33333ZM1.99999 4.66667C1.73628 4.66667 1.4785 4.74487 1.25923 4.89137C1.03996 5.03788 0.869068 5.24612 0.768151 5.48976C0.667234 5.73339 0.64083 6.00148 0.692277 6.26012C0.743724 6.51876 0.870712 6.75634 1.05718 6.94281C1.24365 7.12928 1.48123 7.25627 1.73987 7.30771C1.99851 7.35916 2.2666 7.33276 2.51023 7.23184C2.75387 7.13092 2.96211 6.96003 3.10862 6.74076C3.25512 6.5215 3.33332 6.26371 3.33332 6C3.33332 5.64638 3.19285 5.30724 2.9428 5.05719C2.69275 4.80714 2.35361 4.66667 1.99999 4.66667Z" fill="currentColor"></path>
            </svg>
          </a>
        </div>
      </div>
      <div x-show="showContent" class="visibility-item flex py-3 pl-4 pr-6 items-center justify-between bg-gray-600 rounded-md">
        <div class="flex items-center">
          <img class="h-12 w-12 mr-3 rounded-full" src="trizzle-assets/images/avatar-men.png" alt="">
          <div>
            <h5 class="text-sm leading-none font-semibold text-gray-100">James Smith</h5>
            <span class="text-xs font-medium text-gray-300">Designer</span>
          </div>
        </div>
        <div>
          <a class="text-gray-300 hover:text-gray-200" href="#">
            <svg width="4" height="12" viewBox="0 0 4 12" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M1.99999 2.66667C2.2637 2.66667 2.52148 2.58847 2.74075 2.44196C2.96002 2.29545 3.13091 2.08721 3.23183 1.84358C3.33275 1.59994 3.35915 1.33185 3.3077 1.07321C3.25626 0.814572 3.12927 0.576995 2.9428 0.390525C2.75633 0.204055 2.51875 0.0770672 2.26011 0.0256202C2.00147 -0.0258267 1.73338 0.000577708 1.48975 0.101495C1.24611 0.202411 1.03787 0.373308 0.891364 0.592574C0.744856 0.811839 0.666657 1.06963 0.666657 1.33333C0.666657 1.68696 0.807133 2.02609 1.05718 2.27614C1.30723 2.52619 1.64637 2.66667 1.99999 2.66667ZM1.99999 9.33333C1.73628 9.33333 1.4785 9.41153 1.25923 9.55804C1.03996 9.70455 0.869068 9.91279 0.768151 10.1564C0.667234 10.4001 0.64083 10.6681 0.692277 10.9268C0.743724 11.1854 0.870712 11.423 1.05718 11.6095C1.24365 11.7959 1.48123 11.9229 1.73987 11.9744C1.99851 12.0258 2.2666 11.9994 2.51023 11.8985C2.75387 11.7976 2.96211 11.6267 3.10862 11.4074C3.25512 11.1882 3.33332 10.9304 3.33332 10.6667C3.33332 10.313 3.19285 9.97391 2.9428 9.72386C2.69275 9.47381 2.35361 9.33333 1.99999 9.33333ZM1.99999 4.66667C1.73628 4.66667 1.4785 4.74487 1.25923 4.89137C1.03996 5.03788 0.869068 5.24612 0.768151 5.48976C0.667234 5.73339 0.64083 6.00148 0.692277 6.26012C0.743724 6.51876 0.870712 6.75634 1.05718 6.94281C1.24365 7.12928 1.48123 7.25627 1.73987 7.30771C1.99851 7.35916 2.2666 7.33276 2.51023 7.23184C2.75387 7.13092 2.96211 6.96003 3.10862 6.74076C3.25512 6.5215 3.33332 6.26371 3.33332 6C3.33332 5.64638 3.19285 5.30724 2.9428 5.05719C2.69275 4.80714 2.35361 4.66667 1.99999 4.66667Z" fill="currentColor"></path>
            </svg>
          </a>
        </div>
      </div>
      <div x-show="showContent" class="visibility-item flex py-3 pl-4 pr-6 items-center justify-between">
        <div class="flex items-center">
          <img class="h-12 w-12 mr-3 rounded-full" src="trizzle-assets/images/avatar-men.png" alt="">
          <div>
            <h5 class="text-sm leading-none font-semibold text-gray-100">James Smith</h5>
            <span class="text-xs font-medium text-gray-300">Designer</span>
          </div>
        </div>
        <div>
          <a class="text-gray-300 hover:text-gray-200" href="#">
            <svg width="4" height="12" viewBox="0 0 4 12" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M1.99999 2.66667C2.2637 2.66667 2.52148 2.58847 2.74075 2.44196C2.96002 2.29545 3.13091 2.08721 3.23183 1.84358C3.33275 1.59994 3.35915 1.33185 3.3077 1.07321C3.25626 0.814572 3.12927 0.576995 2.9428 0.390525C2.75633 0.204055 2.51875 0.0770672 2.26011 0.0256202C2.00147 -0.0258267 1.73338 0.000577708 1.48975 0.101495C1.24611 0.202411 1.03787 0.373308 0.891364 0.592574C0.744856 0.811839 0.666657 1.06963 0.666657 1.33333C0.666657 1.68696 0.807133 2.02609 1.05718 2.27614C1.30723 2.52619 1.64637 2.66667 1.99999 2.66667ZM1.99999 9.33333C1.73628 9.33333 1.4785 9.41153 1.25923 9.55804C1.03996 9.70455 0.869068 9.91279 0.768151 10.1564C0.667234 10.4001 0.64083 10.6681 0.692277 10.9268C0.743724 11.1854 0.870712 11.423 1.05718 11.6095C1.24365 11.7959 1.48123 11.9229 1.73987 11.9744C1.99851 12.0258 2.2666 11.9994 2.51023 11.8985C2.75387 11.7976 2.96211 11.6267 3.10862 11.4074C3.25512 11.1882 3.33332 10.9304 3.33332 10.6667C3.33332 10.313 3.19285 9.97391 2.9428 9.72386C2.69275 9.47381 2.35361 9.33333 1.99999 9.33333ZM1.99999 4.66667C1.73628 4.66667 1.4785 4.74487 1.25923 4.89137C1.03996 5.03788 0.869068 5.24612 0.768151 5.48976C0.667234 5.73339 0.64083 6.00148 0.692277 6.26012C0.743724 6.51876 0.870712 6.75634 1.05718 6.94281C1.24365 7.12928 1.48123 7.25627 1.73987 7.30771C1.99851 7.35916 2.2666 7.33276 2.51023 7.23184C2.75387 7.13092 2.96211 6.96003 3.10862 6.74076C3.25512 6.5215 3.33332 6.26371 3.33332 6C3.33332 5.64638 3.19285 5.30724 2.9428 5.05719C2.69275 4.80714 2.35361 4.66667 1.99999 4.66667Z" fill="currentColor"></path>
            </svg>
          </a>
        </div>
      </div>
    </div>
  </div>
</section>

<div x-show="modal" x-data="{ 
    modal: true,
    search: '',
    filtersMembers(input){ 
      return input.toLowerCase().startsWith(this.search.toLowerCase())
    } 
  }" class="z-50 fixed top-0 left-0 right-0 bottom-0 flex items-center w-full h-full p-4 bg-gray-800 bg-opacity-80 overflow-y-auto">
  <div class="relative max-w-xl w-full mx-auto p-6 bg-gray-500 rounded-xl">
    <button x-on:click="modal = false" class="absolute top-0 right-0 m-8 inline-block text-gray-400 hover:text-gray-300">
      <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M8.41 6.99994L12.71 2.70994C12.8983 2.52164 13.0041 2.26624 13.0041 1.99994C13.0041 1.73364 12.8983 1.47825 12.71 1.28994C12.5217 1.10164 12.2663 0.99585 12 0.99585C11.7337 0.99585 11.4783 1.10164 11.29 1.28994L7 5.58994L2.71 1.28994C2.5217 1.10164 2.2663 0.99585 2 0.99585C1.7337 0.99585 1.4783 1.10164 1.29 1.28994C1.1017 1.47825 0.995908 1.73364 0.995908 1.99994C0.995908 2.26624 1.1017 2.52164 1.29 2.70994L5.59 6.99994L1.29 11.2899C1.19627 11.3829 1.12188 11.4935 1.07111 11.6154C1.02034 11.7372 0.994202 11.8679 0.994202 11.9999C0.994202 12.132 1.02034 12.2627 1.07111 12.3845C1.12188 12.5064 1.19627 12.617 1.29 12.7099C1.38296 12.8037 1.49356 12.8781 1.61542 12.9288C1.73728 12.9796 1.86799 13.0057 2 13.0057C2.13201 13.0057 2.26272 12.9796 2.38458 12.9288C2.50644 12.8781 2.61704 12.8037 2.71 12.7099L7 8.40994L11.29 12.7099C11.383 12.8037 11.4936 12.8781 11.6154 12.9288C11.7373 12.9796 11.868 13.0057 12 13.0057C12.132 13.0057 12.2627 12.9796 12.3846 12.9288C12.5064 12.8781 12.617 12.8037 12.71 12.7099C12.8037 12.617 12.8781 12.5064 12.9289 12.3845C12.9797 12.2627 13.0058 12.132 13.0058 11.9999C13.0058 11.8679 12.9797 11.7372 12.9289 11.6154C12.8781 11.4935 12.8037 11.3829 12.71 11.2899L8.41 6.99994Z" fill="currentColor"></path>
      </svg>
    </button>
    <h4 class="text-xl text-gray-100 font-semibold mb-6">Add members</h4>
    <div class="flex px-4 h-14 mb-6 items-center border border-gray-400 rounded-lg">
      <span class="flex-shrink-0">
        <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M13.4733 12.5267L10.9999 10.0734C11.96 8.87633 12.4249 7.35692 12.2991 5.82759C12.1733 4.29826 11.4664 2.87525 10.3236 1.85115C9.18085 0.827062 7.68914 0.279732 6.15522 0.321705C4.62129 0.363679 3.16175 0.991766 2.0767 2.07682C0.991644 3.16187 0.363557 4.62142 0.321583 6.15534C0.27961 7.68926 0.82694 9.18097 1.85103 10.3237C2.87512 11.4665 4.29814 12.1735 5.82747 12.2993C7.3568 12.4251 8.87621 11.9601 10.0733 11.0001L12.5266 13.4534C12.5886 13.5159 12.6623 13.5655 12.7436 13.5993C12.8248 13.6332 12.9119 13.6506 12.9999 13.6506C13.0879 13.6506 13.1751 13.6332 13.2563 13.5993C13.3376 13.5655 13.4113 13.5159 13.4733 13.4534C13.5934 13.3291 13.6606 13.163 13.6606 12.9901C13.6606 12.8172 13.5934 12.651 13.4733 12.5267ZM6.33327 11.0001C5.41029 11.0001 4.50804 10.7264 3.74061 10.2136C2.97318 9.7008 2.37504 8.97197 2.02183 8.11925C1.66862 7.26653 1.57621 6.32821 1.75627 5.42297C1.93634 4.51773 2.38079 3.6862 3.03344 3.03356C3.68608 2.38091 4.5176 1.93646 5.42285 1.75639C6.32809 1.57633 7.2664 1.66874 8.11913 2.02195C8.97185 2.37516 9.70068 2.9733 10.2135 3.74073C10.7262 4.50816 10.9999 5.41041 10.9999 6.33339C10.9999 7.57107 10.5083 8.75805 9.6331 9.63322C8.75793 10.5084 7.57095 11.0001 6.33327 11.0001Z" fill="#3D485B"></path>
        </svg>
      </span>
      <input x-model="search" class="flex-1 pl-2 py-2 text-sm font-medium text-gray-400 placeholder-gray-400 bg-transparent outline-none" id="modalInput4-1" type="search" placeholder="Search user...">
    </div>
    <div x-show="filtersMembers('John Doe')" class="pb-6 mb-6 border-b border-gray-600">
      <div class="flex flex-wrap -mb-4 items-center justify-between">
        <div class="px-4 mb-4">
          <a class="flex items-center" href="#">
            <img class="w-10 sm:w-14 h-10 sm:h-14 mr-4 rounded-full" src="trizzle-assets/images/avatar-men-2.png" alt="">
            <div>
              <h4 class="font-semibold leading-6 text-gray-100">John Doe</h4>
              <div class="flex items-center">
                <span class="inline-block w-1.5 h-1.5 mr-1 bg-green-500 rounded-full"></span>
                <span class="text-xs font-semibold text-gray-300">Online</span>
              </div>
            </div>
          </a>
        </div>
        <div class="px-4 mb-4"><a class="inline-flex items-center justify-center h-12 py-2 px-4 sm:px-8 text-sm text-white leading-5 font-semibold bg-gray-600 hover:bg-gray-700 rounded-xl transition duration-200" href="#">Follow</a></div>
      </div>
    </div>
    <div x-show="filtersMembers('Mike Lee')" class="pb-6 mb-6 border-b border-gray-600">
      <div class="flex flex-wrap -mb-4 items-center justify-between">
        <div class="px-4 mb-4">
          <a class="flex items-center" href="#">
            <img class="w-10 sm:w-14 h-10 sm:h-14 mr-4 rounded-full" src="trizzle-assets/images/avatar-men-2.png" alt="">
            <div>
              <h4 class="font-semibold leading-6 text-gray-100">Mike Lee</h4>
              <div class="flex items-center">
                <span class="inline-block w-1.5 h-1.5 mr-1 bg-green-500 rounded-full"></span>
                <span class="text-xs font-semibold text-gray-300">Online</span>
              </div>
            </div>
          </a>
        </div>
        <div class="px-4 mb-4"><a class="inline-flex items-center justify-center h-12 py-2 px-4 sm:px-8 text-sm text-white leading-5 font-semibold bg-gray-600 hover:bg-gray-700 rounded-xl transition duration-200" href="#">Follow</a></div>
      </div>
    </div>
    <div x-show="filtersMembers('Kevin Berg')" class="pb-6 mb-6 border-b border-gray-600">
      <div class="flex flex-wrap -mb-4 items-center justify-between">
        <div class="px-4 mb-4">
          <a class="flex items-center" href="#">
            <img class="w-10 sm:w-14 h-10 sm:h-14 mr-4 rounded-full" src="trizzle-assets/images/avatar-men-2.png" alt="">
            <div>
              <h4 class="font-semibold leading-6 text-gray-100">Kevin Berg</h4>
              <div class="flex items-center">
                <span class="inline-block w-1.5 h-1.5 mr-1 bg-green-500 rounded-full"></span>
                <span class="text-xs font-semibold text-gray-300">Online</span>
              </div>
            </div>
          </a>
        </div>
        <div class="px-4 mb-4"><a class="inline-flex items-center justify-center h-12 py-2 px-4 sm:px-8 text-sm text-white leading-5 font-semibold bg-gray-600 hover:bg-gray-700 rounded-xl transition duration-200" href="#">Follow</a></div>
      </div>
    </div>
    <div x-show="filtersMembers('Austin Lawrence')">
      <div class="flex flex-wrap -mb-4 items-center justify-between">
        <div class="px-4 mb-4">
          <a class="flex items-center" href="#">
            <img class="w-10 sm:w-14 h-10 sm:h-14 mr-4 rounded-full" src="trizzle-assets/images/avatar-men-2.png" alt="">
            <div>
              <h4 class="font-semibold leading-6 text-gray-100">Austin Lawrence</h4>
              <div class="flex items-center">
                <span class="inline-block w-1.5 h-1.5 mr-1 bg-green-500 rounded-full"></span>
                <span class="text-xs font-semibold text-gray-300">Online</span>
              </div>
            </div>
          </a>
        </div>
        <div class="px-4 mb-4"><a class="inline-flex items-center justify-center h-12 py-2 px-4 sm:px-8 text-sm text-white leading-5 font-semibold bg-gray-600 hover:bg-gray-700 rounded-xl transition duration-200" href="#">Follow</a></div>
      </div>
    </div>
  </div>
</div>

<section class="py-3">
  <div class="container px-4 mx-auto">
    <div class="relative py-18 px-6 bg-blue-500 rounded-2xl overflow-hidden">
      <img class="absolute top-0 left-0 h-full w-full object-cover" src="trizzle-assets/images/background-banner-squares.png" alt="">
      <div class="relative max-w-sm mx-auto text-center mb-12">
        <h3 class="text-3xl font-bold text-white mb-3">Ideal banner asset for your dashboard project</h3>
        <p class="font-medium text-blue-200 mb-6">Go global with our UI Resources and solutions</p>
        <a class="inline-block w-full sm:w-auto px-16 py-3 leading-6 text-center font-semibold text-blue-50 bg-gray-500 hover:bg-gray-600 transition duration-200 rounded-lg" href="#">Get Started</a>
      </div>
    </div>
  </div>
</section>

<section class="py-3">
  <div class="container px-4 mx-auto">
    <div class="p-6 bg-gray-500 rounded-xl">
      <div class="flex flex-wrap -mx-4 -mb-4 justify-between items-center">
        <div class="w-auto px-4 mb-4">
          <h4 class="text-xs text-gray-300 mb-1">Activity</h4>
          <h3 class="text-lg text-gray-100 font-bold">
            <span>4.535</span>
            <span class="ml-2 text-xs text-red-500 font-medium">-16%</span>
          </h3>
        </div>
        <div class="w-auto px-4 mb-4">
          <div class="relative inline-block bg-gray-600 rounded-xl">
            <select class="relative py-3 pl-2 pr-6 cursor-pointer bg-transparent text-xs text-gray-300 font-semibold appearance-none outline-none" style="z-index: 1;" name="" id="">
              <option class="bg-gray-700" value="1">This Week</option>
              <option class="bg-gray-700" value="2">Last Month</option>
            </select>
            <span class="absolute top-1/2 right-0 mr-2 transform -translate-y-1/2" style="z-index: 0;">
              <svg width="10" height="7" viewBox="0 0 10 7" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M1 1.5L5 5.5L9 1.5" stroke="#3D485B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
              </svg>
            </span>
          </div>
        </div>
      </div>
      <div class="chart p-6" data-type="columns" style="min-height: 215px;"></div>
    </div>
  </div>
</section>

<div x-data="{ snackbar: true }" :class="{ 'hidden': !snackbar }" class="z-50 fixed left-0 bottom-0 p-4">
  <div class="max-w-xs p-4 bg-gray-500 rounded-lg shadow">
    <div class="flex w-full h-full items-center justify-between">
      <div class="flex items-center pr-6">
        <div class="flex-shrink-0 self-start inline-flex items-center justify-center w-10 h-10 mr-3 bg-yellow-500 bg-opacity-20 rounded-xl">
          <svg width="24" height="20" viewBox="0 0 24 21" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M12.0005 15C11.8027 15 11.6093 15.0586 11.4449 15.1685C11.2804 15.2784 11.1523 15.4346 11.0766 15.6173C11.0009 15.8 10.9811 16.0011 11.0197 16.1951C11.0583 16.3891 11.1535 16.5673 11.2933 16.7071C11.4332 16.847 11.6114 16.9422 11.8054 16.9808C11.9993 17.0194 12.2004 16.9996 12.3831 16.9239C12.5659 16.8482 12.722 16.72 12.8319 16.5556C12.9418 16.3911 13.0005 16.1978 13.0005 16C13.0005 15.7348 12.8951 15.4804 12.7076 15.2929C12.52 15.1054 12.2657 15 12.0005 15ZM22.6705 16.47L14.6205 2.47C14.3603 2.00351 13.9802 1.61495 13.5196 1.34447C13.0591 1.07398 12.5346 0.931366 12.0005 0.931366C11.4663 0.931366 10.9419 1.07398 10.4813 1.34447C10.0207 1.61495 9.64065 2.00351 9.38046 2.47L1.38046 16.47C1.11125 16.924 0.966598 17.441 0.9611 17.9688C0.955602 18.4966 1.08945 19.0165 1.34914 19.476C1.60883 19.9356 1.98516 20.3185 2.44014 20.586C2.89512 20.8536 3.41264 20.9964 3.94046 21H20.0605C20.5925 21.0052 21.1164 20.8689 21.5784 20.6049C22.0403 20.3409 22.4238 19.9588 22.6894 19.4978C22.9551 19.0368 23.0933 18.5134 23.09 17.9813C23.0866 17.4493 22.9418 16.9277 22.6705 16.47ZM20.9405 18.47C20.8528 18.6259 20.7249 18.7555 20.5701 18.8452C20.4154 18.9349 20.2393 18.9815 20.0605 18.98H3.94046C3.76157 18.9815 3.58556 18.9349 3.43077 18.8452C3.27599 18.7555 3.14811 18.6259 3.06046 18.47C2.97269 18.318 2.92648 18.1455 2.92648 17.97C2.92648 17.7945 2.97269 17.622 3.06046 17.47L11.0605 3.47C11.1444 3.3062 11.2719 3.16873 11.4289 3.07274C11.5859 2.97675 11.7664 2.92596 11.9505 2.92596C12.1345 2.92596 12.315 2.97675 12.472 3.07274C12.629 3.16873 12.7565 3.3062 12.8405 3.47L20.8905 17.47C20.9897 17.6198 21.0467 17.7936 21.0555 17.9731C21.0643 18.1526 21.0245 18.3312 20.9405 18.49V18.47ZM12.0005 7C11.7352 7 11.4809 7.10535 11.2933 7.29289C11.1058 7.48043 11.0005 7.73478 11.0005 8V12C11.0005 12.2652 11.1058 12.5196 11.2933 12.7071C11.4809 12.8946 11.7352 13 12.0005 13C12.2657 13 12.52 12.8946 12.7076 12.7071C12.8951 12.5196 13.0005 12.2652 13.0005 12V8C13.0005 7.73478 12.8951 7.48043 12.7076 7.29289C12.52 7.10535 12.2657 7 12.0005 7Z" fill="#FFC107"></path>
          </svg>
        </div>
        <span class="text-sm leading-5 text-gray-200 font-semibold">This is a warning message!</span>
      </div>
      <button x-on:click="snackbar = false" class="inline-block text-gray-400 hover:text-gray-300">
        <svg width="10" height="10" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M5.93996 5.00001L8.80663 2.14001C8.93216 2.01448 9.00269 1.84421 9.00269 1.66668C9.00269 1.48914 8.93216 1.31888 8.80663 1.19335C8.68109 1.06781 8.51083 0.997284 8.33329 0.997284C8.15576 0.997284 7.9855 1.06781 7.85996 1.19335L4.99996 4.06001L2.13996 1.19335C2.01442 1.06781 1.84416 0.997284 1.66663 0.997284C1.48909 0.997284 1.31883 1.06781 1.19329 1.19335C1.06776 1.31888 0.997231 1.48914 0.997231 1.66668C0.997231 1.84421 1.06776 2.01448 1.19329 2.14001L4.05996 5.00001L1.19329 7.86001C1.13081 7.92199 1.08121 7.99572 1.04737 8.07696C1.01352 8.1582 0.996094 8.24534 0.996094 8.33334C0.996094 8.42135 1.01352 8.50849 1.04737 8.58973C1.08121 8.67097 1.13081 8.7447 1.19329 8.80668C1.25527 8.86916 1.329 8.91876 1.41024 8.95261C1.49148 8.98645 1.57862 9.00388 1.66663 9.00388C1.75463 9.00388 1.84177 8.98645 1.92301 8.95261C2.00425 8.91876 2.07798 8.86916 2.13996 8.80668L4.99996 5.94001L7.85996 8.80668C7.92194 8.86916 7.99567 8.91876 8.07691 8.95261C8.15815 8.98645 8.24529 9.00388 8.33329 9.00388C8.4213 9.00388 8.50844 8.98645 8.58968 8.95261C8.67092 8.91876 8.74465 8.86916 8.80663 8.80668C8.86911 8.7447 8.91871 8.67097 8.95255 8.58973C8.9864 8.50849 9.00383 8.42135 9.00383 8.33334C9.00383 8.24534 8.9864 8.1582 8.95255 8.07696C8.91871 7.99572 8.86911 7.92199 8.80663 7.86001L5.93996 5.00001Z" fill="currentColor"></path>
        </svg>
      </button>
    </div>
  </div>
</div>

<section x-data="{ inc: 3, show: 3, max: 45, dots: true }" class="py-3">
  <div class="container px-4 mx-auto">
    <div class="p-6">
      <div class="flex flex-wrap items-center justify-between -m-2">
        <div class="order-2 sm:w-auto sm:order-1 p-2">
          <a x-on:click.prevent="inc > show ? inc -= show : inc" class="inline-flex group items-center text-sm font-semibold" href="#">
            <span class="text-gray-400 group-hover:text-gray-300">
              <svg width="8" height="10" viewBox="0 0 8 10" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M7.33294 4.33338H2.27294L4.47294 2.14004C4.59847 2.01451 4.669 1.84424 4.669 1.66671C4.669 1.48917 4.59847 1.31891 4.47294 1.19338C4.3474 1.06784 4.17714 0.997314 3.99961 0.997314C3.82207 0.997314 3.65181 1.06784 3.52627 1.19338L0.192939 4.52671C0.132245 4.59011 0.0846683 4.66487 0.0529387 4.74671C-0.01374 4.90902 -0.01374 5.09107 0.0529387 5.25338C0.0846683 5.33521 0.132245 5.40997 0.192939 5.47338L3.52627 8.80671C3.58825 8.86919 3.66198 8.91879 3.74322 8.95264C3.82446 8.98648 3.9116 9.00391 3.99961 9.00391C4.08761 9.00391 4.17475 8.98648 4.25599 8.95264C4.33723 8.91879 4.41096 8.86919 4.47294 8.80671C4.53542 8.74473 4.58502 8.671 4.61887 8.58976C4.65271 8.50852 4.67014 8.42138 4.67014 8.33337C4.67014 8.24537 4.65271 8.15823 4.61887 8.07699C4.58502 7.99575 4.53542 7.92202 4.47294 7.86004L2.27294 5.66671H7.33294C7.50975 5.66671 7.67932 5.59647 7.80434 5.47145C7.92937 5.34642 7.99961 5.17685 7.99961 5.00004C7.99961 4.82323 7.92937 4.65366 7.80434 4.52864C7.67932 4.40361 7.50975 4.33338 7.33294 4.33338Z" fill="currentColor"></path>
              </svg>
            </span>
            <span class="ml-2 text-gray-100 group-hover:text-gray-200">Previous</span>
          </a>
        </div>
        <div class="order-1 w-full sm:w-auto p-2">
          <div class="flex items-center">
            <a x-text="!dots || inc == max ? max - 4 : inc - 2" class="inline-block px-4 text-sm font-semibold text-gray-100 hover:text-gray-200" href="#">1</a>
            <a x-text="!dots || inc == max ? max - 3 : inc - 1" class="px-4 text-sm font-semibold text-gray-100 hover:text-gray-200" href="#">2</a>
            <a x-text="!dots || inc == max ? max - 2 : inc" class="hidden sm:inline-block px-4 text-sm font-semibold text-gray-100 hover:text-gray-200" href="#">3</a>
            <a x-on:click="dots = false" :class="{'hidden': !dots || inc == max }" class="inline-block px-4 text-sm text-gray-400 hover:text-gray-300" href="#">...</a>
            <a x-text="!dots || inc == max ? max - 1 : max - 1" class="hidden sm:inline-block px-4 text-sm font-semibold text-gray-100 hover:text-gray-200" href="#">44</a>
            <a x-text="!dots || inc == max ? max : max" class="inline-block px-4 text-sm font-semibold text-gray-100 hover:text-gray-200" href="#">45</a>
          </div>
        </div>
        <div class="order-3 sm:w-auto p-2">
          <a x-on:click.prevent="inc < max ? inc += show : max" class="inline-flex group items-center text-sm font-semibold" href="#">
            <span class="mr-2 text-gray-100 group-hover:text-gray-200">Next</span>
            <span class="text-gray-400 group-hover:text-gray-300">
              <svg width="8" height="10" viewBox="0 0 8 10" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M0.667061 5.66663L5.72706 5.66662L3.52706 7.85996C3.40152 7.98549 3.331 8.15576 3.331 8.33329C3.331 8.51083 3.40152 8.68109 3.52706 8.80662C3.6526 8.93216 3.82286 9.00269 4.00039 9.00269C4.17793 9.00269 4.34819 8.93216 4.47373 8.80662L7.80706 5.47329C7.86775 5.40989 7.91533 5.33513 7.94706 5.25329C8.01374 5.09098 8.01374 4.90893 7.94706 4.74662C7.91533 4.66479 7.86775 4.59003 7.80706 4.52662L4.47373 1.19329C4.41175 1.13081 4.33802 1.08121 4.25678 1.04736C4.17554 1.01352 4.0884 0.996093 4.00039 0.996093C3.91239 0.996093 3.82525 1.01352 3.74401 1.04736C3.66277 1.08121 3.58904 1.13081 3.52706 1.19329C3.46457 1.25527 3.41498 1.329 3.38113 1.41024C3.34729 1.49148 3.32986 1.57862 3.32986 1.66663C3.32986 1.75463 3.34729 1.84177 3.38113 1.92301C3.41498 2.00425 3.46457 2.07798 3.52706 2.13996L5.72706 4.33329L0.667061 4.33329C0.49025 4.33329 0.32068 4.40353 0.195656 4.52855C0.0706316 4.65358 0.000394456 4.82315 0.000394471 4.99996C0.000394487 5.17677 0.0706317 5.34634 0.195656 5.47136C0.32068 5.59639 0.49025 5.66663 0.667061 5.66663Z" fill="currentColor"></path>
              </svg>
            </span>
          </a>
        </div>
      </div>
    </div>
  </div>
</section>