Stats

Simple Stats with Brands Preview

<!DOCTYPE html>
<html lang="en" dir="" class="relative he5zx u1c85">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Preline UI</title>
    <link rel="shortcut icon" href="../../favicon.ico">
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="../../assets/css/obfuscated.min.css">
  </head>
  <body>
<div class="nosfg qiuty sr0a3 wv4eu zyznp bf1la kd6qs s03sl dark:border-neutral-700">
  
  <div class="flex e3ec5 i2bfa vc8lp dark:bg-neutral-800">
    <svg class="v9ah6 yoe2c ponh4 tl6nm hbd40" width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M16.0355 1.75926C10.6408 1.75926 5.30597 1.49951 0.0111241 1C-0.288584 7.23393 5.50578 13.1282 12.7987 14.5668L13.9975 14.7266C14.3372 12.4289 15.9956 3.7773 16.595 1.73928C16.4152 1.75926 16.2353 1.75926 16.0355 1.75926Z" fill="#A49DFF"/>
      <path d="M16.615 1.75926C16.615 1.75926 25.2266 7.9932 28.5234 16.3451C30.0419 11.3499 31.1608 6.15498 32 1C26.8051 1.49951 21.71 1.75926 16.615 1.75926Z" fill="#28289A"/>
      <path d="M13.9975 14.7466L13.8177 15.9455C13.8177 15.9455 12.2592 28.4133 23.1886 31.9699C25.2266 26.8748 27.0049 21.6599 28.5234 16.3251C21.9698 15.8456 13.9975 14.7466 13.9975 14.7466Z" fill="#5ADCEE"/>
      <path d="M16.6149 1.75927C16.0155 3.79729 14.3571 12.4089 14.0175 14.7466C14.0175 14.7466 21.9897 15.8456 28.5233 16.3251C25.1866 7.9932 16.6149 1.75927 16.6149 1.75927Z" fill="#7878FF"/>
    </svg>
    <div class="t2nxy">
      <h2 class="yxg53 kvww9 ughox z726m gpiyy dark:text-blue-500">
        $990.950
      </h2>
      <div class="mvtyg flex flex-wrap items-center ezamb wd0py">
        <p class="q8ihb p4t2b dark:text-neutral-400">
          Sales last 30 days
        </p>
        <span class="a6tbz ith4g kwxlw items-center qg6dz z4y9c p8xt4 sn8t2 a8onq dark:bg-neutral-500/20 dark:text-neutral-400">
          <svg class="v9ah6 x1d4p k7bsr" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="22 7 13.5 15.5 8.5 10.5 2 17"/><polyline points="16 7 22 7 22 13"/></svg>
          37.3%
        </span>
      </div>
    </div>
  </div>

<div class="flex e3ec5 i2bfa vc8lp hahpm v39tx sty1m qm18m dark:bg-neutral-800 dark:border-neutral-700">
    <svg class="v9ah6 yoe2c ponh4 tl6nm hbd40" width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M16 16C13.8 16 12 14.2 12 12C12 9.8 13.78 8 16 8C18.2 8 20 9.78 20 12C20 14.22 18.22 16 16 16ZM16 0C9.38 0 4 5.38 4 12C4 18.64 9.38 24 16 24C22.62 24 28 18.64 28 12.02C28 12.02 28 12.02 28 12C28 5.38 22.64 0 16 0Z" fill="#5C54FF"/>
      <path fill-rule="evenodd" clip-rule="evenodd" d="M8 24C5.8 24 4 25.78 4 28C4 30.2 5.78 32 8 32C10.2 32 12 30.22 12 28C12 25.78 10.22 24 8 24Z" fill="#5C54FF"/>
    </svg>
    <div class="t2nxy">
      <h2 class="yxg53 kvww9 ughox z726m gpiyy dark:text-blue-500">
        $2,000
      </h2>
      <div class="mvtyg flex flex-wrap items-center ezamb wd0py">
        <p class="q8ihb p4t2b dark:text-neutral-400">
          Sales last 30 days
        </p>
        <span class="a6tbz ith4g kwxlw items-center qg6dz z4y9c p8xt4 sn8t2 a8onq dark:bg-neutral-500/20 dark:text-neutral-400">
          <svg class="v9ah6 x1d4p k7bsr" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="22 7 13.5 15.5 8.5 10.5 2 17"/><polyline points="16 7 22 7 22 13"/></svg>
          12.9%
        </span>
      </div>
    </div>
  </div>

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

<div class="flex e3ec5 i2bfa vc8lp hahpm v39tx gmxsb ncbnf qm18m dark:bg-neutral-800 dark:border-neutral-700">
    <svg class="v9ah6 yoe2c ponh4 tl6nm hbd40" width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M11.3333 32C14.2773 32 16.6667 29.6106 16.6667 26.6666V21.3333H11.3333C8.38933 21.3333 6 23.7226 6 26.6666C6 29.6106 8.38933 32 11.3333 32Z" fill="#0ACF83"/>
      <path d="M6 16C6 13.056 8.38933 10.6667 11.3333 10.6667H16.6667V21.3334H11.3333C8.38933 21.3334 6 18.944 6 16Z" fill="#A259FF"/>
      <path d="M6 5.33333C6 2.38933 8.38933 0 11.3333 0H16.6667V10.6667H11.3333C8.38933 10.6667 6 8.27733 6 5.33333Z" fill="#F24E1E"/>
      <path d="M16.6667 0H22C24.944 0 27.3334 2.38933 27.3334 5.33333C27.3334 8.27733 24.944 10.6667 22 10.6667H16.6667V0Z" fill="#FF7262"/>
      <path d="M27.3334 16C27.3334 18.944 24.944 21.3334 22 21.3334C19.056 21.3334 16.6667 18.944 16.6667 16C16.6667 13.056 19.056 10.6667 22 10.6667C24.944 10.6667 27.3334 13.056 27.3334 16Z" fill="#1ABCFE"/>
    </svg>
    <div class="t2nxy">
      <h2 class="yxg53 kvww9 ughox z726m gpiyy dark:text-blue-500">
        $252,038
      </h2>
      <div class="mvtyg flex flex-wrap items-center ezamb wd0py">
        <p class="q8ihb p4t2b dark:text-neutral-400">
          Sales last 30 days
        </p>
        <span class="a6tbz ith4g kwxlw items-center qg6dz z4y9c p8xt4 sn8t2 a8onq dark:bg-neutral-500/20 dark:text-neutral-400">
          <svg class="v9ah6 x1d4p k7bsr" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="22 17 13.5 8.5 8.5 13.5 2 7"/><polyline points="16 17 22 17 22 11"/></svg>
          0.1%
        </span>
      </div>
    </div>
  </div>
  
</div>

    <script src="../../assets/vendor/preline/dist/index.js?v=1.0.1"></script>
  
                <script>
                    window.defaultVariables = {"baseUrl":"https:\/\/preline.co\/pro"};
                </script> <script src="https://preline.co/pro/primary-assets/js/app.js"></script></body>
</html>

<div class="nosfg qiuty sr0a3 wv4eu zyznp bf1la kd6qs s03sl dark:border-neutral-700">
  
  <div class="flex e3ec5 i2bfa vc8lp dark:bg-neutral-800">
    <svg class="v9ah6 yoe2c ponh4 tl6nm hbd40" width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M16.0355 1.75926C10.6408 1.75926 5.30597 1.49951 0.0111241 1C-0.288584 7.23393 5.50578 13.1282 12.7987 14.5668L13.9975 14.7266C14.3372 12.4289 15.9956 3.7773 16.595 1.73928C16.4152 1.75926 16.2353 1.75926 16.0355 1.75926Z" fill="#A49DFF"/>
      <path d="M16.615 1.75926C16.615 1.75926 25.2266 7.9932 28.5234 16.3451C30.0419 11.3499 31.1608 6.15498 32 1C26.8051 1.49951 21.71 1.75926 16.615 1.75926Z" fill="#28289A"/>
      <path d="M13.9975 14.7466L13.8177 15.9455C13.8177 15.9455 12.2592 28.4133 23.1886 31.9699C25.2266 26.8748 27.0049 21.6599 28.5234 16.3251C21.9698 15.8456 13.9975 14.7466 13.9975 14.7466Z" fill="#5ADCEE"/>
      <path d="M16.6149 1.75927C16.0155 3.79729 14.3571 12.4089 14.0175 14.7466C14.0175 14.7466 21.9897 15.8456 28.5233 16.3251C25.1866 7.9932 16.6149 1.75927 16.6149 1.75927Z" fill="#7878FF"/>
    </svg>
    <div class="t2nxy">
      <h2 class="yxg53 kvww9 ughox z726m gpiyy dark:text-blue-500">
        $990.950
      </h2>
      <div class="mvtyg flex flex-wrap items-center ezamb wd0py">
        <p class="q8ihb p4t2b dark:text-neutral-400">
          Sales last 30 days
        </p>
        <span class="a6tbz ith4g kwxlw items-center qg6dz z4y9c p8xt4 sn8t2 a8onq dark:bg-neutral-500/20 dark:text-neutral-400">
          <svg class="v9ah6 x1d4p k7bsr" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="22 7 13.5 15.5 8.5 10.5 2 17"/><polyline points="16 7 22 7 22 13"/></svg>
          37.3%
        </span>
      </div>
    </div>
  </div>

<div class="flex e3ec5 i2bfa vc8lp hahpm v39tx sty1m qm18m dark:bg-neutral-800 dark:border-neutral-700">
    <svg class="v9ah6 yoe2c ponh4 tl6nm hbd40" width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M16 16C13.8 16 12 14.2 12 12C12 9.8 13.78 8 16 8C18.2 8 20 9.78 20 12C20 14.22 18.22 16 16 16ZM16 0C9.38 0 4 5.38 4 12C4 18.64 9.38 24 16 24C22.62 24 28 18.64 28 12.02C28 12.02 28 12.02 28 12C28 5.38 22.64 0 16 0Z" fill="#5C54FF"/>
      <path fill-rule="evenodd" clip-rule="evenodd" d="M8 24C5.8 24 4 25.78 4 28C4 30.2 5.78 32 8 32C10.2 32 12 30.22 12 28C12 25.78 10.22 24 8 24Z" fill="#5C54FF"/>
    </svg>
    <div class="t2nxy">
      <h2 class="yxg53 kvww9 ughox z726m gpiyy dark:text-blue-500">
        $2,000
      </h2>
      <div class="mvtyg flex flex-wrap items-center ezamb wd0py">
        <p class="q8ihb p4t2b dark:text-neutral-400">
          Sales last 30 days
        </p>
        <span class="a6tbz ith4g kwxlw items-center qg6dz z4y9c p8xt4 sn8t2 a8onq dark:bg-neutral-500/20 dark:text-neutral-400">
          <svg class="v9ah6 x1d4p k7bsr" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="22 7 13.5 15.5 8.5 10.5 2 17"/><polyline points="16 7 22 7 22 13"/></svg>
          12.9%
        </span>
      </div>
    </div>
  </div>

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

<div class="flex e3ec5 i2bfa vc8lp hahpm v39tx gmxsb ncbnf qm18m dark:bg-neutral-800 dark:border-neutral-700">
    <svg class="v9ah6 yoe2c ponh4 tl6nm hbd40" width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M11.3333 32C14.2773 32 16.6667 29.6106 16.6667 26.6666V21.3333H11.3333C8.38933 21.3333 6 23.7226 6 26.6666C6 29.6106 8.38933 32 11.3333 32Z" fill="#0ACF83"/>
      <path d="M6 16C6 13.056 8.38933 10.6667 11.3333 10.6667H16.6667V21.3334H11.3333C8.38933 21.3334 6 18.944 6 16Z" fill="#A259FF"/>
      <path d="M6 5.33333C6 2.38933 8.38933 0 11.3333 0H16.6667V10.6667H11.3333C8.38933 10.6667 6 8.27733 6 5.33333Z" fill="#F24E1E"/>
      <path d="M16.6667 0H22C24.944 0 27.3334 2.38933 27.3334 5.33333C27.3334 8.27733 24.944 10.6667 22 10.6667H16.6667V0Z" fill="#FF7262"/>
      <path d="M27.3334 16C27.3334 18.944 24.944 21.3334 22 21.3334C19.056 21.3334 16.6667 18.944 16.6667 16C16.6667 13.056 19.056 10.6667 22 10.6667C24.944 10.6667 27.3334 13.056 27.3334 16Z" fill="#1ABCFE"/>
    </svg>
    <div class="t2nxy">
      <h2 class="yxg53 kvww9 ughox z726m gpiyy dark:text-blue-500">
        $252,038
      </h2>
      <div class="mvtyg flex flex-wrap items-center ezamb wd0py">
        <p class="q8ihb p4t2b dark:text-neutral-400">
          Sales last 30 days
        </p>
        <span class="a6tbz ith4g kwxlw items-center qg6dz z4y9c p8xt4 sn8t2 a8onq dark:bg-neutral-500/20 dark:text-neutral-400">
          <svg class="v9ah6 x1d4p k7bsr" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="22 17 13.5 8.5 8.5 13.5 2 7"/><polyline points="16 17 22 17 22 11"/></svg>
          0.1%
        </span>
      </div>
    </div>
  </div>
  
</div>

Stats with Line Charts Preview

<!DOCTYPE html>
              <html lang="en" dir="" class="relative he5zx u1c85">
                <head>
                  <meta charset="utf-8">
                  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
                  <title>Preline UI</title>
                  <link rel="shortcut icon" href="../../favicon.ico">
                  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
                  <link rel="stylesheet" href="../../assets/css/obfuscated.min.css">
                  
                  <link rel="stylesheet" href="../../assets/vendor/apexcharts/dist/apexcharts.css">
                  <style type="text/css">
                    .apexcharts-tooltip.apexcharts-theme-light {
                      background-color: transparent !important;
                      border: none !important;
                      box-shadow: none !important;
                    }
                  </style>
                </head>
                <body>
              <div class="soqas nwn0y nosfg m803i bynn4 o1vaz s5a3f">
                
                <div class="flex e3ec5 i2bfa vc8lp wv4eu zyznp shadow-[0_4px_6px_0px_rgba(0,0,0,0.03)] kd6qs dark:bg-neutral-800 dark:border-neutral-700">
                  <div class="ki7g3">
                    <h2 class="z4y9c v1f9w p4t2b dark:text-neutral-400">
                      Users
                    </h2>

<div class="flex e3ec5 i2bfa vc8lp wv4eu zyznp shadow-[0_4px_6px_0px_rgba(0,0,0,0.03)] kd6qs dark:bg-neutral-800 dark:border-neutral-700">
                  <div class="ki7g3">
                    <h2 class="z4y9c v1f9w p4t2b dark:text-neutral-400">
                      Avg. click rate
                    </h2>

<div class="flex e3ec5 i2bfa vc8lp wv4eu zyznp shadow-[0_4px_6px_0px_rgba(0,0,0,0.03)] kd6qs dark:bg-neutral-800 dark:border-neutral-700">
                  <div class="ki7g3">
                    <h2 class="z4y9c v1f9w p4t2b dark:text-neutral-400">
                      Sessions
                    </h2>

<div class="flex e3ec5 i2bfa vc8lp wv4eu zyznp shadow-[0_4px_6px_0px_rgba(0,0,0,0.03)] kd6qs dark:bg-neutral-800 dark:border-neutral-700">
                  <div class="ki7g3">
                    <h2 class="z4y9c v1f9w p4t2b dark:text-neutral-400">
                      Session duration
                    </h2>

<div class="flex items-center wd0py">
                      <span class="a6tbz ith4g kwxlw items-center qg6dz z4y9c p8xt4 sn8t2 a8onq dark:bg-neutral-500/20 dark:text-neutral-400">
                        0.0%
                      </span>
                      <p class="z4y9c p4t2b dark:text-neutral-400">
                        from 5m 10s
                      </p>
                    </div>
                  </div>
                </div>
                
              </div>
              
                  <script src="../../assets/vendor/preline/dist/index.js?v=1.0.1"></script>
                  <script src="../../assets/vendor/lodash/lodash.min.js"></script>
                  <script src="../../assets/vendor/apexcharts/dist/apexcharts.min.js"></script>
                  
                  <script>
                    function buildTooltip(props, options) {
                      const {
                        title,
                        mode,
                        valuePrefix = '$',
                        isValueDivided = true,
                        valuePostfix = '',
                        hasTextLabel = false,
                        invertGroup = false,
                        labelDivider = '',
                        wrapperClasses = 'o57ck soqas vc8lp wv4eu zyznp sn8t2 lfpeb vng4u dark:bg-neutral-800 dark:border-neutral-700',
                        wrapperExtClasses = '',
                        seriesClasses = 'pc2v6',
                        seriesExtClasses = '',
                        titleClasses = 'z726m eq0aa ymdhk uhs3f sn8t2 wthd9 dark:!bg-neutral-800 dark:!border-neutral-700 dark:text-neutral-200',
                        titleExtClasses = '',
                        markerClasses = 'n87u8 xwk6y xu1mu',
                        markerExtClasses = 'j1edr',
                        valueClasses = 'pzui0 p4t2b vqjfe dark:text-neutral-400',
                        valueExtClasses = '',
                        labelClasses = 'p4t2b dark:text-neutral-400',
                        labelExtClasses = ''
                      } = options;
                      const { dataPointIndex } = props;
                      const { colors } = props.ctx.opts;
                      const series = props.ctx.opts.series;
                      let seriesGroups = '';

series.forEach((single, i) => {
                        const val = props.series[i][dataPointIndex] || (typeof series[i].data[dataPointIndex] !== 'object' ? series[i].data[dataPointIndex] : props.series[i][dataPointIndex]);
                        const label = series[i].name;
                        const groupData = invertGroup ? {
                          left: `${hasTextLabel ? label : ''}${labelDivider}`,
                          right: `${valuePrefix}${val >= 1000 && isValueDivided ? `${val / 1000}k` : val}${valuePostfix}`
                        } : {
                          left: `${valuePrefix}${val >= 1000 && isValueDivided ? `${val / 1000}k` : val}${valuePostfix}`,
                          right: `${hasTextLabel ? label : ''}${labelDivider}`
                        }
                        const labelMarkup = `<span class="apexcharts-tooltip-text-y-label ${labelClasses} ${labelExtClasses}">${groupData.left}</span>`;

seriesGroups += `<div class="apexcharts-tooltip-series-group gueap ${hasTextLabel ? 'ngxh3' : ''} order-${i + 1} ${seriesClasses} ${seriesExtClasses}">
                        <span class="flex items-center">
                          <span class="apexcharts-tooltip-marker ${markerClasses} ${markerExtClasses}" style="background: ${colors[i]}"></span>
                          <div class="apexcharts-tooltip-text">
                            <div class="apexcharts-tooltip-y-group fxjb4">
                              <span class="apexcharts-tooltip-text-y-value ${valueClasses} ${valueExtClasses}">${groupData.right}</span>
                            </div>
                          </div>
                        </span>
                        ${labelMarkup}
                      </div>`
                      });

return `<div class="${mode === 'dark' ? 'dark ' : ''}${wrapperClasses} ${wrapperExtClasses}">
                      <div class="apexcharts-tooltip-title ${titleClasses} ${titleExtClasses}">${title}</div>
                      ${seriesGroups}
                    </div>`;
                    }

const {
                        title,
                        mode,
                        valuePrefix = '$',
                        isValueDivided = true,
                        valuePostfix = '',
                        hasCategory = true,
                        hasTextLabel = false,
                        labelDivider = '',
                        wrapperClasses = 'o57ck soqas vc8lp wv4eu zyznp sn8t2 lfpeb vng4u dark:bg-neutral-800 dark:border-neutral-700',
                        wrapperExtClasses = '',
                        seriesClasses = 'ngxh3 ew6ub pc2v6',
                        seriesExtClasses = '',
                        titleClasses = 'flex qqnb6 z726m eq0aa ymdhk uhs3f sn8t2 wthd9 dark:!bg-neutral-800 dark:!border-neutral-700 dark:text-neutral-200',
                        titleExtClasses = '',
                        markerClasses = 'n87u8 xwk6y xu1mu',
                        markerExtClasses = 'j1edr',
                        valueClasses = 'pzui0 p4t2b vqjfe dark:text-neutral-400',
                        valueExtClasses = '',
                        labelClasses = 'p4t2b dark:text-neutral-400 tlj8b',
                        labelExtClasses = ''
                      } = options;

series.forEach((_, i) => {
                        const val = props.series[i][dataPointIndex] || (typeof series[i].data[dataPointIndex] !== 'object' ? series[i].data[dataPointIndex] : props.series[i][dataPointIndex]);
                        const label = series[i].name;
                        const altValue = series[i].altValue || null;
                        const labelMarkup = `<span class="apexcharts-tooltip-text-y-label ${labelClasses} ${labelExtClasses}">${newCategory} ${label || ''}</span>`;
                        const valueMarkup = altValue || `<span class="apexcharts-tooltip-text-y-value ${valueClasses} ${valueExtClasses}">${valuePrefix}${val >= 1000 && isValueDivided ? `${val / 1000}k` : val}${valuePostfix}${labelDivider}</span>`;

seriesGroups += `<div class="apexcharts-tooltip-series-group ${seriesClasses} gueap order-${i + 1} ${seriesExtClasses}">
                        <span class="flex items-center">
                          <span class="apexcharts-tooltip-marker ${markerClasses} ${markerExtClasses}" style="background: ${colors[i]}"></span>
                          <div class="apexcharts-tooltip-text">
                            <div class="apexcharts-tooltip-y-group fxjb4">
                              ${valueMarkup}
                            </div>
                          </div>
                        </span>
                        ${hasTextLabel ? labelMarkup : ''}
                      </div>`
                      });

return `<div class="${mode === 'dark' ? 'dark ' : ''}${wrapperClasses} ${wrapperExtClasses}">
                      <div class="apexcharts-tooltip-title ${titleClasses} ${titleExtClasses}">
                        <span>${title}</span>
                        <span class="flex items-center qg6dz ${!isDifferenceIsNull ? (isGrowing ? 'rtiuk' : 'l9t87') : ''} tlj8b">
                          ${!isDifferenceIsNull ? icon : ''}
                          <span class="y6du5 q8ihb">
                            ${difference.toFixed(1)}%
                          </span>
                        </span>
                      </div>
                      ${seriesGroups}
                    </div>`;
                    }

const {
                        title,
                        mode,
                        valuePrefix = '$',
                        isValueDivided = true,
                        valuePostfix = '',
                        hasCategory = true,
                        hasTextLabel = false,
                        labelDivider = '',
                        wrapperClasses = 'o57ck soqas vc8lp wv4eu zyznp sn8t2 lfpeb vng4u dark:bg-neutral-800 dark:border-neutral-700',
                        wrapperExtClasses = '',
                        seriesClasses = 'ngxh3 ew6ub pc2v6',
                        seriesExtClasses = '',
                        titleClasses = 'flex qqnb6 z726m eq0aa ymdhk uhs3f sn8t2 wthd9 dark:!bg-neutral-800 dark:!border-neutral-700 dark:text-neutral-200',
                        titleExtClasses = '',
                        markerClasses = 'n87u8 xwk6y xu1mu',
                        markerExtClasses = 'j1edr',
                        valueClasses = 'pzui0 p4t2b vqjfe dark:text-neutral-400',
                        valueExtClasses = '',
                        labelClasses = 'p4t2b dark:text-neutral-400 tlj8b',
                        labelExtClasses = ''
                      } = options;

series.forEach((single, i) => {
                        const val = props.series[i][dataPointIndex] || (typeof series[i].data[dataPointIndex] !== 'object' ? series[i].data[dataPointIndex] : props.series[i][dataPointIndex]);
                        const label = series[i].name;
                        const labelMarkup = `<span class="apexcharts-tooltip-text-y-label ${labelClasses} ${labelExtClasses}">${valuePrefix}${val >= 1000 && isValueDivided ? `${val / 1000}k` : val}${valuePostfix}</span>`;

seriesGroups += `<div class="apexcharts-tooltip-series-group gueap ${seriesClasses} order-${i + 1} ${seriesExtClasses}">
                        <span class="flex items-center">
                          <span class="apexcharts-tooltip-marker ${markerClasses} ${markerExtClasses}" style="background: ${colors[i]}"></span>
                          <div class="apexcharts-tooltip-text pc2v6">
                            <div class="apexcharts-tooltip-y-group fxjb4">
                              <span class="apexcharts-tooltip-text-y-value ${valueClasses} ${valueExtClasses}">${newCategory} ${label || ''}${labelDivider}</span>
                            </div>
                          </div>
                        </span>
                        ${hasTextLabel ? labelMarkup : ''}
                      </div>`
                      });

return `<div class="${mode === 'dark' ? 'dark ' : ''}${wrapperClasses} ${wrapperExtClasses}">
                      <div class="apexcharts-tooltip-title ${titleClasses} ${titleExtClasses}">
                        <span>${title}</span>
                        <span class="flex items-center qg6dz ${!isDifferenceIsNull ? (isGrowing ? 'rtiuk' : 'l9t87') : ''} tlj8b">
                          ${!isDifferenceIsNull ? icon : ''}
                          <span class="y6du5 q8ihb">
                            ${difference.toFixed(1)}%
                          </span>
                        </span>
                      </div>
                      ${seriesGroups}
                    </div>`;
                    }

function buildTooltipForDonut({ series, seriesIndex, w }, textColor) {
                      const { globals } = w;
                      const { colors } = globals;

return `<div class="apexcharts-tooltip-series-group" style="background-color: ${colors[seriesIndex]}; display: block;">
                      <div class="apexcharts-tooltip-text" style="font-family: Helvetica, Arial, sans-serif; font-size: 12px;">
                        <div class="apexcharts-tooltip-y-group" style="color: ${textColor[seriesIndex]}">
                          <span class="apexcharts-tooltip-text-y-label">${globals.labels[seriesIndex]}: </span>
                          <span class="apexcharts-tooltip-text-y-value">${series[seriesIndex]}</span>
                        </div>
                      </div>
                    </div>`;
                    }

function buildChart(id, shared, light, dark) {
                      const $chart = document.querySelector(id);
                      let chart = null;

if (!$chart) return false;

const tabpanel = $chart.closest('[role="tabpanel"]');
                      let modeFromBodyClass = null;

Array.from(document.querySelector('html').classList).forEach((cl) => {
                        if (['dark', 'light', 'default'].includes(cl)) modeFromBodyClass = cl;
                      });

const optionsFn = (mode = modeFromBodyClass || localStorage.getItem('hs_theme')) => _.merge(shared(mode), mode === 'dark' ? dark : light);

if ($chart) {
                        chart = new ApexCharts($chart, optionsFn());
                        chart.render();

window.addEventListener('on-hs-appearance-change', (evt) => chart.updateOptions(optionsFn(evt.detail)));

if (tabpanel) tabpanel.addEventListener('on-hs-appearance-change', (evt) => chart.updateOptions(optionsFn(evt.detail)));
                      }

return chart;
                    }
                  </script>
                  <script>
                    window.addEventListener('load', () => {
                      // Apex Line Charts
                      (function () {
                        const lineCharts = [
                          {
                            id: '#hs-users-line-chart',
                            data: [21, 20, 24, 20, 18, 17, 11, 17, 18, 30, 31, 30, 30, 35, 25, 35, 35, 40, 60, 90, 90, 90, 85, 70, 75, 70, 30, 30, 30, 50, 72],
                            name: 'Users',
                            valuePostfix: ''
                          }, {
                            id: '#hs-avg-click-rate-line-chart',
                            data: [21, 20, 24, 20, 18, 27, 25, 27, 30, 30, 35, 25, 18, 30, 31, 35, 35, 90, 90, 90, 85, 100, 120, 120, 120, 100, 90, 75, 75, 75, 90],
                            name: 'Clicks',
                            valuePostfix: ''
                          }, {
                            id: '#hs-sessions-line-chart',
                            data: [25, 48, 10, 11, 11, 15, 60, 60, 60, 75, 21, 20, 24, 20, 38, 37, 35, 37, 30, 120, 120, 120, 100, 90, 75, 90, 90, 90, 75, 70, 60],
                            name: 'Sessions',
                            valuePostfix: ''
                          }, {
                            id: '#hs-session-duration-line-chart',
                            data: [21, 20, 24, 45, 47, 30, 30, 35, 35, 35, 40, 60, 42, 90, 90, 85, 70, 75, 43, 75, 90, 22, 120, 120, 90, 85, 100, 92, 92, 92, 92],
                            name: 'Avg. duration',
                            valuePostfix: 'min'
                          }
                        ];
      
                        lineCharts.forEach(({ id, data, name, valuePostfix }) => {
                          buildChart(id, (mode) => ({
                            series: [{
                              name,
                              data
                            }],
                            chart: {
                              height: 30,
                              type: 'line',
                              sparkline: {
                                enabled: true
                              }
                            },
                            stroke: {
                              curve: 'straight',
                              width: 2
                            },
                            xaxis: {
                              type: 'category',
                              categories: [
                                '25 January 2023',
                                '26 January 2023',
                                '27 January 2023',
                                '28 January 2023',
                                '29 January 2023',
                                '30 January 2023',
                                '31 January 2023',
                                '1 February 2023',
                                '2 February 2023',
                                '3 February 2023',
                                '4 February 2023',
                                '5 February 2023',
                                '6 February 2023',
                                '25 January 2023',
                                '26 January 2023',
                                '27 January 2023',
                                '28 January 2023',
                                '29 January 2023',
                                '30 January 2023',
                                '31 January 2023',
                                '1 February 2023',
                                '2 February 2023',
                                '3 February 2023',
                                '4 February 2023',
                                '5 February 2023',
                                '6 February 2023',
                                '25 January 2023',
                                '26 January 2023',
                                '27 January 2023',
                                '28 January 2023',
                                '29 January 2023'
                              ],
                              crosshairs: {
                                show: false
                              }
                            },
                            markers: {
                              hover: {
                                size: 0
                              }
                            },
                            tooltip: {
                              marker: {
                                show: false
                              },
                              fixed: {
                                enabled: true,
                                position: 'bottomLeft',
                                offsetX: 10,
                                offsetY: -15,
                              },
                              custom: function (props) {
                                const { categories } = props.ctx.opts.xaxis;
                                const { dataPointIndex } = props;
                                const title = categories[dataPointIndex].split(' ');
                                const newTitle = `${title[0]} ${title[1]}`;
              
                                return buildTooltip(props, {
                                  title: newTitle,
                                  mode,
                                  hasTextLabel: true,
                                  wrapperExtClasses: 'ycsy0',
                                  valuePrefix: '',
                                  labelDivider: ':',
                                  labelExtClasses: 'tlj8b',
                                  valuePostfix
                                });
                              }
                            }
                          }), {
                            colors: ['#8b5cf6']
                          }, {
                            colors: ['#8b5cf6']
                          });
                        });
                      })();
                    });
                  </script>
                
                <script>
                    window.defaultVariables = {"baseUrl":"https:\/\/preline.co\/pro"};
                </script> <script src="https://preline.co/pro/primary-assets/js/app.js"></script></body>
              </html>

<div class="soqas nwn0y nosfg m803i bynn4 o1vaz s5a3f">
                
                <div class="flex e3ec5 i2bfa vc8lp wv4eu zyznp shadow-[0_4px_6px_0px_rgba(0,0,0,0.03)] kd6qs dark:bg-neutral-800 dark:border-neutral-700">
                  <div class="ki7g3">
                    <h2 class="z4y9c v1f9w p4t2b dark:text-neutral-400">
                      Users
                    </h2>

<div class="flex e3ec5 i2bfa vc8lp wv4eu zyznp shadow-[0_4px_6px_0px_rgba(0,0,0,0.03)] kd6qs dark:bg-neutral-800 dark:border-neutral-700">
                  <div class="ki7g3">
                    <h2 class="z4y9c v1f9w p4t2b dark:text-neutral-400">
                      Avg. click rate
                    </h2>

<div class="flex e3ec5 i2bfa vc8lp wv4eu zyznp shadow-[0_4px_6px_0px_rgba(0,0,0,0.03)] kd6qs dark:bg-neutral-800 dark:border-neutral-700">
                  <div class="ki7g3">
                    <h2 class="z4y9c v1f9w p4t2b dark:text-neutral-400">
                      Sessions
                    </h2>

<div class="flex e3ec5 i2bfa vc8lp wv4eu zyznp shadow-[0_4px_6px_0px_rgba(0,0,0,0.03)] kd6qs dark:bg-neutral-800 dark:border-neutral-700">
                  <div class="ki7g3">
                    <h2 class="z4y9c v1f9w p4t2b dark:text-neutral-400">
                      Session duration
                    </h2>

series.forEach((single, i) => {
                    const val = props.series[i][dataPointIndex] || (typeof series[i].data[dataPointIndex] !== 'object' ? series[i].data[dataPointIndex] : props.series[i][dataPointIndex]);
                    const label = series[i].name;
                    const groupData = invertGroup ? {
                      left: `${hasTextLabel ? label : ''}${labelDivider}`,
                      right: `${valuePrefix}${val >= 1000 && isValueDivided ? `${val / 1000}k` : val}${valuePostfix}`
                    } : {
                      left: `${valuePrefix}${val >= 1000 && isValueDivided ? `${val / 1000}k` : val}${valuePostfix}`,
                      right: `${hasTextLabel ? label : ''}${labelDivider}`
                    }
                    const labelMarkup = `<span class="apexcharts-tooltip-text-y-label ${labelClasses} ${labelExtClasses}">${groupData.left}</span>`;

seriesGroups += `<div class="apexcharts-tooltip-series-group gueap ${hasTextLabel ? 'ngxh3' : ''} order-${i + 1} ${seriesClasses} ${seriesExtClasses}">
                    <span class="flex items-center">
                      <span class="apexcharts-tooltip-marker ${markerClasses} ${markerExtClasses}" style="background: ${colors[i]}"></span>
                      <div class="apexcharts-tooltip-text">
                        <div class="apexcharts-tooltip-y-group fxjb4">
                          <span class="apexcharts-tooltip-text-y-value ${valueClasses} ${valueExtClasses}">${groupData.right}</span>
                        </div>
                      </div>
                    </span>
                    ${labelMarkup}
                  </div>`
                  });

return `<div class="${mode === 'dark' ? 'dark ' : ''}${wrapperClasses} ${wrapperExtClasses}">
                  <div class="apexcharts-tooltip-title ${titleClasses} ${titleExtClasses}">${title}</div>
                  ${seriesGroups}
                </div>`;
                }

const {
                    title,
                    mode,
                    valuePrefix = '$',
                    isValueDivided = true,
                    valuePostfix = '',
                    hasCategory = true,
                    hasTextLabel = false,
                    labelDivider = '',
                    wrapperClasses = 'o57ck soqas vc8lp wv4eu zyznp sn8t2 lfpeb vng4u dark:bg-neutral-800 dark:border-neutral-700',
                    wrapperExtClasses = '',
                    seriesClasses = 'ngxh3 ew6ub pc2v6',
                    seriesExtClasses = '',
                    titleClasses = 'flex qqnb6 z726m eq0aa ymdhk uhs3f sn8t2 wthd9 dark:!bg-neutral-800 dark:!border-neutral-700 dark:text-neutral-200',
                    titleExtClasses = '',
                    markerClasses = 'n87u8 xwk6y xu1mu',
                    markerExtClasses = 'j1edr',
                    valueClasses = 'pzui0 p4t2b vqjfe dark:text-neutral-400',
                    valueExtClasses = '',
                    labelClasses = 'p4t2b dark:text-neutral-400 tlj8b',
                    labelExtClasses = ''
                  } = options;

series.forEach((_, i) => {
                    const val = props.series[i][dataPointIndex] || (typeof series[i].data[dataPointIndex] !== 'object' ? series[i].data[dataPointIndex] : props.series[i][dataPointIndex]);
                    const label = series[i].name;
                    const altValue = series[i].altValue || null;
                    const labelMarkup = `<span class="apexcharts-tooltip-text-y-label ${labelClasses} ${labelExtClasses}">${newCategory} ${label || ''}</span>`;
                    const valueMarkup = altValue || `<span class="apexcharts-tooltip-text-y-value ${valueClasses} ${valueExtClasses}">${valuePrefix}${val >= 1000 && isValueDivided ? `${val / 1000}k` : val}${valuePostfix}${labelDivider}</span>`;

seriesGroups += `<div class="apexcharts-tooltip-series-group ${seriesClasses} gueap order-${i + 1} ${seriesExtClasses}">
                    <span class="flex items-center">
                      <span class="apexcharts-tooltip-marker ${markerClasses} ${markerExtClasses}" style="background: ${colors[i]}"></span>
                      <div class="apexcharts-tooltip-text">
                        <div class="apexcharts-tooltip-y-group fxjb4">
                          ${valueMarkup}
                        </div>
                      </div>
                    </span>
                    ${hasTextLabel ? labelMarkup : ''}
                  </div>`
                  });

return `<div class="${mode === 'dark' ? 'dark ' : ''}${wrapperClasses} ${wrapperExtClasses}">
                  <div class="apexcharts-tooltip-title ${titleClasses} ${titleExtClasses}">
                    <span>${title}</span>
                    <span class="flex items-center qg6dz ${!isDifferenceIsNull ? (isGrowing ? 'rtiuk' : 'l9t87') : ''} tlj8b">
                      ${!isDifferenceIsNull ? icon : ''}
                      <span class="y6du5 q8ihb">
                        ${difference.toFixed(1)}%
                      </span>
                    </span>
                  </div>
                  ${seriesGroups}
                </div>`;
                }

const {
                    title,
                    mode,
                    valuePrefix = '$',
                    isValueDivided = true,
                    valuePostfix = '',
                    hasCategory = true,
                    hasTextLabel = false,
                    labelDivider = '',
                    wrapperClasses = 'o57ck soqas vc8lp wv4eu zyznp sn8t2 lfpeb vng4u dark:bg-neutral-800 dark:border-neutral-700',
                    wrapperExtClasses = '',
                    seriesClasses = 'ngxh3 ew6ub pc2v6',
                    seriesExtClasses = '',
                    titleClasses = 'flex qqnb6 z726m eq0aa ymdhk uhs3f sn8t2 wthd9 dark:!bg-neutral-800 dark:!border-neutral-700 dark:text-neutral-200',
                    titleExtClasses = '',
                    markerClasses = 'n87u8 xwk6y xu1mu',
                    markerExtClasses = 'j1edr',
                    valueClasses = 'pzui0 p4t2b vqjfe dark:text-neutral-400',
                    valueExtClasses = '',
                    labelClasses = 'p4t2b dark:text-neutral-400 tlj8b',
                    labelExtClasses = ''
                  } = options;

series.forEach((single, i) => {
                    const val = props.series[i][dataPointIndex] || (typeof series[i].data[dataPointIndex] !== 'object' ? series[i].data[dataPointIndex] : props.series[i][dataPointIndex]);
                    const label = series[i].name;
                    const labelMarkup = `<span class="apexcharts-tooltip-text-y-label ${labelClasses} ${labelExtClasses}">${valuePrefix}${val >= 1000 && isValueDivided ? `${val / 1000}k` : val}${valuePostfix}</span>`;

seriesGroups += `<div class="apexcharts-tooltip-series-group gueap ${seriesClasses} order-${i + 1} ${seriesExtClasses}">
                    <span class="flex items-center">
                      <span class="apexcharts-tooltip-marker ${markerClasses} ${markerExtClasses}" style="background: ${colors[i]}"></span>
                      <div class="apexcharts-tooltip-text pc2v6">
                        <div class="apexcharts-tooltip-y-group fxjb4">
                          <span class="apexcharts-tooltip-text-y-value ${valueClasses} ${valueExtClasses}">${newCategory} ${label || ''}${labelDivider}</span>
                        </div>
                      </div>
                    </span>
                    ${hasTextLabel ? labelMarkup : ''}
                  </div>`
                  });

return `<div class="${mode === 'dark' ? 'dark ' : ''}${wrapperClasses} ${wrapperExtClasses}">
                  <div class="apexcharts-tooltip-title ${titleClasses} ${titleExtClasses}">
                    <span>${title}</span>
                    <span class="flex items-center qg6dz ${!isDifferenceIsNull ? (isGrowing ? 'rtiuk' : 'l9t87') : ''} tlj8b">
                      ${!isDifferenceIsNull ? icon : ''}
                      <span class="y6du5 q8ihb">
                        ${difference.toFixed(1)}%
                      </span>
                    </span>
                  </div>
                  ${seriesGroups}
                </div>`;
                }

function buildTooltipForDonut({ series, seriesIndex, w }, textColor) {
                  const { globals } = w;
                  const { colors } = globals;

return `<div class="apexcharts-tooltip-series-group" style="background-color: ${colors[seriesIndex]}; display: block;">
                  <div class="apexcharts-tooltip-text" style="font-family: Helvetica, Arial, sans-serif; font-size: 12px;">
                    <div class="apexcharts-tooltip-y-group" style="color: ${textColor[seriesIndex]}">
                      <span class="apexcharts-tooltip-text-y-label">${globals.labels[seriesIndex]}: </span>
                      <span class="apexcharts-tooltip-text-y-value">${series[seriesIndex]}</span>
                    </div>
                  </div>
                </div>`;
                }

function buildChart(id, shared, light, dark) {
                  const $chart = document.querySelector(id);
                  let chart = null;

if (!$chart) return false;

const tabpanel = $chart.closest('[role="tabpanel"]');
                  let modeFromBodyClass = null;

Array.from(document.querySelector('html').classList).forEach((cl) => {
                    if (['dark', 'light', 'default'].includes(cl)) modeFromBodyClass = cl;
                  });

const optionsFn = (mode = modeFromBodyClass || localStorage.getItem('hs_theme')) => _.merge(shared(mode), mode === 'dark' ? dark : light);

if ($chart) {
                    chart = new ApexCharts($chart, optionsFn());
                    chart.render();

window.addEventListener('on-hs-appearance-change', (evt) => chart.updateOptions(optionsFn(evt.detail)));

if (tabpanel) tabpanel.addEventListener('on-hs-appearance-change', (evt) => chart.updateOptions(optionsFn(evt.detail)));
                  }

return chart;
                }
              </script>
              <script>
                window.addEventListener('load', () => {
                  // Apex Line Charts
                  (function () {
                    const lineCharts = [
                      {
                        id: '#hs-users-line-chart',
                        data: [21, 20, 24, 20, 18, 17, 11, 17, 18, 30, 31, 30, 30, 35, 25, 35, 35, 40, 60, 90, 90, 90, 85, 70, 75, 70, 30, 30, 30, 50, 72],
                        name: 'Users',
                        valuePostfix: ''
                      }, {
                        id: '#hs-avg-click-rate-line-chart',
                        data: [21, 20, 24, 20, 18, 27, 25, 27, 30, 30, 35, 25, 18, 30, 31, 35, 35, 90, 90, 90, 85, 100, 120, 120, 120, 100, 90, 75, 75, 75, 90],
                        name: 'Clicks',
                        valuePostfix: ''
                      }, {
                        id: '#hs-sessions-line-chart',
                        data: [25, 48, 10, 11, 11, 15, 60, 60, 60, 75, 21, 20, 24, 20, 38, 37, 35, 37, 30, 120, 120, 120, 100, 90, 75, 90, 90, 90, 75, 70, 60],
                        name: 'Sessions',
                        valuePostfix: ''
                      }, {
                        id: '#hs-session-duration-line-chart',
                        data: [21, 20, 24, 45, 47, 30, 30, 35, 35, 35, 40, 60, 42, 90, 90, 85, 70, 75, 43, 75, 90, 22, 120, 120, 90, 85, 100, 92, 92, 92, 92],
                        name: 'Avg. duration',
                        valuePostfix: 'min'
                      }
                    ];
      
                    lineCharts.forEach(({ id, data, name, valuePostfix }) => {
                      buildChart(id, (mode) => ({
                        series: [{
                          name,
                          data
                        }],
                        chart: {
                          height: 30,
                          type: 'line',
                          sparkline: {
                            enabled: true
                          }
                        },
                        stroke: {
                          curve: 'straight',
                          width: 2
                        },
                        xaxis: {
                          type: 'category',
                          categories: [
                            '25 January 2023',
                            '26 January 2023',
                            '27 January 2023',
                            '28 January 2023',
                            '29 January 2023',
                            '30 January 2023',
                            '31 January 2023',
                            '1 February 2023',
                            '2 February 2023',
                            '3 February 2023',
                            '4 February 2023',
                            '5 February 2023',
                            '6 February 2023',
                            '25 January 2023',
                            '26 January 2023',
                            '27 January 2023',
                            '28 January 2023',
                            '29 January 2023',
                            '30 January 2023',
                            '31 January 2023',
                            '1 February 2023',
                            '2 February 2023',
                            '3 February 2023',
                            '4 February 2023',
                            '5 February 2023',
                            '6 February 2023',
                            '25 January 2023',
                            '26 January 2023',
                            '27 January 2023',
                            '28 January 2023',
                            '29 January 2023'
                          ],
                          crosshairs: {
                            show: false
                          }
                        },
                        markers: {
                          hover: {
                            size: 0
                          }
                        },
                        tooltip: {
                          marker: {
                            show: false
                          },
                          fixed: {
                            enabled: true,
                            position: 'bottomLeft',
                            offsetX: 10,
                            offsetY: -15,
                          },
                          custom: function (props) {
                            const { categories } = props.ctx.opts.xaxis;
                            const { dataPointIndex } = props;
                            const title = categories[dataPointIndex].split(' ');
                            const newTitle = `${title[0]} ${title[1]}`;
              
                            return buildTooltip(props, {
                              title: newTitle,
                              mode,
                              hasTextLabel: true,
                              wrapperExtClasses: 'ycsy0',
                              valuePrefix: '',
                              labelDivider: ':',
                              labelExtClasses: 'tlj8b',
                              valuePostfix
                            });
                          }
                        }
                      }), {
                        colors: ['#8b5cf6']
                      }, {
                        colors: ['#8b5cf6']
                      });
                    });
                  })();
                });
              </script>

Gradient Overlay Background Preview

<!DOCTYPE html>
<html lang="en" dir="" class="relative he5zx u1c85">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Preline UI</title>
    <link rel="shortcut icon" href="../../favicon.ico">
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="../../assets/css/obfuscated.min.css">
  </head>
  <body>
<div class="nosfg qiuty bynn4 o1vaz n14o3 s5a3f">
  
  <div class="relative s03sl y5th3 d8zjh vc8lp wv4eu zyznp kd6qs bf1la redtw sky6s ts8vw ifmfc y39mc lkeia oobyk th20q dark:bg-neutral-800 dark:border-neutral-700 dark:before:from-purple-800/30 dark:before:via-transparent">
    <div class="relative flp1r">
      
      <div class="flex qqnb6 zdaax">
        
        <span class="fyghu kwxlw lo3gb items-center l3emm u3jhk lfpeb vc8lp m2mxu giuvo dark:bg-neutral-800 dark:border-neutral-700 dark:text-neutral-400">
          <svg class="v9ah6 xwung gn2dn b2kia" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M22 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>
        </span>

<div class="hs-dropdown-menu hs-dropdown-open:opacity-100 s13r0 transition-[opacity,margin] duration opacity-0 hidden flp1r vc8lp kd6qs shadow-[0_10px_40px_10px_rgba(0,0,0,0.08)] dark:shadow-[0_10px_40px_10px_rgba(0,0,0,0.2)] dark:bg-neutral-900" aria-labelledby="hs-pro-dusd1">
              <div class="yid4e">
                <button type="button" class="ew6ub flex items-center zdaax bph5h m69ja lfpeb l33hs sn8t2 buwct deld9 dq004 egdee l3uow dark:text-neutral-300 dark:hover:bg-neutral-800 dark:focus:bg-neutral-700">
                  <svg class="v9ah6 adwu1 f5pfs" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="18" cy="5" r="3"/><circle cx="6" cy="12" r="3"/><circle cx="18" cy="19" r="3"/><line x1="8.59" x2="15.42" y1="13.51" y2="17.49"/><line x1="15.41" x2="8.59" y1="6.51" y2="10.49"/></svg>
                  Share stats
                </button>
                <button type="button" class="ew6ub flex items-center zdaax bph5h m69ja lfpeb l33hs sn8t2 buwct deld9 dq004 egdee l3uow dark:text-neutral-300 dark:hover:bg-neutral-800 dark:focus:bg-neutral-700">
                  <svg class="v9ah6 adwu1 f5pfs" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9.88 9.88a3 3 0 1 0 4.24 4.24"/><path d="M10.73 5.08A10.43 10.43 0 0 1 12 5c7 0 10 7 10 7a13.16 13.16 0 0 1-1.67 2.68"/><path d="M6.61 6.61A13.526 13.526 0 0 0 2 12s3 7 10 7a9.74 9.74 0 0 0 5.39-1.61"/><line x1="2" x2="22" y1="2" y2="22"/></svg>
                  Hide stats
                </button>
              </div>
            </div>
            
          </div>
            
        </div>
      </div>

<h2 class="q8ihb dtodr sn8t2 dark:text-neutral-200">
        Total Users
      </h2>

<div class="relative s03sl y5th3 d8zjh vc8lp wv4eu zyznp kd6qs bf1la redtw sky6s ts8vw ifmfc y39mc kxqp9 oobyk th20q dark:bg-neutral-800 dark:border-neutral-700 dark:before:from-teal-800/30 dark:before:via-transparent">
    <div class="relative flp1r">
      
      <div class="flex qqnb6 zdaax">
        
        <span class="fyghu kwxlw lo3gb items-center l3emm u3jhk lfpeb vc8lp m2mxu giuvo dark:bg-neutral-800 dark:border-neutral-700 dark:text-neutral-400">
          <svg class="v9ah6 xwung gn2dn py5jl" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><polyline points="16 11 18 13 22 9"/></svg>
        </span>

<div class="hs-dropdown-menu hs-dropdown-open:opacity-100 s13r0 transition-[opacity,margin] duration opacity-0 hidden flp1r vc8lp kd6qs shadow-[0_10px_40px_10px_rgba(0,0,0,0.08)] dark:shadow-[0_10px_40px_10px_rgba(0,0,0,0.2)] dark:bg-neutral-900" aria-labelledby="hs-pro-dusd2">
              <div class="yid4e">
                <button type="button" class="ew6ub flex items-center zdaax bph5h m69ja lfpeb l33hs sn8t2 buwct deld9 dq004 egdee l3uow dark:text-neutral-300 dark:hover:bg-neutral-800 dark:focus:bg-neutral-700">
                  <svg class="v9ah6 adwu1 f5pfs" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="18" cy="5" r="3"/><circle cx="6" cy="12" r="3"/><circle cx="18" cy="19" r="3"/><line x1="8.59" x2="15.42" y1="13.51" y2="17.49"/><line x1="15.41" x2="8.59" y1="6.51" y2="10.49"/></svg>
                  Share stats
                </button>
                <button type="button" class="ew6ub flex items-center zdaax bph5h m69ja lfpeb l33hs sn8t2 buwct deld9 dq004 egdee l3uow dark:text-neutral-300 dark:hover:bg-neutral-800 dark:focus:bg-neutral-700">
                  <svg class="v9ah6 adwu1 f5pfs" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9.88 9.88a3 3 0 1 0 4.24 4.24"/><path d="M10.73 5.08A10.43 10.43 0 0 1 12 5c7 0 10 7 10 7a13.16 13.16 0 0 1-1.67 2.68"/><path d="M6.61 6.61A13.526 13.526 0 0 0 2 12s3 7 10 7a9.74 9.74 0 0 0 5.39-1.61"/><line x1="2" x2="22" y1="2" y2="22"/></svg>
                  Hide stats
                </button>
              </div>
            </div>
            
          </div>
            
        </div>
      </div>

<h2 class="q8ihb dtodr sn8t2 dark:text-neutral-200">
        Active users
      </h2>

<div class="relative s03sl y5th3 d8zjh vc8lp wv4eu zyznp kd6qs bf1la redtw sky6s ts8vw ifmfc y39mc citlf oobyk th20q dark:bg-neutral-800 dark:border-neutral-700 dark:before:from-blue-800/30 dark:before:via-transparent">
    <div class="relative flp1r">
      
      <div class="flex qqnb6 zdaax">
        
        <span class="fyghu kwxlw lo3gb items-center l3emm u3jhk lfpeb vc8lp m2mxu giuvo dark:bg-neutral-800 dark:border-neutral-700 dark:text-neutral-400">
          <svg class="v9ah6 xwung gn2dn xuxp7" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 14 4 9l5-5"/><path d="M4 9h10.5a5.5 5.5 0 0 1 5.5 5.5v0a5.5 5.5 0 0 1-5.5 5.5H11"/></svg>
        </span>

<div class="hs-dropdown-menu hs-dropdown-open:opacity-100 s13r0 transition-[opacity,margin] duration opacity-0 hidden flp1r vc8lp kd6qs shadow-[0_10px_40px_10px_rgba(0,0,0,0.08)] dark:shadow-[0_10px_40px_10px_rgba(0,0,0,0.2)] dark:bg-neutral-900" aria-labelledby="hs-pro-dusd3">
              <div class="yid4e">
                <button type="button" class="ew6ub flex items-center zdaax bph5h m69ja lfpeb l33hs sn8t2 buwct deld9 dq004 egdee l3uow dark:text-neutral-300 dark:hover:bg-neutral-800 dark:focus:bg-neutral-700">
                  <svg class="v9ah6 adwu1 f5pfs" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="18" cy="5" r="3"/><circle cx="6" cy="12" r="3"/><circle cx="18" cy="19" r="3"/><line x1="8.59" x2="15.42" y1="13.51" y2="17.49"/><line x1="15.41" x2="8.59" y1="6.51" y2="10.49"/></svg>
                  Share stats
                </button>
                <button type="button" class="ew6ub flex items-center zdaax bph5h m69ja lfpeb l33hs sn8t2 buwct deld9 dq004 egdee l3uow dark:text-neutral-300 dark:hover:bg-neutral-800 dark:focus:bg-neutral-700">
                  <svg class="v9ah6 adwu1 f5pfs" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9.88 9.88a3 3 0 1 0 4.24 4.24"/><path d="M10.73 5.08A10.43 10.43 0 0 1 12 5c7 0 10 7 10 7a13.16 13.16 0 0 1-1.67 2.68"/><path d="M6.61 6.61A13.526 13.526 0 0 0 2 12s3 7 10 7a9.74 9.74 0 0 0 5.39-1.61"/><line x1="2" x2="22" y1="2" y2="22"/></svg>
                  Hide stats
                </button>
              </div>
            </div>
            
          </div>
            
        </div>
      </div>

<h2 class="q8ihb dtodr sn8t2 dark:text-neutral-200">
        Return user rate
      </h2>

<div class="relative s03sl y5th3 d8zjh vc8lp wv4eu zyznp kd6qs bf1la redtw sky6s ts8vw ifmfc y39mc szg4t oobyk th20q dark:bg-neutral-800 dark:border-neutral-700 dark:before:from-red-800/30 dark:before:via-transparent">
    <div class="relative flp1r">
      
      <div class="flex qqnb6 zdaax">
        
        <span class="fyghu kwxlw lo3gb items-center l3emm u3jhk lfpeb vc8lp m2mxu giuvo dark:bg-neutral-800 dark:border-neutral-700 dark:text-neutral-400">
          <svg class="v9ah6 xwung gn2dn y884v" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z"/><path d="M12 9v4"/><path d="M12 17h.01"/></svg>
        </span>

<div class="hs-dropdown-menu hs-dropdown-open:opacity-100 s13r0 transition-[opacity,margin] duration opacity-0 hidden flp1r vc8lp kd6qs shadow-[0_10px_40px_10px_rgba(0,0,0,0.08)] dark:shadow-[0_10px_40px_10px_rgba(0,0,0,0.2)] dark:bg-neutral-900" aria-labelledby="hs-pro-dusd4">
              <div class="yid4e">
                <button type="button" class="ew6ub flex items-center zdaax bph5h m69ja lfpeb l33hs sn8t2 buwct deld9 dq004 egdee l3uow dark:text-neutral-300 dark:hover:bg-neutral-800 dark:focus:bg-neutral-700">
                  <svg class="v9ah6 adwu1 f5pfs" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="18" cy="5" r="3"/><circle cx="6" cy="12" r="3"/><circle cx="18" cy="19" r="3"/><line x1="8.59" x2="15.42" y1="13.51" y2="17.49"/><line x1="15.41" x2="8.59" y1="6.51" y2="10.49"/></svg>
                  Share stats
                </button>
                <button type="button" class="ew6ub flex items-center zdaax bph5h m69ja lfpeb l33hs sn8t2 buwct deld9 dq004 egdee l3uow dark:text-neutral-300 dark:hover:bg-neutral-800 dark:focus:bg-neutral-700">
                  <svg class="v9ah6 adwu1 f5pfs" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9.88 9.88a3 3 0 1 0 4.24 4.24"/><path d="M10.73 5.08A10.43 10.43 0 0 1 12 5c7 0 10 7 10 7a13.16 13.16 0 0 1-1.67 2.68"/><path d="M6.61 6.61A13.526 13.526 0 0 0 2 12s3 7 10 7a9.74 9.74 0 0 0 5.39-1.61"/><line x1="2" x2="22" y1="2" y2="22"/></svg>
                  Hide stats
                </button>
              </div>
            </div>
            
          </div>
            
        </div>
      </div>

<h2 class="q8ihb dtodr sn8t2 dark:text-neutral-200">
        Fake accounts
      </h2>

<div class="flex items-center -space-x-2">
          <span class="flex v9ah6 lo3gb items-center lt5jc tain2 la9vc fvsom m2mxu z4y9c pou4u v1f9w uyk1r dark:bg-neutral-700 dark:border-neutral-800 dark:text-neutral-300">
            U
          </span>
          <span class="flex v9ah6 lo3gb items-center lt5jc tain2 la9vc fvsom m2mxu z4y9c pou4u v1f9w uyk1r dark:bg-neutral-700 dark:border-neutral-800 dark:text-neutral-300">
            L
          </span>
          <span class="flex v9ah6 lo3gb items-center lt5jc tain2 la9vc fvsom m2mxu z4y9c pou4u v1f9w uyk1r dark:bg-neutral-700 dark:border-neutral-800 dark:text-neutral-300">
            G
          </span>
        </div>
      </div>
    </div>
    
  </div>
  
</div>

    <script src="../../assets/vendor/preline/dist/index.js?v=1.0.1"></script>
  
                <script>
                    window.defaultVariables = {"baseUrl":"https:\/\/preline.co\/pro"};
                </script> <script src="https://preline.co/pro/primary-assets/js/app.js"></script></body>
</html>

<div class="nosfg qiuty bynn4 o1vaz n14o3 s5a3f">
  
  <div class="relative s03sl y5th3 d8zjh vc8lp wv4eu zyznp kd6qs bf1la redtw sky6s ts8vw ifmfc y39mc lkeia oobyk th20q dark:bg-neutral-800 dark:border-neutral-700 dark:before:from-purple-800/30 dark:before:via-transparent">
    <div class="relative flp1r">
      
      <div class="flex qqnb6 zdaax">
        
        <span class="fyghu kwxlw lo3gb items-center l3emm u3jhk lfpeb vc8lp m2mxu giuvo dark:bg-neutral-800 dark:border-neutral-700 dark:text-neutral-400">
          <svg class="v9ah6 xwung gn2dn b2kia" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M22 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>
        </span>