Stats Components in Trizzle library

Stats from Trizzle

<section class="py-3">
  <div class="container px-4 mx-auto">
    <div class="flex flex-wrap justify-center -m-4">
      <div class="w-full md:w-1/3 p-4">
        <div class="p-4 bg-gray-500 rounded-xl">
          <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-4 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-4 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-4 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-4 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-4 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 class="w-full md:w-1/3 p-4">
        <div class="p-4 bg-gray-500 rounded-xl">
          <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-4 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-4 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-4 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-4 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-4 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 class="w-full md:w-1/3 p-4">
        <div class="p-4 bg-gray-500 rounded-xl">
          <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-4 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-4 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-4 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-4 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-4 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>
</section>

Stats from Trizzle

<section class="py-8"> <div class="container"> <div class="row mb-n6"> <div class="col-12 col-md-4 mb-6"> <div class="pt-6 pb-4 px-4 bg-secondary rounded-4"> <div class="d-flex align-items-center mb-9"> <div class="d-flex align-items-center justify-content-center bg-dark-light rounded-4" style="width: 32px; height: 32px;"> <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"> <g clip-path="url(#clip0_695_7653)"> <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> </g> </svg> </div> <div class="ms-4"><span class="d-block fs-10 fw-medium text-secondary-light">Main account</span><span class="d-block fw-semibold text-white">$16,045.00</span></div> </div> <div class="d-flex align-items-end gap-2"> <div class="d-inline-block pt-12 w-25 bg-dark-light rounded-top-3"></div> <div class="d-inline-block pt-16 w-25 bg-primary rounded-top-3"></div> <div class="d-inline-block pt-12 w-25 bg-dark-light rounded-top-3"></div> <div class="d-inline-block pt-14 w-25 bg-dark-light rounded-top-3"></div> <div class="d-inline-block pt-16 w-25 bg-dark-light rounded-top-3"></div> </div> </div> </div> <div class="col-12 col-md-4 mb-6"> <div class="pt-6 pb-4 px-4 bg-secondary rounded-4"> <div class="d-flex align-items-center mb-9"> <div class="d-flex align-items-center justify-content-center bg-dark-light rounded-4" style="width: 32px; height: 32px;"> <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M6.33338 7.00001H8.00005C8.17686 7.00001 8.34643 6.92977 8.47145 6.80474C8.59647 6.67972 8.66671 6.51015 8.66671 6.33334C8.66671 6.15653 8.59647 5.98696 8.47145 5.86193C8.34643 5.73691 8.17686 5.66667 8.00005 5.66667H7.33338V5.33334C7.33338 5.15653 7.26314 4.98696 7.13812 4.86193C7.01309 4.73691 6.84352 4.66667 6.66671 4.66667C6.4899 4.66667 6.32033 4.73691 6.19531 4.86193C6.07028 4.98696 6.00005 5.15653 6.00005 5.33334V5.70001C5.595 5.78225 5.23495 6.01207 4.98982 6.34485C4.74468 6.67762 4.63194 7.08961 4.67348 7.50084C4.71501 7.91206 4.90787 8.29318 5.2146 8.57021C5.52133 8.84725 5.92006 9.00042 6.33338 9.00001H7.00005C7.08845 9.00001 7.17324 9.03512 7.23575 9.09764C7.29826 9.16015 7.33338 9.24493 7.33338 9.33334C7.33338 9.42174 7.29826 9.50653 7.23575 9.56904C7.17324 9.63155 7.08845 9.66667 7.00005 9.66667H5.33338C5.15657 9.66667 4.987 9.73691 4.86198 9.86193C4.73695 9.98696 4.66671 10.1565 4.66671 10.3333C4.66671 10.5101 4.73695 10.6797 4.86198 10.8047C4.987 10.9298 5.15657 11 5.33338 11H6.00005V11.3333C6.00005 11.5101 6.07028 11.6797 6.19531 11.8047C6.32033 11.9298 6.4899 12 6.66671 12C6.84352 12 7.01309 11.9298 7.13812 11.8047C7.26314 11.6797 7.33338 11.5101 7.33338 11.3333V10.9667C7.73843 10.8844 8.09847 10.6546 8.34361 10.3218C8.58875 9.98905 8.70149 9.57706 8.65995 9.16584C8.61841 8.75461 8.42556 8.37349 8.11882 8.09646C7.81209 7.81943 7.41336 7.66626 7.00005 7.66667H6.33338C6.24497 7.66667 6.16019 7.63155 6.09768 7.56904C6.03516 7.50653 6.00005 7.42174 6.00005 7.33334C6.00005 7.24493 6.03516 7.16015 6.09768 7.09764C6.16019 7.03512 6.24497 7.00001 6.33338 7.00001ZM14 8.00001H12V2C12.0005 1.88253 11.9699 1.76702 11.9114 1.66517C11.8529 1.56332 11.7684 1.47874 11.6667 1.42C11.5654 1.36149 11.4504 1.33069 11.3334 1.33069C11.2164 1.33069 11.1014 1.36149 11 1.42L9.00005 2.56667L7.00005 1.42C6.8987 1.36149 6.78374 1.33069 6.66671 1.33069C6.54969 1.33069 6.43473 1.36149 6.33338 1.42L4.33338 2.56667L2.33338 1.42C2.23203 1.36149 2.11707 1.33069 2.00005 1.33069C1.88302 1.33069 1.76806 1.36149 1.66671 1.42C1.56498 1.47874 1.48057 1.56332 1.42203 1.66517C1.3635 1.76702 1.33291 1.88253 1.33338 2V12.6667C1.33338 13.1971 1.54409 13.7058 1.91917 14.0809C2.29424 14.456 2.80295 14.6667 3.33338 14.6667H12.6667C13.1971 14.6667 13.7059 14.456 14.0809 14.0809C14.456 13.7058 14.6667 13.1971 14.6667 12.6667V8.66667C14.6667 8.48986 14.5965 8.32029 14.4715 8.19527C14.3464 8.07024 14.1769 8.00001 14 8.00001ZM3.33338 13.3333C3.15657 13.3333 2.987 13.2631 2.86197 13.1381C2.73695 13.0131 2.66671 12.8435 2.66671 12.6667V3.15334L4.00005 3.91334C4.10294 3.96708 4.2173 3.99515 4.33338 3.99515C4.44946 3.99515 4.56382 3.96708 4.66671 3.91334L6.66671 2.76667L8.66671 3.91334C8.7696 3.96708 8.88396 3.99515 9.00005 3.99515C9.11613 3.99515 9.23049 3.96708 9.33338 3.91334L10.6667 3.15334V12.6667C10.6685 12.8941 10.7091 13.1196 10.7867 13.3333H3.33338ZM13.3334 12.6667C13.3334 12.8435 13.2631 13.0131 13.1381 13.1381C13.0131 13.2631 12.8435 13.3333 12.6667 13.3333C12.4899 13.3333 12.3203 13.2631 12.1953 13.1381C12.0703 13.0131 12 12.8435 12 12.6667V9.33334H13.3334V12.6667Z" fill="#194BFB"></path> </svg> </div> <div class="ms-4"><span class="d-block fs-10 fw-medium text-secondary-light">Taxes</span><span class="d-block fw-semibold text-white">$5,025.00</span></div> </div> <div class="d-flex align-items-end gap-2"> <div class="d-inline-block pt-12 w-25 bg-dark-light rounded-top-3"></div> <div class="d-inline-block pt-16 w-25 bg-dark-light rounded-top-3"></div> <div class="d-inline-block pt-14 w-25 bg-dark-light rounded-top-3"></div> <div class="d-inline-block pt-14 w-25 bg-dark-light rounded-top-3"></div> <div class="d-inline-block pt-16 w-25 bg-dark-light rounded-top-3"></div> </div> </div> </div> <div class="col-12 col-md-4 mb-6"> <div class="pt-6 pb-4 px-4 bg-secondary rounded-4"> <div class="d-flex align-items-center mb-9"> <div class="d-flex align-items-center justify-content-center bg-dark-light rounded-4" style="width: 32px; height: 32px;"> <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M14.1467 8C14.4786 7.63491 14.6638 7.16004 14.6667 6.66667C14.6667 6.13623 14.456 5.62753 14.0809 5.25245C13.7058 4.87738 13.1971 4.66667 12.6667 4.66667H9.21337C9.31987 4.36545 9.35266 4.04311 9.30899 3.72662C9.26532 3.41013 9.14646 3.10871 8.96237 2.84759C8.77828 2.58647 8.53432 2.37325 8.2509 2.22579C7.96748 2.07832 7.65286 2.0009 7.33337 2H3.33337C2.80294 2 2.29423 2.21071 1.91916 2.58579C1.54409 2.96086 1.33337 3.46957 1.33337 4C1.33631 4.49337 1.52151 4.96824 1.85337 5.33333C1.5254 5.70002 1.34409 6.17471 1.34409 6.66667C1.34409 7.15862 1.5254 7.63332 1.85337 8C1.5254 8.36668 1.34409 8.84138 1.34409 9.33333C1.34409 9.82529 1.5254 10.3 1.85337 10.6667C1.52151 11.0318 1.33631 11.5066 1.33337 12C1.33337 12.5304 1.54409 13.0391 1.91916 13.4142C2.29423 13.7893 2.80294 14 3.33337 14H12.6667C13.0519 13.9979 13.4283 13.8847 13.7506 13.6739C14.073 13.4631 14.3276 13.1637 14.4839 12.8116C14.6403 12.4596 14.6916 12.0699 14.6318 11.6894C14.5719 11.3089 14.4035 10.9538 14.1467 10.6667C14.4747 10.3 14.656 9.82529 14.656 9.33333C14.656 8.84138 14.4747 8.36668 14.1467 8ZM7.33337 12.6667H3.33337C3.15656 12.6667 2.98699 12.5964 2.86197 12.4714C2.73695 12.3464 2.66671 12.1768 2.66671 12C2.66671 11.8232 2.73695 11.6536 2.86197 11.5286C2.98699 11.4036 3.15656 11.3333 3.33337 11.3333H7.33337C7.51018 11.3333 7.67975 11.4036 7.80478 11.5286C7.9298 11.6536 8.00004 11.8232 8.00004 12C8.00004 12.1768 7.9298 12.3464 7.80478 12.4714C7.67975 12.5964 7.51018 12.6667 7.33337 12.6667ZM7.33337 10H3.33337C3.15656 10 2.98699 9.92976 2.86197 9.80474C2.73695 9.67971 2.66671 9.51014 2.66671 9.33333C2.66671 9.15652 2.73695 8.98695 2.86197 8.86193C2.98699 8.73691 3.15656 8.66667 3.33337 8.66667H7.33337C7.51018 8.66667 7.67975 8.73691 7.80478 8.86193C7.9298 8.98695 8.00004 9.15652 8.00004 9.33333C8.00004 9.51014 7.9298 9.67971 7.80478 9.80474C7.67975 9.92976 7.51018 10 7.33337 10ZM7.33337 7.33333H3.33337C3.15656 7.33333 2.98699 7.2631 2.86197 7.13807C2.73695 7.01305 2.66671 6.84348 2.66671 6.66667C2.66671 6.48986 2.73695 6.32029 2.86197 6.19526C2.98699 6.07024 3.15656 6 3.33337 6H7.33337C7.51018 6 7.67975 6.07024 7.80478 6.19526C7.9298 6.32029 8.00004 6.48986 8.00004 6.66667C8.00004 6.84348 7.9298 7.01305 7.80478 7.13807C7.67975 7.2631 7.51018 7.33333 7.33337 7.33333ZM7.33337 4.66667H3.33337C3.15656 4.66667 2.98699 4.59643 2.86197 4.4714C2.73695 4.34638 2.66671 4.17681 2.66671 4C2.66671 3.82319 2.73695 3.65362 2.86197 3.5286C2.98699 3.40357 3.15656 3.33333 3.33337 3.33333H7.33337C7.51018 3.33333 7.67975 3.40357 7.80478 3.5286C7.9298 3.65362 8.00004 3.82319 8.00004 4C8.00004 4.17681 7.9298 4.34638 7.80478 4.4714C7.67975 4.59643 7.51018 4.66667 7.33337 4.66667ZM13.1267 12.4733C13.0676 12.5357 12.9962 12.585 12.917 12.6183C12.8378 12.6516 12.7526 12.6681 12.6667 12.6667H9.21337C9.37324 12.2366 9.37324 11.7634 9.21337 11.3333H12.6667C12.8435 11.3333 13.0131 11.4036 13.1381 11.5286C13.2631 11.6536 13.3334 11.8232 13.3334 12C13.3321 12.0887 13.3132 12.1762 13.2777 12.2575C13.2423 12.3388 13.1909 12.4121 13.1267 12.4733ZM13.1267 9.80667C13.0676 9.869 12.9962 9.91837 12.917 9.95165C12.8378 9.98493 12.7526 10.0014 12.6667 10H9.21337C9.37324 9.56993 9.37324 9.09674 9.21337 8.66667H12.6667C12.8435 8.66667 13.0131 8.73691 13.1381 8.86193C13.2631 8.98695 13.3334 9.15652 13.3334 9.33333C13.3321 9.42201 13.3132 9.50955 13.2777 9.59083C13.2423 9.6721 13.1909 9.74548 13.1267 9.80667ZM13.1267 7.14C13.0676 7.20233 12.9962 7.2517 12.917 7.28499C12.8378 7.31827 12.7526 7.33473 12.6667 7.33333H9.21337C9.37324 6.90327 9.37324 6.43007 9.21337 6H12.6667C12.8435 6 13.0131 6.07024 13.1381 6.19526C13.2631 6.32029 13.3334 6.48986 13.3334 6.66667C13.3321 6.75534 13.3132 6.84288 13.2777 6.92416C13.2423 7.00544 13.1909 7.07882 13.1267 7.14Z" fill="#194BFB"></path> </svg> </div> <div class="ms-4"><span class="d-block fs-10 fw-medium text-secondary-light">Savings</span><span class="d-block fw-semibold text-white">$2,525.00</span></div> </div> <div class="d-flex align-items-end gap-2"> <div class="d-inline-block pt-12 w-25 bg-dark-light rounded-top-3"></div> <div class="d-inline-block pt-16 w-25 bg-primary rounded-top-3"></div> <div class="d-inline-block pt-12 w-25 bg-dark-light rounded-top-3"></div> <div class="d-inline-block pt-14 w-25 bg-dark-light rounded-top-3"></div> <div class="d-inline-block pt-16 w-25 bg-dark-light rounded-top-3"></div> </div> </div> </div> </div> </div> </section>

Stats Components by Shuffle

Choose from 10 variations of Stats UI components. Presented here are variants available in Trizzle library.

You will also find many other types of components in Shuffle Editor that will be in the same style. Each library has been designed by a professional designer and coded by our team of developers.

Get access to all Stats UI components, code and our visual editor. Try the demo for free!

Redirecting to PayPal

Supporting tools

Plans

Stats UI Components – Trizzle Library

Framework

UI Library

Components

Stats from Trizzle

Dark Account Balance Summary Cards

Stats from Trizzle

Stats Components by Shuffle

The easiest way to create beautiful websites

How many people?

monthly

annual

lifetime

Create an account

From idea to beautiful design in minutes.

Get Shuffle for life at today's price

New in every Lifetime License

A more capable AI Agent

Shopify theme export

Multi-AI Designer

Make it yours with AI

Sign in to create with AI

Add images & videos

How it works

Products

UI Components

Extensions

Support

Company

Redirecting to PayPal

Shuffle's Editors

Supporting tools

Plans

Shuffle’s design systems

Most popular ui libraries

Flex

Zanrly

Saturn

Flaro

Gradia

Basko

Artemis

Vendia

Stats UI Components – Trizzle Library

Framework

UI Library

Components

Stats from Trizzle

Dark Account Balance Summary Cards

Stats from Trizzle

Stats Components by Shuffle

The easiest way to create beautiful websites

How many people?

monthly

annual

lifetime

Create an account

From idea to beautiful design in minutes.

Products

UI Components

Extensions

Support

Company