Open Source
Preline Pro
Sign in
Get all access
Home
Examples
Templates
Pricing
Docs
Preline UI (Open Source)
Back to Examples
All examples
Empty States
Fill blank xtdau with empty states.
Pie Chart Placeholder
Preview
Get the code
Existing accounts: Sign in to your account to access the source code.
<!DOCTYPE html> <html lang="en" dir="" class="relative qm7fm mamhr"> <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="w-full llkn4 ha88l"><!-- Browsers Card --> <div class="mamhr flex dr3q9 v869m dpq4d a11ya k8i8d it6u8 dark:bg-neutral-800 dark:border-neutral-700"> <!-- Header --> <div class="dx5bd b4788 flex encm3 items-center"> <h2 class="whagm dxkem u2ysm b7vor dark:text-neutral-200"> Browsers </h2> </div> <!-- End Header --> <!-- Body --> <div class="flex dr3q9 encm3 mamhr banyj f5qiq"> <div> <h4 class="b8sub ndtx3 ivg4u we6nf dark:text-blue-500"> <span class="y6h2h l92fy zj5v5 akrrw vm1ok"> 0 </span> </h4> <p class="fbpzv oxyct dark:text-neutral-500"> Visitors are viewing website from the desktop device. </p> </div> <!-- Stats --> <div class="fbpzv"> <!-- Grid --> <div class="cwrq4 fnrdz yru4d"> <!-- Card --> <div class="bjlw2 dpq4d xaqn2 a11ya dark:border-neutral-700 xroga"> <img class="vpbnr n1je8 owr0a" src="../../assets/svg/brands/chrome.svg" alt="Chrome Logo"> <p class="hac7f b7vor dark:text-neutral-200"> Chrome </p> <p class="u2ysm p8ikb b7vor dark:text-neutral-200"> 0 </p> </div> <!-- End Card --> <!-- Card --> <div class="bjlw2 dpq4d xaqn2 a11ya dark:border-neutral-700 xroga"> <img class="vpbnr n1je8 owr0a" src="../../assets/svg/brands/firefox.svg" alt="Firefox Logo"> <p class="hac7f b7vor dark:text-neutral-200"> Firefox </p> <p class="u2ysm p8ikb b7vor dark:text-neutral-200"> 0 </p> </div> <!-- End Card --> <!-- Card --> <div class="bjlw2 dpq4d xaqn2 a11ya dark:border-neutral-700 xroga"> <img class="vpbnr n1je8 owr0a" src="../../assets/svg/brands/safari.svg" alt="Safari Logo"> <p class="hac7f b7vor dark:text-neutral-200"> Safari </p> <p class="u2ysm p8ikb b7vor dark:text-neutral-200"> 0 </p> </div> <!-- End Card --> </div> <!-- End Grid --> </div> <!-- End Stats --> <div class="fbpzv"> <!-- Alert --> <div class="v869m dpq4d a11ya it6u8 k8i8d fuiju tm5do dark:bg-neutral-800 dark:border-neutral-700" role="alert" tabindex="-1" aria-labelledby="hs-pro-dpna-label"> <div class="flex clmee"> <svg class="l4ccc vpbnr ee5m9 b7vor dark:text-neutral-200" 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="M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9"/><path d="M10.3 21a1.94 1.94 0 0 0 3.4 0"/></svg> <div class="btpiv"> <h3 id="hs-pro-dpna-label" class="hac7f b7vor u2ysm dark:text-white"> Push notifications </h3> <p class="hac7f fyx69 dark:text-neutral-400"> Automatically send me notifications </p> </div> <!-- Switch/Toggle --> <div class="flex encm3 items-center"> <label for="hs-pro-dbcpns" class="yps74">On</label> <div class="relative dxkem"> <input type="checkbox" id="hs-pro-dbcpns" class="relative r8g9r jk70d dvbo2 qqcm6 rg6vy vm1ok a3ufl cursor-pointer r2uh1 cfk4u gxslw hhgax oekgx z50zr checked:bg-none checked:text-blue-600 checked:border-blue-600 focus:checked:border-blue-600 dark:bg-neutral-800 dark:border-neutral-700 dark:checked:bg-blue-500 dark:checked:border-blue-500 dark:focus:ring-offset-neutral-900 c5flu bmels n7mnu ep1fp ibw6n u0orr wqdxa uphjs ai84n gzju2 wu2ov z3hip rhctc dark:before:bg-neutral-400 dark:checked:before:bg-white" > </div> </div> <!-- End Switch/Toggle --> </div> </div> <!-- End Alert --> </div> </div> <!-- End Body --> </div> <!-- End Browsers Card --></div> <script src="../../assets/vendor/preline/dist/index.js?v=1.0.0"></script> </body> </html>
<!-- Browsers Card --> <div class="mamhr flex dr3q9 v869m dpq4d a11ya k8i8d it6u8 dark:bg-neutral-800 dark:border-neutral-700"> <!-- Header --> <div class="dx5bd b4788 flex encm3 items-center"> <h2 class="whagm dxkem u2ysm b7vor dark:text-neutral-200"> Browsers </h2> </div> <!-- End Header --> <!-- Body --> <div class="flex dr3q9 encm3 mamhr banyj f5qiq"> <div> <h4 class="b8sub ndtx3 ivg4u we6nf dark:text-blue-500"> <span class="y6h2h l92fy zj5v5 akrrw vm1ok"> 0 </span> </h4> <p class="fbpzv oxyct dark:text-neutral-500"> Visitors are viewing website from the desktop device. </p> </div> <!-- Stats --> <div class="fbpzv"> <!-- Grid --> <div class="cwrq4 fnrdz yru4d"> <!-- Card --> <div class="bjlw2 dpq4d xaqn2 a11ya dark:border-neutral-700 xroga"> <img class="vpbnr n1je8 owr0a" src="../../assets/svg/brands/chrome.svg" alt="Chrome Logo"> <p class="hac7f b7vor dark:text-neutral-200"> Chrome </p> <p class="u2ysm p8ikb b7vor dark:text-neutral-200"> 0 </p> </div> <!-- End Card --> <!-- Card --> <div class="bjlw2 dpq4d xaqn2 a11ya dark:border-neutral-700 xroga"> <img class="vpbnr n1je8 owr0a" src="../../assets/svg/brands/firefox.svg" alt="Firefox Logo"> <p class="hac7f b7vor dark:text-neutral-200"> Firefox </p> <p class="u2ysm p8ikb b7vor dark:text-neutral-200"> 0 </p> </div> <!-- End Card --> <!-- Card --> <div class="bjlw2 dpq4d xaqn2 a11ya dark:border-neutral-700 xroga"> <img class="vpbnr n1je8 owr0a" src="../../assets/svg/brands/safari.svg" alt="Safari Logo"> <p class="hac7f b7vor dark:text-neutral-200"> Safari </p> <p class="u2ysm p8ikb b7vor dark:text-neutral-200"> 0 </p> </div> <!-- End Card --> </div> <!-- End Grid --> </div> <!-- End Stats --> <div class="fbpzv"> <!-- Alert --> <div class="v869m dpq4d a11ya it6u8 k8i8d fuiju tm5do dark:bg-neutral-800 dark:border-neutral-700" role="alert" tabindex="-1" aria-labelledby="hs-pro-dpna-label"> <div class="flex clmee"> <svg class="l4ccc vpbnr ee5m9 b7vor dark:text-neutral-200" 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="M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9"/><path d="M10.3 21a1.94 1.94 0 0 0 3.4 0"/></svg> <div class="btpiv"> <h3 id="hs-pro-dpna-label" class="hac7f b7vor u2ysm dark:text-white"> Push notifications </h3> <p class="hac7f fyx69 dark:text-neutral-400"> Automatically send me notifications </p> </div> <!-- Switch/Toggle --> <div class="flex encm3 items-center"> <label for="hs-pro-dbcpns" class="yps74">On</label> <div class="relative dxkem"> <input type="checkbox" id="hs-pro-dbcpns" class="relative r8g9r jk70d dvbo2 qqcm6 rg6vy vm1ok a3ufl cursor-pointer r2uh1 cfk4u gxslw hhgax oekgx z50zr checked:bg-none checked:text-blue-600 checked:border-blue-600 focus:checked:border-blue-600 dark:bg-neutral-800 dark:border-neutral-700 dark:checked:bg-blue-500 dark:checked:border-blue-500 dark:focus:ring-offset-neutral-900 c5flu bmels n7mnu ep1fp ibw6n u0orr wqdxa uphjs ai84n gzju2 wu2ov z3hip rhctc dark:before:bg-neutral-400 dark:checked:before:bg-white" > </div> </div> <!-- End Switch/Toggle --> </div> </div> <!-- End Alert --> </div> </div> <!-- End Body --> </div> <!-- End Browsers Card -->
Title Bar and Button Group
Preview
Get the code
Existing accounts: Sign in to your account to access the source code.
<!DOCTYPE html> <html lang="en" dir="" class="relative qm7fm mamhr"> <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"> <!-- Apexcharts --> <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><!-- Card --> <div class="flex dr3q9 v869m dpq4d a11ya shadow-[0_4px_6px_0px_rgba(0,0,0,0.03)] it6u8 dark:bg-neutral-800 dark:border-neutral-700"><!-- Header --> <div class="x815m a11ya dark:border-neutral-700"> <!-- Page Header --> <div class="yxmdd f5qiq flex encm3 items-center qy7wn"> <h2 class="dxkem u2ysm b7vor dark:text-neutral-200"> Preline </h2> <div class="flex qsj3b items-center wwu1y"> <!-- Calendar Dropdown --> <div class="hs-dropdown [--auto-close:inside] [--placement:top-right] xgqt9"> <button id="hs-pro-dnic" type="button" class="z1r3e xgqt9 items-center ps4xk ivg4u xroga dpq4d a11ya v869m b7vor k8i8d e1tdc oekgx z50zr sbnko roxnn dark:bg-neutral-800 dark:border-neutral-700 dark:text-neutral-300 dark:hover:bg-neutral-800 dark:focus:bg-neutral-800" aria-haspopup="menu" aria-expanded="false" aria-label="Dropdown"> <svg class="vpbnr rznfr fwnpl" 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"><rect width="18" height="18" x="3" y="4" rx="2" ry="2"/><line x1="16" x2="16" y1="2" y2="6"/><line x1="8" x2="8" y1="2" y2="6"/><line x1="3" x2="21" y1="10" y2="10"/><path d="M8 14h.01"/><path d="M12 14h.01"/><path d="M16 14h.01"/><path d="M8 18h.01"/><path d="M12 18h.01"/><path d="M16 18h.01"/></svg> Today <svg class="vpbnr dy8w2 fwnpl" 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="m6 9 6 6 6-6"/></svg> </button> <div class="hs-dropdown-menu hs-dropdown-open:opacity-100 h9d1v transition-[opacity,margin] duration opacity-0 hidden rxg3f v869m it6u8 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" role="menu" aria-orientation="vertical" aria-labelledby="hs-pro-dnic"> <!-- Calendar --> <div class="bjlw2 z9rsz"> <!-- Months --> <div class="cwrq4 c6gnq items-center clmee pqxmy b4788"> <!-- Prev Button --> <div class="dzjy8"> <button type="button" class="rj4tp flex q6rsd items-center b7vor ql6ky a3ufl oekgx z50zr sbnko tc0ip dark:text-neutral-400 dark:hover:bg-neutral-800 dark:focus:bg-neutral-800"> <svg class="vpbnr m5z5i" 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="m15 18-6-6 6-6"/></svg> </button> </div> <!-- End Prev Button --> <!-- Month / Year --> <div class="pgvne flex q6rsd items-center c0yql"> <div class="relative"> <select data-hs-select='{ "placeholder": "Select month", "toggleTag": "<button type=\"button\" aria-expanded=\"false\"></button>", "toggleClasses": "hs-select-disabled:pointer-events-none hs-select-disabled:opacity-50 relative flex i419g w-full cursor-pointer u4pm7 ivg4u b7vor jq7pu sbnko rpdye pn7qd bhpwi u6glr dark:text-neutral-200 dark:hover:text-neutral-300 dark:focus:text-neutral-300", "dropdownClasses": "yvhh6 rxg3f ob8c3 lt268 mu3xt z9rsz v869m dpq4d a11ya xroga dqyik vlqzh w56at ixhii el1lk my2de peqgl dark:[&::-webkit-scrollbar-track]:bg-neutral-700 dark:[&::-webkit-scrollbar-thumb]:bg-neutral-500 dark:bg-neutral-900 dark:border-neutral-700", "optionClasses": "z1r3e w-full hac7f b7vor cursor-pointer ql6ky xroga sbnko tc0ip dark:bg-neutral-900 dark:hover:bg-neutral-800 dark:text-neutral-200 dark:focus:bg-neutral-800", "optionTemplate": "<div class=\"flex encm3 items-center w-full \"><span data-title></span><span class=\"hidden hs-selected:block \"><svg class=\"vpbnr fwnpl b7vor dark:text-neutral-200 \" xmlns=\"http:.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=\"20 6 9 17 4 12\"/></svg></span></div>" }' class="hidden"> <option value="0">January</option> <option value="1">February</option> <option value="2">March</option> <option value="3">April</option> <option value="4">May</option> <option value="5">June</option> <option value="6" selected>July</option> <option value="7">August</option> <option value="8">September</option> <option value="9">October</option> <option value="10">November</option> <option value="11">December</option> </select> </div> <span class="b7vor dark:text-neutral-200">/</span> <div class="relative"> <select data-hs-select='{ "placeholder": "Select year", "toggleTag": "<button type=\"button\" aria-expanded=\"false\"></button>", "toggleClasses": "hs-select-disabled:pointer-events-none hs-select-disabled:opacity-50 relative flex i419g w-full cursor-pointer u4pm7 ivg4u b7vor jq7pu sbnko rpdye pn7qd bhpwi u6glr dark:text-neutral-200 dark:hover:text-neutral-300 dark:focus:text-neutral-300", "dropdownClasses": "yvhh6 rxg3f lxpms lt268 mu3xt z9rsz v869m dpq4d a11ya xroga dqyik vlqzh w56at ixhii el1lk my2de peqgl dark:[&::-webkit-scrollbar-track]:bg-neutral-700 dark:[&::-webkit-scrollbar-thumb]:bg-neutral-500 dark:bg-neutral-900 dark:border-neutral-700", "optionClasses": "z1r3e w-full hac7f b7vor cursor-pointer ql6ky xroga sbnko tc0ip dark:bg-neutral-900 dark:hover:bg-neutral-800 dark:text-neutral-200 dark:focus:bg-neutral-800", "optionTemplate": "<div class=\"flex encm3 items-center w-full \"><span data-title></span><span class=\"hidden hs-selected:block \"><svg class=\"vpbnr fwnpl b7vor dark:text-neutral-200 \" xmlns=\"http:.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=\"20 6 9 17 4 12\"/></svg></span></div>" }' class="hidden"> <option selected>2023</option> <option>2024</option> <option>2025</option> <option>2026</option> <option>2027</option> </select> </div> </div> <!-- End Month / Year --> <!-- Next Button --> <div class="dzjy8 flex qsj3b"> <button type="button" class=" rj4tp flex q6rsd items-center b7vor ql6ky a3ufl oekgx z50zr sbnko tc0ip dark:text-neutral-400 dark:hover:bg-neutral-800 dark:focus:bg-neutral-800"> <svg class="vpbnr m5z5i" 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 18 6-6-6-6"/></svg> </button> </div> <!-- End Next Button --> </div> <!-- Months --> <!-- Weeks --> <div class="flex vskbb"> <span class="ms6qs ftepz block bx4k9 hac7f oxyct dark:text-neutral-500"> Mo </span> <span class="ms6qs ftepz block bx4k9 hac7f oxyct dark:text-neutral-500"> Tu </span> <span class="ms6qs ftepz block bx4k9 hac7f oxyct dark:text-neutral-500"> We </span> <span class="ms6qs ftepz block bx4k9 hac7f oxyct dark:text-neutral-500"> Th </span> <span class="ms6qs ftepz block bx4k9 hac7f oxyct dark:text-neutral-500"> Fr </span> <span class="ms6qs ftepz block bx4k9 hac7f oxyct dark:text-neutral-500"> Sa </span> <span class="ms6qs ftepz block bx4k9 hac7f oxyct dark:text-neutral-500"> Su </span> </div> <!-- Weeks --> <!-- Days --> <div class="flex"> <div> <button type="button" class="ms6qs itj8b flex q6rsd items-center dpq4d rg6vy hac7f b7vor a3ufl xnw8v a0zw8 oekgx z50zr sbnko h1rf5 jmcr4 dark:text-neutral-200" disabled> 26 </button> </div> <div> <button type="button" class="ms6qs itj8b flex q6rsd items-center dpq4d rg6vy hac7f b7vor a3ufl xnw8v a0zw8 oekgx z50zr sbnko h1rf5 jmcr4 dark:text-neutral-200" disabled> 27 </button> </div> <div> <button type="button" class="ms6qs itj8b flex q6rsd items-center dpq4d rg6vy hac7f b7vor a3ufl xnw8v a0zw8 oekgx z50zr sbnko h1rf5 jmcr4 dark:text-neutral-200" disabled> 28 </button> </div> <div> <button type="button" class="ms6qs itj8b flex q6rsd items-center dpq4d rg6vy hac7f b7vor a3ufl xnw8v a0zw8 oekgx z50zr sbnko h1rf5 jmcr4 dark:text-neutral-200" disabled> 29 </button> </div> <div> <button type="button" class="ms6qs itj8b flex q6rsd items-center dpq4d rg6vy hac7f b7vor a3ufl xnw8v a0zw8 oekgx z50zr sbnko h1rf5 jmcr4 dark:text-neutral-200" disabled> 30 </button> </div> <div> <button type="button" class="ms6qs itj8b flex q6rsd items-center dpq4d rg6vy hac7f b7vor a3ufl xnw8v a0zw8 oekgx z50zr sbnko h1rf5 jmcr4 dark:text-neutral-200"> 1 </button> </div> <div> <button type="button" class="ms6qs itj8b flex q6rsd items-center dpq4d rg6vy hac7f b7vor a3ufl xnw8v a0zw8 oekgx z50zr sbnko h1rf5 jmcr4 dark:text-neutral-200"> 2 </button> </div> </div> <!-- Days --> <!-- Days --> <div class="flex"> <div> <button type="button" class="ms6qs itj8b flex q6rsd items-center dpq4d rg6vy hac7f b7vor a3ufl xnw8v a0zw8 oekgx z50zr sbnko h1rf5 jmcr4 dark:text-neutral-200"> 3 </button> </div> <div> <button type="button" class="ms6qs itj8b flex q6rsd items-center dpq4d rg6vy hac7f b7vor a3ufl xnw8v a0zw8 oekgx z50zr sbnko h1rf5 jmcr4 dark:text-neutral-200"> 4 </button> </div> <div > <button type="button" class="ms6qs itj8b flex q6rsd items-center dpq4d rg6vy hac7f b7vor a3ufl xnw8v a0zw8 oekgx z50zr sbnko h1rf5 jmcr4 dark:text-neutral-200"> 5 </button> </div> <div > <button type="button" class="ms6qs itj8b flex q6rsd items-center dpq4d rg6vy hac7f b7vor a3ufl xnw8v a0zw8 oekgx z50zr sbnko h1rf5 jmcr4 dark:text-neutral-200"> 6 </button> </div> <div > <button type="button" class="ms6qs itj8b flex q6rsd items-center dpq4d rg6vy hac7f b7vor a3ufl xnw8v a0zw8 oekgx z50zr sbnko h1rf5 jmcr4 dark:text-neutral-200"> 7 </button> </div> <div > <button type="button" class="ms6qs itj8b flex q6rsd items-center dpq4d rg6vy hac7f b7vor a3ufl xnw8v a0zw8 oekgx z50zr sbnko h1rf5 jmcr4 dark:text-neutral-200"> 8 </button> </div> <div > <button type="button" class="ms6qs itj8b flex q6rsd items-center dpq4d rg6vy hac7f b7vor a3ufl xnw8v a0zw8 oekgx z50zr sbnko h1rf5 jmcr4 dark:text-neutral-200"> 9 </button> </div> </div> <!-- Days --> <!-- Days --> <div class="flex"> <div > <button type="button" class="ms6qs itj8b flex q6rsd items-center dpq4d rg6vy hac7f b7vor a3ufl xnw8v a0zw8 oekgx z50zr sbnko h1rf5 jmcr4 dark:text-neutral-200"> 10 </button> </div> <div > <button type="button" class="ms6qs itj8b flex q6rsd items-center dpq4d rg6vy hac7f b7vor a3ufl xnw8v a0zw8 oekgx z50zr sbnko h1rf5 jmcr4 dark:text-neutral-200"> 11 </button> </div> <div > <button type="button" class="ms6qs itj8b flex q6rsd items-center dpq4d rg6vy hac7f b7vor a3ufl xnw8v a0zw8 oekgx z50zr sbnko h1rf5 jmcr4 dark:text-neutral-200"> 12 </button> </div> <div> <button type="button" class="ms6qs itj8b flex q6rsd items-center dpq4d rg6vy hac7f b7vor a3ufl xnw8v a0zw8 oekgx z50zr sbnko h1rf5 jmcr4 dark:text-neutral-200"> 13 </button> </div> <div> <button type="button" class="ms6qs itj8b flex q6rsd items-center dpq4d rg6vy hac7f b7vor a3ufl xnw8v a0zw8 oekgx z50zr sbnko h1rf5 jmcr4 dark:text-neutral-200"> 14 </button> </div> <div> <button type="button" class="ms6qs itj8b flex q6rsd items-center dpq4d rg6vy hac7f b7vor a3ufl xnw8v a0zw8 oekgx z50zr sbnko h1rf5 jmcr4 dark:text-neutral-200"> 15 </button> </div> <div> <button type="button" class="ms6qs itj8b flex q6rsd items-center dpq4d rg6vy hac7f b7vor a3ufl xnw8v a0zw8 oekgx z50zr sbnko h1rf5 jmcr4 dark:text-neutral-200"> 16 </button> </div> </div> <!-- Days --> <!-- Days --> <div class="flex"> <div> <button type="button" class="ms6qs itj8b flex q6rsd items-center dpq4d rg6vy hac7f b7vor a3ufl xnw8v a0zw8 oekgx z50zr sbnko h1rf5 jmcr4 dark:text-neutral-200"> 17 </button> </div> <div> <button type="button" class="ms6qs itj8b flex q6rsd items-center dpq4d rg6vy hac7f b7vor a3ufl xnw8v a0zw8 oekgx z50zr sbnko h1rf5 jmcr4 dark:text-neutral-200"> 18 </button> </div> <div> <button type="button" class="ms6qs itj8b flex q6rsd items-center dpq4d rg6vy hac7f b7vor a3ufl xnw8v a0zw8 oekgx z50zr sbnko h1rf5 jmcr4 dark:text-neutral-200"> 19 </button> </div> <div> <button type="button" class="ms6qs itj8b flex q6rsd items-center c3mn6 dpq4d rg6vy hac7f ivg4u l6gz8 xnw8v a3ufl dark:bg-indigo-500 oekgx z50zr sbnko tc0ip dark:hover:border-neutral-700"> 20 </button> </div> <div> <button type="button" class="ms6qs itj8b flex q6rsd items-center dpq4d rg6vy hac7f b7vor a3ufl xnw8v a0zw8 oekgx z50zr sbnko h1rf5 jmcr4 dark:text-neutral-200"> 21 </button> </div> <div> <button type="button" class="ms6qs itj8b flex q6rsd items-center dpq4d rg6vy hac7f b7vor a3ufl xnw8v a0zw8 oekgx z50zr sbnko h1rf5 jmcr4 dark:text-neutral-200"> 22 </button> </div> <div> <button type="button" class="ms6qs itj8b flex q6rsd items-center dpq4d rg6vy hac7f b7vor a3ufl xnw8v a0zw8 oekgx z50zr sbnko h1rf5 jmcr4 dark:text-neutral-200"> 23 </button> </div> </div> <!-- Days --> <!-- Days --> <div class="flex"> <div> <button type="button" class="ms6qs itj8b flex q6rsd items-center dpq4d rg6vy hac7f b7vor a3ufl xnw8v a0zw8 oekgx z50zr sbnko h1rf5 jmcr4 dark:text-neutral-200"> 24 </button> </div> <div > <button type="button" class="ms6qs itj8b flex q6rsd items-center dpq4d rg6vy hac7f b7vor a3ufl xnw8v a0zw8 oekgx z50zr sbnko h1rf5 jmcr4 dark:text-neutral-200"> 25 </button> </div> <div > <button type="button" class="ms6qs itj8b flex q6rsd items-center dpq4d rg6vy hac7f b7vor a3ufl xnw8v a0zw8 oekgx z50zr sbnko h1rf5 jmcr4 dark:text-neutral-200"> 26 </button> </div> <div > <button type="button" class="ms6qs itj8b flex q6rsd items-center dpq4d rg6vy hac7f b7vor a3ufl xnw8v a0zw8 oekgx z50zr sbnko h1rf5 jmcr4 dark:text-neutral-200"> 27 </button> </div> <div > <button type="button" class="ms6qs itj8b flex q6rsd items-center dpq4d rg6vy hac7f b7vor a3ufl xnw8v a0zw8 oekgx z50zr sbnko h1rf5 jmcr4 dark:text-neutral-200"> 28 </button> </div> <div > <button type="button" class="ms6qs itj8b flex q6rsd items-center dpq4d rg6vy hac7f b7vor a3ufl xnw8v a0zw8 oekgx z50zr sbnko h1rf5 jmcr4 dark:text-neutral-200"> 29 </button> </div> <div > <button type="button" class="ms6qs itj8b flex q6rsd items-center dpq4d rg6vy hac7f b7vor a3ufl xnw8v a0zw8 oekgx z50zr sbnko h1rf5 jmcr4 dark:text-neutral-200"> 30 </button> </div> </div> <!-- Days --> <!-- Days --> <div class="flex"> <div > <button type="button" class="ms6qs itj8b flex q6rsd items-center dpq4d rg6vy hac7f b7vor a3ufl xnw8v a0zw8 oekgx z50zr sbnko h1rf5 jmcr4 dark:text-neutral-200"> 31 </button> </div> <div > <button type="button" class="ms6qs itj8b flex q6rsd items-center dpq4d rg6vy hac7f b7vor xnw8v a0zw8 a3ufl oekgx z50zr sbnko tc0ip dark:text-neutral-200 dark:hover:border-neutral-500 dark:focus:bg-neutral-700" disabled> 1 </button> </div> <div> <button type="button" class="ms6qs itj8b flex q6rsd items-center dpq4d rg6vy hac7f b7vor xnw8v a0zw8 a3ufl oekgx z50zr sbnko tc0ip dark:text-neutral-200 dark:hover:border-neutral-500 dark:focus:bg-neutral-700" disabled> 2 </button> </div> <div> <button type="button" class="ms6qs itj8b flex q6rsd items-center dpq4d rg6vy hac7f b7vor xnw8v a0zw8 a3ufl oekgx z50zr sbnko tc0ip dark:text-neutral-200 dark:hover:border-neutral-500 dark:focus:bg-neutral-700" disabled> 3 </button> </div> <div> <button type="button" class="ms6qs itj8b flex q6rsd items-center dpq4d rg6vy hac7f b7vor xnw8v a0zw8 a3ufl oekgx z50zr sbnko tc0ip dark:text-neutral-200 dark:hover:border-neutral-500 dark:focus:bg-neutral-700" disabled> 4 </button> </div> <div> <button type="button" class="ms6qs itj8b flex q6rsd items-center dpq4d rg6vy hac7f b7vor xnw8v a0zw8 a3ufl oekgx z50zr sbnko tc0ip dark:text-neutral-200 dark:hover:border-neutral-500 dark:focus:bg-neutral-700" disabled> 5 </button> </div> <div> <button type="button" class="ms6qs itj8b flex q6rsd items-center dpq4d rg6vy hac7f b7vor xnw8v a0zw8 a3ufl oekgx z50zr sbnko tc0ip dark:text-neutral-200 dark:hover:border-neutral-500 dark:focus:bg-neutral-700" disabled> 6 </button> </div> </div> <!-- Days --> </div> <!-- End Calendar --> </div> </div> <!-- End Calendar Dropdown --> <button type="button" class="fuiju rc0sp xgqt9 items-center wwu1y ps4xk ivg4u xroga dpq4d rg6vy c3mn6 l6gz8 lopi5 oekgx z50zr sbnko dwtnn mci58 dark:focus:ring-indigo-500"> <svg class="hidden anx1n vpbnr fwnpl" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/><path d="M12 5v14"/></svg> Add project </button> </div> </div> <!-- End Page Header --> </div> <!-- End Header --> <!-- Body --> <div class="nfs8p f5qiq emlw3"> <!-- Empty State --> <div class="dx5bd v99kn flex dr3q9 q6rsd items-center bx4k9"> <svg class="v8dnz ha88l" width="87" height="65" viewBox="0 0 87 65" fill="none" xmlns="http://www.w3.org/2000/svg"> <rect y="35" width="6" height="30" fill="currentColor" class="qeoos dark:fill-neutral-700"/> <rect x="9" y="20" width="6" height="45" fill="currentColor" class="qeoos dark:fill-neutral-700"/> <rect x="18" y="25" width="6" height="40" fill="currentColor" class="qeoos dark:fill-neutral-700"/> <rect x="27" width="6" height="65" fill="currentColor" class="qeoos dark:fill-neutral-700"/> <rect x="36" y="5" width="6" height="60" fill="currentColor" class="qeoos dark:fill-neutral-700"/> <rect x="45" y="40" width="6" height="25" fill="currentColor" class="qeoos dark:fill-neutral-700"/> <rect x="54" y="25" width="6" height="40" fill="currentColor" class="qeoos dark:fill-neutral-700"/> <rect x="63" y="12" width="6" height="53" fill="currentColor" class="qeoos dark:fill-neutral-700"/> <rect x="72" width="6" height="65" fill="currentColor" class="qeoos dark:fill-neutral-700"/> <rect x="81" y="44" width="6" height="21" fill="currentColor" class="qeoos dark:fill-neutral-700"/> </svg> <div class="uvzen ha88l"> <p class="yvhh6 ivg4u b7vor dark:text-neutral-200"> No data </p> <p class="lilhu hac7f oxyct dark:text-neutral-500"> No data here yet. We will notify you when there's an update. </p> </div> <button type="button" class="fuiju tm5do xgqt9 items-center wwu1y ps4xk ivg4u xroga dpq4d rg6vy c3mn6 l6gz8 lopi5 oekgx z50zr sbnko dwtnn he0ie" data-hs-overlay="#hs-pro-pabchesb"> <svg class="hidden anx1n vpbnr fwnpl" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/><path d="M12 5v14"/></svg>Link data </button> </div> <!-- End Empty State --> </div> <!-- End Body --></div><!-- End Card --> <script src="../../assets/vendor/preline/dist/index.js?v=1.0.0"></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 = 'vcuaq pqyx6 v869m dpq4d a11ya b7vor xroga h41lv dark:bg-neutral-800 dark:border-neutral-700', wrapperExtClasses = '', seriesClasses = 'qwx52', seriesExtClasses = '', titleClasses = 'u2ysm n940x p6wmt vktwm b7vor cl5h5 dark:!bg-neutral-800 dark:!border-neutral-700 dark:text-neutral-200', titleExtClasses = '', markerClasses = 'v0ajf rczsd kvtlb', markerExtClasses = 'ekhil', valueClasses = 'vduor oxyct omgws dark:text-neutral-400', valueExtClasses = '', labelClasses = 'oxyct 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 wxfee ${hasTextLabel ? 'dppa3' : ''} 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 h3urn"> <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>`; } function buildTooltipCompareTwo(props, options) { const { dataPointIndex } = props; const { categories } = props.ctx.opts.xaxis; const { colors } = props.ctx.opts; const series = props.ctx.opts.series; const { title, mode, valuePrefix = '$', isValueDivided = true, valuePostfix = '', hasCategory = true, hasTextLabel = false, labelDivider = '', wrapperClasses = 'vcuaq pqyx6 v869m dpq4d a11ya b7vor xroga h41lv dark:bg-neutral-800 dark:border-neutral-700', wrapperExtClasses = '', seriesClasses = 'dppa3 w-full qwx52', seriesExtClasses = '', titleClasses = 'flex encm3 u2ysm n940x p6wmt vktwm b7vor cl5h5 dark:!bg-neutral-800 dark:!border-neutral-700 dark:text-neutral-200', titleExtClasses = '', markerClasses = 'v0ajf rczsd kvtlb', markerExtClasses = 'ekhil', valueClasses = 'vduor oxyct omgws dark:text-neutral-400', valueExtClasses = '', labelClasses = 'oxyct dark:text-neutral-400 f0q0d', labelExtClasses = '' } = options; let seriesGroups = ''; const s0 = series[0].data[dataPointIndex]; const s1 = series[1].data[dataPointIndex]; const category = categories[dataPointIndex].split(' '); const newCategory = hasCategory ? `${category[0]}${category[1] ? ' ' : ''}${category[1] ? category[1].slice(0, 3) : ''}` : ''; const isGrowing = s0 > s1; const isDifferenceIsNull = s0 / s1 === 1; const difference = isDifferenceIsNull ? 0 : (s0 / s1) * 100; const icon = isGrowing ? `<svg class="dxkem m5z5i l5pqr" 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>` : `<svg class="dxkem m5z5i l5pqr" 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>`; 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} wxfee 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 h3urn"> ${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 c0yql ${!isDifferenceIsNull ? (isGrowing ? 'kikgv' : 'tvxlh') : ''} f0q0d"> ${!isDifferenceIsNull ? icon : ''} <span class="dxkem hac7f"> ${difference.toFixed(1)}% </span> </span> </div> ${seriesGroups} </div>`; } function buildTooltipCompareTwoAlt(props, options) { const { dataPointIndex } = props; const { categories } = props.ctx.opts.xaxis; const { colors } = props.ctx.opts; const series = props.ctx.opts.series; const { title, mode, valuePrefix = '$', isValueDivided = true, valuePostfix = '', hasCategory = true, hasTextLabel = false, labelDivider = '', wrapperClasses = 'vcuaq pqyx6 v869m dpq4d a11ya b7vor xroga h41lv dark:bg-neutral-800 dark:border-neutral-700', wrapperExtClasses = '', seriesClasses = 'dppa3 w-full qwx52', seriesExtClasses = '', titleClasses = 'flex encm3 u2ysm n940x p6wmt vktwm b7vor cl5h5 dark:!bg-neutral-800 dark:!border-neutral-700 dark:text-neutral-200', titleExtClasses = '', markerClasses = 'v0ajf rczsd kvtlb', markerExtClasses = 'ekhil', valueClasses = 'vduor oxyct omgws dark:text-neutral-400', valueExtClasses = '', labelClasses = 'oxyct dark:text-neutral-400 f0q0d', labelExtClasses = '' } = options; let seriesGroups = ''; const s0 = series[0].data[dataPointIndex]; const s1 = series[1].data[dataPointIndex]; const category = categories[dataPointIndex].split(' '); const newCategory = hasCategory ? `${category[0]}${category[1] ? ' ' : ''}${category[1] ? category[1].slice(0, 3) : ''}` : ''; const isGrowing = s0 > s1; const isDifferenceIsNull = s0 / s1 === 1; const difference = isDifferenceIsNull ? 0 : (s0 / s1) * 100; const icon = isGrowing ? `<svg class="dxkem m5z5i l5pqr" 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>` : `<svg class="dxkem m5z5i l5pqr" 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>`; 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 wxfee ${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 qwx52 "> <div class="apexcharts-tooltip-y-group h3urn"> <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 c0yql ${!isDifferenceIsNull ? (isGrowing ? 'kikgv' : 'tvxlh') : ''} f0q0d"> ${!isDifferenceIsNull ? icon : ''} <span class="dxkem hac7f"> ${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 Chart (function () { buildChart('#hs-bar-chart', (mode) => ({ chart: { type: 'bar', height: 350, toolbar: { show: false }, zoom: { enabled: false } }, series: [ { name: 'Income', data: [17000, 76000, 85000, 101000, 98000, 87000, 105000, 91000, 114000, 94000, 67000, 66000] }, { name: 'Expenses', data: [23000, 44000, 55000, 57000, 56000, 61000, 58000, 63000, 60000, 66000, 34000, 78000] } ], colors: ['#8b5cf6', '#d1d5db'], plotOptions: { bar: { horizontal: false, columnWidth: '20px', borderRadius: 0, } }, legend: { show: false }, dataLabels: { enabled: false }, stroke: { show: true, width: 8, colors: ['transparent'] }, xaxis: { categories: [ 'January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December' ], axisBorder: { show: false }, axisTicks: { show: false }, crosshairs: { show: false }, labels: { style: { colors: '#9ca3af', fontSize: '13px', fontFamily: 'Inter, ui-sans-serif', fontWeight: 400 }, offsetX: -2, formatter: (title) => title.slice(0, 3) } }, yaxis: { labels: { align: 'left', minWidth: 0, maxWidth: 140, style: { colors: '#9ca3af', fontSize: '13px', fontFamily: 'Inter, ui-sans-serif', fontWeight: 400 }, formatter: (value) => value >= 1000 ? `${value / 1000}k` : value } }, tooltip: { custom: function (props) { const { categories } = props.ctx.opts.xaxis; const { dataPointIndex } = props; return buildTooltip(props, { title: categories[dataPointIndex], mode, hasCategory: false, hasTextLabel: true, wrapperExtClasses: 'jbi9l', labelDivider: ':', labelExtClasses: 'f0q0d' }); } }, states: { hover: { filter: { type: 'darken', value: 0.9 } } }, responsive: [{ breakpoint: 568, options: { chart: { height: 300 }, plotOptions: { bar: { columnWidth: '14px' } }, stroke: { width: 8 }, responsive: [{ breakpoint: 568, options: { chart: { height: 300 }, plotOptions: { bar: { columnWidth: '14px' } }, stroke: { width: 8 }, labels: { style: { colors: '#9ca3af', fontSize: '11px', fontFamily: 'Inter, ui-sans-serif', fontWeight: 400 }, offsetX: -2, formatter: (title) => title.slice(0, 3) }, yaxis: { labels: { align: 'left', minWidth: 0, maxWidth: 140, style: { colors: '#9ca3af', fontSize: '11px', fontFamily: 'Inter, ui-sans-serif', fontWeight: 400 }, formatter: (value) => value >= 1000 ? `${value / 1000}k` : value } }, }, }] }, }] }), { colors: ['#4f46e5', '#c7d2fe'], grid: { borderColor: '#e5e7eb' }, xaxis: { labels: { style: { colors: '#9ca3af' } } }, yaxis: { labels: { style: { colors: '#9ca3af' } } } }, { colors: ['#4f46e5', '#a5b4fc'], grid: { borderColor: '#404040' }, xaxis: { labels: { style: { colors: '#a3a3a3', } } }, yaxis: { labels: { style: { colors: '#a3a3a3' } } } }); })(); }); </script> </body> </html>
<!-- Header --> <div class="x815m a11ya dark:border-neutral-700"> <!-- Page Header --> <div class="yxmdd f5qiq flex encm3 items-center qy7wn"> <h2 class="dxkem u2ysm b7vor dark:text-neutral-200"> Preline </h2> <div class="flex qsj3b items-center wwu1y"> <!-- Calendar Dropdown --> <div class="hs-dropdown [--auto-close:inside] [--placement:top-right] xgqt9"> <button id="hs-pro-dnic" type="button" class="z1r3e xgqt9 items-center ps4xk ivg4u xroga dpq4d a11ya v869m b7vor k8i8d e1tdc oekgx z50zr sbnko roxnn dark:bg-neutral-800 dark:border-neutral-700 dark:text-neutral-300 dark:hover:bg-neutral-800 dark:focus:bg-neutral-800" aria-haspopup="menu" aria-expanded="false" aria-label="Dropdown"> <svg class="vpbnr rznfr fwnpl" 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"><rect width="18" height="18" x="3" y="4" rx="2" ry="2"/><line x1="16" x2="16" y1="2" y2="6"/><line x1="8" x2="8" y1="2" y2="6"/><line x1="3" x2="21" y1="10" y2="10"/><path d="M8 14h.01"/><path d="M12 14h.01"/><path d="M16 14h.01"/><path d="M8 18h.01"/><path d="M12 18h.01"/><path d="M16 18h.01"/></svg> Today <svg class="vpbnr dy8w2 fwnpl" 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="m6 9 6 6 6-6"/></svg> </button> <div class="hs-dropdown-menu hs-dropdown-open:opacity-100 h9d1v transition-[opacity,margin] duration opacity-0 hidden rxg3f v869m it6u8 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" role="menu" aria-orientation="vertical" aria-labelledby="hs-pro-dnic"> <!-- Calendar --> <div class="bjlw2 z9rsz"> <!-- Months --> <div class="cwrq4 c6gnq items-center clmee pqxmy b4788"> <!-- Prev Button --> <div class="dzjy8"> <button type="button" class="rj4tp flex q6rsd items-center b7vor ql6ky a3ufl oekgx z50zr sbnko tc0ip dark:text-neutral-400 dark:hover:bg-neutral-800 dark:focus:bg-neutral-800"> <svg class="vpbnr m5z5i" 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="m15 18-6-6 6-6"/></svg> </button> </div> <!-- End Prev Button --> <!-- Month / Year --> <div class="pgvne flex q6rsd items-center c0yql"> <div class="relative"> <select data-hs-select='{ "placeholder": "Select month", "toggleTag": "<button type=\"button\" aria-expanded=\"false\"></button>", "toggleClasses": "hs-select-disabled:pointer-events-none hs-select-disabled:opacity-50 relative flex i419g w-full cursor-pointer u4pm7 ivg4u b7vor jq7pu sbnko rpdye pn7qd bhpwi u6glr dark:text-neutral-200 dark:hover:text-neutral-300 dark:focus:text-neutral-300", "dropdownClasses": "yvhh6 rxg3f ob8c3 lt268 mu3xt z9rsz v869m dpq4d a11ya xroga dqyik vlqzh w56at ixhii el1lk my2de peqgl dark:[&::-webkit-scrollbar-track]:bg-neutral-700 dark:[&::-webkit-scrollbar-thumb]:bg-neutral-500 dark:bg-neutral-900 dark:border-neutral-700", "optionClasses": "z1r3e w-full hac7f b7vor cursor-pointer ql6ky xroga sbnko tc0ip dark:bg-neutral-900 dark:hover:bg-neutral-800 dark:text-neutral-200 dark:focus:bg-neutral-800", "optionTemplate": "<div class=\"flex encm3 items-center w-full \"><span data-title></span><span class=\"hidden hs-selected:block \"><svg class=\"vpbnr fwnpl b7vor dark:text-neutral-200 \" xmlns=\"http:.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=\"20 6 9 17 4 12\"/></svg></span></div>" }' class="hidden"> <option value="0">January</option> <option value="1">February</option> <option value="2">March</option> <option value="3">April</option> <option value="4">May</option> <option value="5">June</option> <option value="6" selected>July</option> <option value="7">August</option> <option value="8">September</option> <option value="9">October</option> <option value="10">November</option> <option value="11">December</option> </select> </div> <span class="b7vor dark:text-neutral-200">/</span> <div class="relative"> <select data-hs-select='{ "placeholder": "Select year", "toggleTag": "<button type=\"button\" aria-expanded=\"false\"></button>", "toggleClasses": "hs-select-disabled:pointer-events-none hs-select-disabled:opacity-50 relative flex i419g w-full cursor-pointer u4pm7 ivg4u b7vor jq7pu sbnko rpdye pn7qd bhpwi u6glr dark:text-neutral-200 dark:hover:text-neutral-300 dark:focus:text-neutral-300", "dropdownClasses": "yvhh6 rxg3f lxpms lt268 mu3xt z9rsz v869m dpq4d a11ya xroga dqyik vlqzh w56at ixhii el1lk my2de peqgl dark:[&::-webkit-scrollbar-track]:bg-neutral-700 dark:[&::-webkit-scrollbar-thumb]:bg-neutral-500 dark:bg-neutral-900 dark:border-neutral-700", "optionClasses": "z1r3e w-full hac7f b7vor cursor-pointer ql6ky xroga sbnko tc0ip dark:bg-neutral-900 dark:hover:bg-neutral-800 dark:text-neutral-200 dark:focus:bg-neutral-800", "optionTemplate": "<div class=\"flex encm3 items-center w-full \"><span data-title></span><span class=\"hidden hs-selected:block \"><svg class=\"vpbnr fwnpl b7vor dark:text-neutral-200 \" xmlns=\"http:.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=\"20 6 9 17 4 12\"/></svg></span></div>" }' class="hidden"> <option selected>2023</option> <option>2024</option> <option>2025</option> <option>2026</option> <option>2027</option> </select> </div> </div> <!-- End Month / Year --> <!-- Next Button --> <div class="dzjy8 flex qsj3b"> <button type="button" class=" rj4tp flex q6rsd items-center b7vor ql6ky a3ufl oekgx z50zr sbnko tc0ip dark:text-neutral-400 dark:hover:bg-neutral-800 dark:focus:bg-neutral-800"> <svg class="vpbnr m5z5i" 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 18 6-6-6-6"/></svg> </button> </div> <!-- End Next Button --> </div> <!-- Months --> <!-- Weeks --> <div class="flex vskbb"> <span class="ms6qs ftepz block bx4k9 hac7f oxyct dark:text-neutral-500"> Mo </span> <span class="ms6qs ftepz block bx4k9 hac7f oxyct dark:text-neutral-500"> Tu </span> <span class="ms6qs ftepz block bx4k9 hac7f oxyct dark:text-neutral-500"> We </span> <span class="ms6qs ftepz block bx4k9 hac7f oxyct dark:text-neutral-500"> Th </span> <span class="ms6qs ftepz block bx4k9 hac7f oxyct dark:text-neutral-500"> Fr </span> <span class="ms6qs ftepz block bx4k9 hac7f oxyct dark:text-neutral-500"> Sa </span> <span class="ms6qs ftepz block bx4k9 hac7f oxyct dark:text-neutral-500"> Su </span> </div> <!-- Weeks --> <!-- Days --> <div class="flex"> <div> <button type="button" class="ms6qs itj8b flex q6rsd items-center dpq4d rg6vy hac7f b7vor a3ufl xnw8v a0zw8 oekgx z50zr sbnko h1rf5 jmcr4 dark:text-neutral-200" disabled> 26 </button> </div> <div> <button type="button" class="ms6qs itj8b flex q6rsd items-center dpq4d rg6vy hac7f b7vor a3ufl xnw8v a0zw8 oekgx z50zr sbnko h1rf5 jmcr4 dark:text-neutral-200" disabled> 27 </button> </div> <div> <button type="button" class="ms6qs itj8b flex q6rsd items-center dpq4d rg6vy hac7f b7vor a3ufl xnw8v a0zw8 oekgx z50zr sbnko h1rf5 jmcr4 dark:text-neutral-200" disabled> 28 </button> </div> <div> <button type="button" class="ms6qs itj8b flex q6rsd items-center dpq4d rg6vy hac7f b7vor a3ufl xnw8v a0zw8 oekgx z50zr sbnko h1rf5 jmcr4 dark:text-neutral-200" disabled> 29 </button> </div> <div> <button type="button" class="ms6qs itj8b flex q6rsd items-center dpq4d rg6vy hac7f b7vor a3ufl xnw8v a0zw8 oekgx z50zr sbnko h1rf5 jmcr4 dark:text-neutral-200" disabled> 30 </button> </div> <div> <button type="button" class="ms6qs itj8b flex q6rsd items-center dpq4d rg6vy hac7f b7vor a3ufl xnw8v a0zw8 oekgx z50zr sbnko h1rf5 jmcr4 dark:text-neutral-200"> 1 </button> </div> <div> <button type="button" class="ms6qs itj8b flex q6rsd items-center dpq4d rg6vy hac7f b7vor a3ufl xnw8v a0zw8 oekgx z50zr sbnko h1rf5 jmcr4 dark:text-neutral-200"> 2 </button> </div> </div> <!-- Days --> <!-- Days --> <div class="flex"> <div> <button type="button" class="ms6qs itj8b flex q6rsd items-center dpq4d rg6vy hac7f b7vor a3ufl xnw8v a0zw8 oekgx z50zr sbnko h1rf5 jmcr4 dark:text-neutral-200"> 3 </button> </div> <div> <button type="button" class="ms6qs itj8b flex q6rsd items-center dpq4d rg6vy hac7f b7vor a3ufl xnw8v a0zw8 oekgx z50zr sbnko h1rf5 jmcr4 dark:text-neutral-200"> 4 </button> </div> <div > <button type="button" class="ms6qs itj8b flex q6rsd items-center dpq4d rg6vy hac7f b7vor a3ufl xnw8v a0zw8 oekgx z50zr sbnko h1rf5 jmcr4 dark:text-neutral-200"> 5 </button> </div> <div > <button type="button" class="ms6qs itj8b flex q6rsd items-center dpq4d rg6vy hac7f b7vor a3ufl xnw8v a0zw8 oekgx z50zr sbnko h1rf5 jmcr4 dark:text-neutral-200"> 6 </button> </div> <div > <button type="button" class="ms6qs itj8b flex q6rsd items-center dpq4d rg6vy hac7f b7vor a3ufl xnw8v a0zw8 oekgx z50zr sbnko h1rf5 jmcr4 dark:text-neutral-200"> 7 </button> </div> <div > <button type="button" class="ms6qs itj8b flex q6rsd items-center dpq4d rg6vy hac7f b7vor a3ufl xnw8v a0zw8 oekgx z50zr sbnko h1rf5 jmcr4 dark:text-neutral-200"> 8 </button> </div> <div > <button type="button" class="ms6qs itj8b flex q6rsd items-center dpq4d rg6vy hac7f b7vor a3ufl xnw8v a0zw8 oekgx z50zr sbnko h1rf5 jmcr4 dark:text-neutral-200"> 9 </button> </div> </div> <!-- Days --> <!-- Days --> <div class="flex"> <div > <button type="button" class="ms6qs itj8b flex q6rsd items-center dpq4d rg6vy hac7f b7vor a3ufl xnw8v a0zw8 oekgx z50zr sbnko h1rf5 jmcr4 dark:text-neutral-200"> 10 </button> </div> <div > <button type="button" class="ms6qs itj8b flex q6rsd items-center dpq4d rg6vy hac7f b7vor a3ufl xnw8v a0zw8 oekgx z50zr sbnko h1rf5 jmcr4 dark:text-neutral-200"> 11 </button> </div> <div > <button type="button" class="ms6qs itj8b flex q6rsd items-center dpq4d rg6vy hac7f b7vor a3ufl xnw8v a0zw8 oekgx z50zr sbnko h1rf5 jmcr4 dark:text-neutral-200"> 12 </button> </div> <div> <button type="button" class="ms6qs itj8b flex q6rsd items-center dpq4d rg6vy hac7f b7vor a3ufl xnw8v a0zw8 oekgx z50zr sbnko h1rf5 jmcr4 dark:text-neutral-200"> 13 </button> </div> <div> <button type="button" class="ms6qs itj8b flex q6rsd items-center dpq4d rg6vy hac7f b7vor a3ufl xnw8v a0zw8 oekgx z50zr sbnko h1rf5 jmcr4 dark:text-neutral-200"> 14 </button> </div> <div> <button type="button" class="ms6qs itj8b flex q6rsd items-center dpq4d rg6vy hac7f b7vor a3ufl xnw8v a0zw8 oekgx z50zr sbnko h1rf5 jmcr4 dark:text-neutral-200"> 15 </button> </div> <div> <button type="button" class="ms6qs itj8b flex q6rsd items-center dpq4d rg6vy hac7f b7vor a3ufl xnw8v a0zw8 oekgx z50zr sbnko h1rf5 jmcr4 dark:text-neutral-200"> 16 </button> </div> </div> <!-- Days --> <!-- Days --> <div class="flex"> <div> <button type="button" class="ms6qs itj8b flex q6rsd items-center dpq4d rg6vy hac7f b7vor a3ufl xnw8v a0zw8 oekgx z50zr sbnko h1rf5 jmcr4 dark:text-neutral-200"> 17 </button> </div> <div> <button type="button" class="ms6qs itj8b flex q6rsd items-center dpq4d rg6vy hac7f b7vor a3ufl xnw8v a0zw8 oekgx z50zr sbnko h1rf5 jmcr4 dark:text-neutral-200"> 18 </button> </div> <div> <button type="button" class="ms6qs itj8b flex q6rsd items-center dpq4d rg6vy hac7f b7vor a3ufl xnw8v a0zw8 oekgx z50zr sbnko h1rf5 jmcr4 dark:text-neutral-200"> 19 </button> </div> <div> <button type="button" class="ms6qs itj8b flex q6rsd items-center c3mn6 dpq4d rg6vy hac7f ivg4u l6gz8 xnw8v a3ufl dark:bg-indigo-500 oekgx z50zr sbnko tc0ip dark:hover:border-neutral-700"> 20 </button> </div> <div> <button type="button" class="ms6qs itj8b flex q6rsd items-center dpq4d rg6vy hac7f b7vor a3ufl xnw8v a0zw8 oekgx z50zr sbnko h1rf5 jmcr4 dark:text-neutral-200"> 21 </button> </div> <div> <button type="button" class="ms6qs itj8b flex q6rsd items-center dpq4d rg6vy hac7f b7vor a3ufl xnw8v a0zw8 oekgx z50zr sbnko h1rf5 jmcr4 dark:text-neutral-200"> 22 </button> </div> <div> <button type="button" class="ms6qs itj8b flex q6rsd items-center dpq4d rg6vy hac7f b7vor a3ufl xnw8v a0zw8 oekgx z50zr sbnko h1rf5 jmcr4 dark:text-neutral-200"> 23 </button> </div> </div> <!-- Days --> <!-- Days --> <div class="flex"> <div> <button type="button" class="ms6qs itj8b flex q6rsd items-center dpq4d rg6vy hac7f b7vor a3ufl xnw8v a0zw8 oekgx z50zr sbnko h1rf5 jmcr4 dark:text-neutral-200"> 24 </button> </div> <div > <button type="button" class="ms6qs itj8b flex q6rsd items-center dpq4d rg6vy hac7f b7vor a3ufl xnw8v a0zw8 oekgx z50zr sbnko h1rf5 jmcr4 dark:text-neutral-200"> 25 </button> </div> <div > <button type="button" class="ms6qs itj8b flex q6rsd items-center dpq4d rg6vy hac7f b7vor a3ufl xnw8v a0zw8 oekgx z50zr sbnko h1rf5 jmcr4 dark:text-neutral-200"> 26 </button> </div> <div > <button type="button" class="ms6qs itj8b flex q6rsd items-center dpq4d rg6vy hac7f b7vor a3ufl xnw8v a0zw8 oekgx z50zr sbnko h1rf5 jmcr4 dark:text-neutral-200"> 27 </button> </div> <div > <button type="button" class="ms6qs itj8b flex q6rsd items-center dpq4d rg6vy hac7f b7vor a3ufl xnw8v a0zw8 oekgx z50zr sbnko h1rf5 jmcr4 dark:text-neutral-200"> 28 </button> </div> <div > <button type="button" class="ms6qs itj8b flex q6rsd items-center dpq4d rg6vy hac7f b7vor a3ufl xnw8v a0zw8 oekgx z50zr sbnko h1rf5 jmcr4 dark:text-neutral-200"> 29 </button> </div> <div > <button type="button" class="ms6qs itj8b flex q6rsd items-center dpq4d rg6vy hac7f b7vor a3ufl xnw8v a0zw8 oekgx z50zr sbnko h1rf5 jmcr4 dark:text-neutral-200"> 30 </button> </div> </div> <!-- Days --> <!-- Days --> <div class="flex"> <div > <button type="button" class="ms6qs itj8b flex q6rsd items-center dpq4d rg6vy hac7f b7vor a3ufl xnw8v a0zw8 oekgx z50zr sbnko h1rf5 jmcr4 dark:text-neutral-200"> 31 </button> </div> <div > <button type="button" class="ms6qs itj8b flex q6rsd items-center dpq4d rg6vy hac7f b7vor xnw8v a0zw8 a3ufl oekgx z50zr sbnko tc0ip dark:text-neutral-200 dark:hover:border-neutral-500 dark:focus:bg-neutral-700" disabled> 1 </button> </div> <div> <button type="button" class="ms6qs itj8b flex q6rsd items-center dpq4d rg6vy hac7f b7vor xnw8v a0zw8 a3ufl oekgx z50zr sbnko tc0ip dark:text-neutral-200 dark:hover:border-neutral-500 dark:focus:bg-neutral-700" disabled> 2 </button> </div> <div> <button type="button" class="ms6qs itj8b flex q6rsd items-center dpq4d rg6vy hac7f b7vor xnw8v a0zw8 a3ufl oekgx z50zr sbnko tc0ip dark:text-neutral-200 dark:hover:border-neutral-500 dark:focus:bg-neutral-700" disabled> 3 </button> </div> <div> <button type="button" class="ms6qs itj8b flex q6rsd items-center dpq4d rg6vy hac7f b7vor xnw8v a0zw8 a3ufl oekgx z50zr sbnko tc0ip dark:text-neutral-200 dark:hover:border-neutral-500 dark:focus:bg-neutral-700" disabled> 4 </button> </div> <div> <button type="button" class="ms6qs itj8b flex q6rsd items-center dpq4d rg6vy hac7f b7vor xnw8v a0zw8 a3ufl oekgx z50zr sbnko tc0ip dark:text-neutral-200 dark:hover:border-neutral-500 dark:focus:bg-neutral-700" disabled> 5 </button> </div> <div> <button type="button" class="ms6qs itj8b flex q6rsd items-center dpq4d rg6vy hac7f b7vor xnw8v a0zw8 a3ufl oekgx z50zr sbnko tc0ip dark:text-neutral-200 dark:hover:border-neutral-500 dark:focus:bg-neutral-700" disabled> 6 </button> </div> </div> <!-- Days --> </div> <!-- End Calendar --> </div> </div> <!-- End Calendar Dropdown --> <button type="button" class="fuiju rc0sp xgqt9 items-center wwu1y ps4xk ivg4u xroga dpq4d rg6vy c3mn6 l6gz8 lopi5 oekgx z50zr sbnko dwtnn mci58 dark:focus:ring-indigo-500"> <svg class="hidden anx1n vpbnr fwnpl" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/><path d="M12 5v14"/></svg> Add project </button> </div> </div> <!-- End Page Header --> </div> <!-- End Header --> <!-- Body --> <div class="nfs8p f5qiq emlw3"> <!-- Empty State --> <div class="dx5bd v99kn flex dr3q9 q6rsd items-center bx4k9"> <svg class="v8dnz ha88l" width="87" height="65" viewBox="0 0 87 65" fill="none" xmlns="http://www.w3.org/2000/svg"> <rect y="35" width="6" height="30" fill="currentColor" class="qeoos dark:fill-neutral-700"/> <rect x="9" y="20" width="6" height="45" fill="currentColor" class="qeoos dark:fill-neutral-700"/> <rect x="18" y="25" width="6" height="40" fill="currentColor" class="qeoos dark:fill-neutral-700"/> <rect x="27" width="6" height="65" fill="currentColor" class="qeoos dark:fill-neutral-700"/> <rect x="36" y="5" width="6" height="60" fill="currentColor" class="qeoos dark:fill-neutral-700"/> <rect x="45" y="40" width="6" height="25" fill="currentColor" class="qeoos dark:fill-neutral-700"/> <rect x="54" y="25" width="6" height="40" fill="currentColor" class="qeoos dark:fill-neutral-700"/> <rect x="63" y="12" width="6" height="53" fill="currentColor" class="qeoos dark:fill-neutral-700"/> <rect x="72" width="6" height="65" fill="currentColor" class="qeoos dark:fill-neutral-700"/> <rect x="81" y="44" width="6" height="21" fill="currentColor" class="qeoos dark:fill-neutral-700"/> </svg> <div class="uvzen ha88l"> <p class="yvhh6 ivg4u b7vor dark:text-neutral-200"> No data </p> <p class="lilhu hac7f oxyct dark:text-neutral-500"> No data here yet. We will notify you when there's an update. </p> </div> <button type="button" class="fuiju tm5do xgqt9 items-center wwu1y ps4xk ivg4u xroga dpq4d rg6vy c3mn6 l6gz8 lopi5 oekgx z50zr sbnko dwtnn he0ie" data-hs-overlay="#hs-pro-pabchesb"> <svg class="hidden anx1n vpbnr fwnpl" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/><path d="M12 5v14"/></svg>Link data </button> </div> <!-- End Empty State --> </div> <!-- End Body -->
Simple Empty State with Illustration
Preview
Get the code
Existing accounts: Sign in to your account to access the source code.
<!DOCTYPE html> <html lang="en" dir="" class="relative qm7fm mamhr"> <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><!-- Empty State --> <div class="dx5bd xbx6v flex dr3q9 q6rsd items-center bx4k9"> <svg class="v8dnz ha88l owr0a" width="178" height="90" viewBox="0 0 178 90" fill="none" xmlns="http://www.w3.org/2000/svg"> <rect x="27" y="50.5" width="124" height="39" rx="7.5" fill="currentColor" class="scpqw dark:fill-neutral-800"/> <rect x="27" y="50.5" width="124" height="39" rx="7.5" stroke="currentColor" class="zmuwz dark:stroke-neutral-700/10"/> <rect x="34.5" y="58" width="24" height="24" rx="4" fill="currentColor" class="g8ann dark:fill-neutral-700/30"/> <rect x="66.5" y="61" width="60" height="6" rx="3" fill="currentColor" class="g8ann dark:fill-neutral-700/30"/> <rect x="66.5" y="73" width="77" height="6" rx="3" fill="currentColor" class="g8ann dark:fill-neutral-700/30"/> <rect x="19.5" y="28.5" width="139" height="39" rx="7.5" fill="currentColor" class="scpqw dark:fill-neutral-800"/> <rect x="19.5" y="28.5" width="139" height="39" rx="7.5" stroke="currentColor" class="h6tnm dark:stroke-neutral-700/30"/> <rect x="27" y="36" width="24" height="24" rx="4" fill="currentColor" class="cjy99 dark:fill-neutral-700/70"/> <rect x="59" y="39" width="60" height="6" rx="3" fill="currentColor" class="cjy99 dark:fill-neutral-700/70"/> <rect x="59" y="51" width="92" height="6" rx="3" fill="currentColor" class="cjy99 dark:fill-neutral-700/70"/> <g filter="url(#filter19)"> <rect x="12" y="6" width="154" height="40" rx="8" fill="currentColor" class="scpqw dark:fill-neutral-800" shape-rendering="crispEdges"/> <rect x="12.5" y="6.5" width="153" height="39" rx="7.5" stroke="currentColor" class="h6tnm dark:stroke-neutral-700/60" shape-rendering="crispEdges"/> <rect x="20" y="14" width="24" height="24" rx="4" fill="currentColor" class="qeoos dark:fill-neutral-700 "/> <rect x="52" y="17" width="60" height="6" rx="3" fill="currentColor" class="qeoos dark:fill-neutral-700"/> <rect x="52" y="29" width="106" height="6" rx="3" fill="currentColor" class="qeoos dark:fill-neutral-700"/> </g> <defs> <filter id="filter19" x="0" y="0" width="178" height="64" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"> <feFlood flood-opacity="0" result="BackgroundImageFix"/> <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/> <feOffset dy="6"/> <feGaussianBlur stdDeviation="6"/> <feComposite in2="hardAlpha" operator="out"/> <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.03 0"/> <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_1187_14810"/> <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_1187_14810" result="shape"/> </filter> </defs> </svg> <div class="uvzen ha88l"> <p class="yvhh6 ivg4u b7vor dark:text-neutral-200"> No projects </p> <p class="lilhu hac7f oxyct dark:text-neutral-500"> No data here yet. We will notify you when there's an update. </p> </div> </div> <!-- End Empty State --> <script src="../../assets/vendor/preline/dist/index.js?v=1.0.0"></script> </body> </html>
<!-- Empty State --> <div class="dx5bd xbx6v flex dr3q9 q6rsd items-center bx4k9"> <svg class="v8dnz ha88l owr0a" width="178" height="90" viewBox="0 0 178 90" fill="none" xmlns="http://www.w3.org/2000/svg"> <rect x="27" y="50.5" width="124" height="39" rx="7.5" fill="currentColor" class="scpqw dark:fill-neutral-800"/> <rect x="27" y="50.5" width="124" height="39" rx="7.5" stroke="currentColor" class="zmuwz dark:stroke-neutral-700/10"/> <rect x="34.5" y="58" width="24" height="24" rx="4" fill="currentColor" class="g8ann dark:fill-neutral-700/30"/> <rect x="66.5" y="61" width="60" height="6" rx="3" fill="currentColor" class="g8ann dark:fill-neutral-700/30"/> <rect x="66.5" y="73" width="77" height="6" rx="3" fill="currentColor" class="g8ann dark:fill-neutral-700/30"/> <rect x="19.5" y="28.5" width="139" height="39" rx="7.5" fill="currentColor" class="scpqw dark:fill-neutral-800"/> <rect x="19.5" y="28.5" width="139" height="39" rx="7.5" stroke="currentColor" class="h6tnm dark:stroke-neutral-700/30"/> <rect x="27" y="36" width="24" height="24" rx="4" fill="currentColor" class="cjy99 dark:fill-neutral-700/70"/> <rect x="59" y="39" width="60" height="6" rx="3" fill="currentColor" class="cjy99 dark:fill-neutral-700/70"/> <rect x="59" y="51" width="92" height="6" rx="3" fill="currentColor" class="cjy99 dark:fill-neutral-700/70"/> <g filter="url(#filter19)"> <rect x="12" y="6" width="154" height="40" rx="8" fill="currentColor" class="scpqw dark:fill-neutral-800" shape-rendering="crispEdges"/> <rect x="12.5" y="6.5" width="153" height="39" rx="7.5" stroke="currentColor" class="h6tnm dark:stroke-neutral-700/60" shape-rendering="crispEdges"/> <rect x="20" y="14" width="24" height="24" rx="4" fill="currentColor" class="qeoos dark:fill-neutral-700 "/> <rect x="52" y="17" width="60" height="6" rx="3" fill="currentColor" class="qeoos dark:fill-neutral-700"/> <rect x="52" y="29" width="106" height="6" rx="3" fill="currentColor" class="qeoos dark:fill-neutral-700"/> </g> <defs> <filter id="filter19" x="0" y="0" width="178" height="64" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"> <feFlood flood-opacity="0" result="BackgroundImageFix"/> <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/> <feOffset dy="6"/> <feGaussianBlur stdDeviation="6"/> <feComposite in2="hardAlpha" operator="out"/> <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.03 0"/> <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_1187_14810"/> <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_1187_14810" result="shape"/> </filter> </defs> </svg> <div class="uvzen ha88l"> <p class="yvhh6 ivg4u b7vor dark:text-neutral-200"> No projects </p> <p class="lilhu hac7f oxyct dark:text-neutral-500"> No data here yet. We will notify you when there's an update. </p> </div> </div> <!-- End Empty State -->
Subscribe
Get all the latest Preline updates and news.
All examples
Close
Close