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 mgh58 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 kby5p ly3m4"> <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="qaxp8 a7bd7 huxlp"><!-- Browsers Card --> <div class="ly3m4 flex pz3xv m9vu4 efs5t kq7zk ycht7 dxf1r dark:bg-neutral-800 dark:border-neutral-700"> <!-- Header --> <div class="lc5w1 wdbkl flex m0bgt items-center"> <h2 class="if1eb ykxda rozsb p9tun dark:text-neutral-200"> Browsers </h2> </div> <!-- End Header --> <!-- Body --> <div class="flex pz3xv m0bgt ly3m4 ddjby xljyb"> <div> <h4 class="nzzev jv4dc f4yq1 oqj39 dark:text-blue-500"> <span class="isq74 c0i0q t7g7b qp5nw fq13s"> 0 </span> </h4> <p class="njekq z1v6e dark:text-neutral-500"> Visitors are viewing website from the desktop device. </p> </div> <!-- Stats --> <div class="njekq"> <!-- Grid --> <div class="i80r8 xyr2a jrfak"> <!-- Card --> <div class="e5zms efs5t sx2o3 kq7zk dark:border-neutral-700 awdil"> <img class="h21yx i2yt4 btpd5" src="../../assets/svg/brands/chrome.svg" alt="Chrome Logo"> <p class="pdak6 p9tun dark:text-neutral-200"> Chrome </p> <p class="rozsb a23oc p9tun dark:text-neutral-200"> 0 </p> </div> <!-- End Card --> <!-- Card --> <div class="e5zms efs5t sx2o3 kq7zk dark:border-neutral-700 awdil"> <img class="h21yx i2yt4 btpd5" src="../../assets/svg/brands/firefox.svg" alt="Firefox Logo"> <p class="pdak6 p9tun dark:text-neutral-200"> Firefox </p> <p class="rozsb a23oc p9tun dark:text-neutral-200"> 0 </p> </div> <!-- End Card --> <!-- Card --> <div class="e5zms efs5t sx2o3 kq7zk dark:border-neutral-700 awdil"> <img class="h21yx i2yt4 btpd5" src="../../assets/svg/brands/safari.svg" alt="Safari Logo"> <p class="pdak6 p9tun dark:text-neutral-200"> Safari </p> <p class="rozsb a23oc p9tun dark:text-neutral-200"> 0 </p> </div> <!-- End Card --> </div> <!-- End Grid --> </div> <!-- End Stats --> <div class="njekq"> <!-- Alert --> <div class="m9vu4 efs5t kq7zk dxf1r ycht7 bdby8 viac4 dark:bg-neutral-800 dark:border-neutral-700" role="alert" tabindex="-1" aria-labelledby="hs-pro-dpna-label"> <div class="flex u96nv"> <svg class="jatgu h21yx dpsu3 p9tun 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="ce341"> <h3 id="hs-pro-dpna-label" class="pdak6 p9tun rozsb dark:text-white"> Push notifications </h3> <p class="pdak6 shh18 dark:text-neutral-400"> Automatically send me notifications </p> </div> <!-- Switch/Toggle --> <div class="flex m0bgt items-center"> <label for="hs-pro-dbcpns" class="tliya">On</label> <div class="relative ykxda"> <input type="checkbox" id="hs-pro-dbcpns" class="relative pmpb0 yk1eh e4z6u ac0xq xk8dv fq13s lli30 cursor-pointer t2tr4 lufa4 is14d tsnw9 xwjcj c3i4e 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 mgdhi uij5b vclh7 z18uw t1qhx pfmzk s1en8 nosy7 s6hqp kc9wk ipz0b nunmy lfy06 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=2.5.0"></script> </body> </html>
<!-- Browsers Card --> <div class="ly3m4 flex pz3xv m9vu4 efs5t kq7zk ycht7 dxf1r dark:bg-neutral-800 dark:border-neutral-700"> <!-- Header --> <div class="lc5w1 wdbkl flex m0bgt items-center"> <h2 class="if1eb ykxda rozsb p9tun dark:text-neutral-200"> Browsers </h2> </div> <!-- End Header --> <!-- Body --> <div class="flex pz3xv m0bgt ly3m4 ddjby xljyb"> <div> <h4 class="nzzev jv4dc f4yq1 oqj39 dark:text-blue-500"> <span class="isq74 c0i0q t7g7b qp5nw fq13s"> 0 </span> </h4> <p class="njekq z1v6e dark:text-neutral-500"> Visitors are viewing website from the desktop device. </p> </div> <!-- Stats --> <div class="njekq"> <!-- Grid --> <div class="i80r8 xyr2a jrfak"> <!-- Card --> <div class="e5zms efs5t sx2o3 kq7zk dark:border-neutral-700 awdil"> <img class="h21yx i2yt4 btpd5" src="../../assets/svg/brands/chrome.svg" alt="Chrome Logo"> <p class="pdak6 p9tun dark:text-neutral-200"> Chrome </p> <p class="rozsb a23oc p9tun dark:text-neutral-200"> 0 </p> </div> <!-- End Card --> <!-- Card --> <div class="e5zms efs5t sx2o3 kq7zk dark:border-neutral-700 awdil"> <img class="h21yx i2yt4 btpd5" src="../../assets/svg/brands/firefox.svg" alt="Firefox Logo"> <p class="pdak6 p9tun dark:text-neutral-200"> Firefox </p> <p class="rozsb a23oc p9tun dark:text-neutral-200"> 0 </p> </div> <!-- End Card --> <!-- Card --> <div class="e5zms efs5t sx2o3 kq7zk dark:border-neutral-700 awdil"> <img class="h21yx i2yt4 btpd5" src="../../assets/svg/brands/safari.svg" alt="Safari Logo"> <p class="pdak6 p9tun dark:text-neutral-200"> Safari </p> <p class="rozsb a23oc p9tun dark:text-neutral-200"> 0 </p> </div> <!-- End Card --> </div> <!-- End Grid --> </div> <!-- End Stats --> <div class="njekq"> <!-- Alert --> <div class="m9vu4 efs5t kq7zk dxf1r ycht7 bdby8 viac4 dark:bg-neutral-800 dark:border-neutral-700" role="alert" tabindex="-1" aria-labelledby="hs-pro-dpna-label"> <div class="flex u96nv"> <svg class="jatgu h21yx dpsu3 p9tun 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="ce341"> <h3 id="hs-pro-dpna-label" class="pdak6 p9tun rozsb dark:text-white"> Push notifications </h3> <p class="pdak6 shh18 dark:text-neutral-400"> Automatically send me notifications </p> </div> <!-- Switch/Toggle --> <div class="flex m0bgt items-center"> <label for="hs-pro-dbcpns" class="tliya">On</label> <div class="relative ykxda"> <input type="checkbox" id="hs-pro-dbcpns" class="relative pmpb0 yk1eh e4z6u ac0xq xk8dv fq13s lli30 cursor-pointer t2tr4 lufa4 is14d tsnw9 xwjcj c3i4e 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 mgdhi uij5b vclh7 z18uw t1qhx pfmzk s1en8 nosy7 s6hqp kc9wk ipz0b nunmy lfy06 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 kby5p ly3m4"> <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 pz3xv m9vu4 efs5t kq7zk shadow-[0_4px_6px_0px_rgba(0,0,0,0.03)] dxf1r dark:bg-neutral-800 dark:border-neutral-700"><!-- Header --> <div class="vcvf1 kq7zk dark:border-neutral-700"> <!-- Page Header --> <div class="l3ebx xljyb flex m0bgt items-center tlb9g"> <h2 class="ykxda rozsb p9tun dark:text-neutral-200"> Preline </h2> <div class="flex tiner items-center dsp0o"> <!-- Calendar Dropdown --> <div class="hs-dropdown [--auto-close:inside] [--placement:top-right] s2k2k"> <button id="hs-pro-dnic" type="button" class="g0aw2 s2k2k items-center bqo3s f4yq1 awdil efs5t kq7zk m9vu4 p9tun ycht7 r73cx xwjcj c3i4e r0fp5 ckvf9 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="h21yx uvg3z vs0hq" 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="h21yx csib9 vs0hq" 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 u3v2m transition-[opacity,margin] duration opacity-0 hidden le6w0 m9vu4 dxf1r 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="e5zms z4ia7"> <!-- Months --> <div class="i80r8 tdmf2 items-center u96nv z2x3v wdbkl"> <!-- Prev Button --> <div class="lf2i4"> <button type="button" class="a0c5w flex dry15 items-center p9tun um5nz lli30 xwjcj c3i4e r0fp5 ip2jr dark:text-neutral-400 dark:hover:bg-neutral-800 dark:focus:bg-neutral-800"> <svg class="h21yx ufena" 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="ckb3b flex dry15 items-center ernqe"> <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 ifji7 qaxp8 cursor-pointer vf6o6 f4yq1 p9tun t76na r0fp5 zgjk6 vwcz4 cqqxl ycc3s dark:text-neutral-200 dark:hover:text-neutral-300 dark:focus:text-neutral-300", "dropdownClasses": "jglyo le6w0 n0c4a dgfr2 lavrb z4ia7 m9vu4 efs5t kq7zk awdil cxteb apqjg bgcuw zq2x8 oasqe c7c11 iz02v dark:[&::-webkit-scrollbar-track]:bg-neutral-700 dark:[&::-webkit-scrollbar-thumb]:bg-neutral-500 dark:bg-neutral-900 dark:border-neutral-700", "optionClasses": "g0aw2 qaxp8 pdak6 p9tun cursor-pointer um5nz awdil r0fp5 ip2jr dark:bg-neutral-900 dark:hover:bg-neutral-800 dark:text-neutral-200 dark:focus:bg-neutral-800", "optionTemplate": "<div class=\"flex m0bgt items-center qaxp8 \"><span data-title></span><span class=\"hidden hs-selected:block \"><svg class=\"h21yx vs0hq p9tun 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="p9tun 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 ifji7 qaxp8 cursor-pointer vf6o6 f4yq1 p9tun t76na r0fp5 zgjk6 vwcz4 cqqxl ycc3s dark:text-neutral-200 dark:hover:text-neutral-300 dark:focus:text-neutral-300", "dropdownClasses": "jglyo le6w0 f2107 dgfr2 lavrb z4ia7 m9vu4 efs5t kq7zk awdil cxteb apqjg bgcuw zq2x8 oasqe c7c11 iz02v dark:[&::-webkit-scrollbar-track]:bg-neutral-700 dark:[&::-webkit-scrollbar-thumb]:bg-neutral-500 dark:bg-neutral-900 dark:border-neutral-700", "optionClasses": "g0aw2 qaxp8 pdak6 p9tun cursor-pointer um5nz awdil r0fp5 ip2jr dark:bg-neutral-900 dark:hover:bg-neutral-800 dark:text-neutral-200 dark:focus:bg-neutral-800", "optionTemplate": "<div class=\"flex m0bgt items-center qaxp8 \"><span data-title></span><span class=\"hidden hs-selected:block \"><svg class=\"h21yx vs0hq p9tun 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="lf2i4 flex tiner"> <button type="button" class=" a0c5w flex dry15 items-center p9tun um5nz lli30 xwjcj c3i4e r0fp5 ip2jr dark:text-neutral-400 dark:hover:bg-neutral-800 dark:focus:bg-neutral-800"> <svg class="h21yx ufena" 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 e8ho2"> <span class="cu201 vldo9 block a3cw8 pdak6 z1v6e dark:text-neutral-500"> Mo </span> <span class="cu201 vldo9 block a3cw8 pdak6 z1v6e dark:text-neutral-500"> Tu </span> <span class="cu201 vldo9 block a3cw8 pdak6 z1v6e dark:text-neutral-500"> We </span> <span class="cu201 vldo9 block a3cw8 pdak6 z1v6e dark:text-neutral-500"> Th </span> <span class="cu201 vldo9 block a3cw8 pdak6 z1v6e dark:text-neutral-500"> Fr </span> <span class="cu201 vldo9 block a3cw8 pdak6 z1v6e dark:text-neutral-500"> Sa </span> <span class="cu201 vldo9 block a3cw8 pdak6 z1v6e dark:text-neutral-500"> Su </span> </div> <!-- Weeks --> <!-- Days --> <div class="flex"> <div> <button type="button" class="cu201 yxnrf flex dry15 items-center efs5t xk8dv pdak6 p9tun lli30 f5y0f xgine xwjcj c3i4e r0fp5 j1pd1 itefn dark:text-neutral-200" disabled> 26 </button> </div> <div> <button type="button" class="cu201 yxnrf flex dry15 items-center efs5t xk8dv pdak6 p9tun lli30 f5y0f xgine xwjcj c3i4e r0fp5 j1pd1 itefn dark:text-neutral-200" disabled> 27 </button> </div> <div> <button type="button" class="cu201 yxnrf flex dry15 items-center efs5t xk8dv pdak6 p9tun lli30 f5y0f xgine xwjcj c3i4e r0fp5 j1pd1 itefn dark:text-neutral-200" disabled> 28 </button> </div> <div> <button type="button" class="cu201 yxnrf flex dry15 items-center efs5t xk8dv pdak6 p9tun lli30 f5y0f xgine xwjcj c3i4e r0fp5 j1pd1 itefn dark:text-neutral-200" disabled> 29 </button> </div> <div> <button type="button" class="cu201 yxnrf flex dry15 items-center efs5t xk8dv pdak6 p9tun lli30 f5y0f xgine xwjcj c3i4e r0fp5 j1pd1 itefn dark:text-neutral-200" disabled> 30 </button> </div> <div> <button type="button" class="cu201 yxnrf flex dry15 items-center efs5t xk8dv pdak6 p9tun lli30 f5y0f xgine xwjcj c3i4e r0fp5 j1pd1 itefn dark:text-neutral-200"> 1 </button> </div> <div> <button type="button" class="cu201 yxnrf flex dry15 items-center efs5t xk8dv pdak6 p9tun lli30 f5y0f xgine xwjcj c3i4e r0fp5 j1pd1 itefn dark:text-neutral-200"> 2 </button> </div> </div> <!-- Days --> <!-- Days --> <div class="flex"> <div> <button type="button" class="cu201 yxnrf flex dry15 items-center efs5t xk8dv pdak6 p9tun lli30 f5y0f xgine xwjcj c3i4e r0fp5 j1pd1 itefn dark:text-neutral-200"> 3 </button> </div> <div> <button type="button" class="cu201 yxnrf flex dry15 items-center efs5t xk8dv pdak6 p9tun lli30 f5y0f xgine xwjcj c3i4e r0fp5 j1pd1 itefn dark:text-neutral-200"> 4 </button> </div> <div > <button type="button" class="cu201 yxnrf flex dry15 items-center efs5t xk8dv pdak6 p9tun lli30 f5y0f xgine xwjcj c3i4e r0fp5 j1pd1 itefn dark:text-neutral-200"> 5 </button> </div> <div > <button type="button" class="cu201 yxnrf flex dry15 items-center efs5t xk8dv pdak6 p9tun lli30 f5y0f xgine xwjcj c3i4e r0fp5 j1pd1 itefn dark:text-neutral-200"> 6 </button> </div> <div > <button type="button" class="cu201 yxnrf flex dry15 items-center efs5t xk8dv pdak6 p9tun lli30 f5y0f xgine xwjcj c3i4e r0fp5 j1pd1 itefn dark:text-neutral-200"> 7 </button> </div> <div > <button type="button" class="cu201 yxnrf flex dry15 items-center efs5t xk8dv pdak6 p9tun lli30 f5y0f xgine xwjcj c3i4e r0fp5 j1pd1 itefn dark:text-neutral-200"> 8 </button> </div> <div > <button type="button" class="cu201 yxnrf flex dry15 items-center efs5t xk8dv pdak6 p9tun lli30 f5y0f xgine xwjcj c3i4e r0fp5 j1pd1 itefn dark:text-neutral-200"> 9 </button> </div> </div> <!-- Days --> <!-- Days --> <div class="flex"> <div > <button type="button" class="cu201 yxnrf flex dry15 items-center efs5t xk8dv pdak6 p9tun lli30 f5y0f xgine xwjcj c3i4e r0fp5 j1pd1 itefn dark:text-neutral-200"> 10 </button> </div> <div > <button type="button" class="cu201 yxnrf flex dry15 items-center efs5t xk8dv pdak6 p9tun lli30 f5y0f xgine xwjcj c3i4e r0fp5 j1pd1 itefn dark:text-neutral-200"> 11 </button> </div> <div > <button type="button" class="cu201 yxnrf flex dry15 items-center efs5t xk8dv pdak6 p9tun lli30 f5y0f xgine xwjcj c3i4e r0fp5 j1pd1 itefn dark:text-neutral-200"> 12 </button> </div> <div> <button type="button" class="cu201 yxnrf flex dry15 items-center efs5t xk8dv pdak6 p9tun lli30 f5y0f xgine xwjcj c3i4e r0fp5 j1pd1 itefn dark:text-neutral-200"> 13 </button> </div> <div> <button type="button" class="cu201 yxnrf flex dry15 items-center efs5t xk8dv pdak6 p9tun lli30 f5y0f xgine xwjcj c3i4e r0fp5 j1pd1 itefn dark:text-neutral-200"> 14 </button> </div> <div> <button type="button" class="cu201 yxnrf flex dry15 items-center efs5t xk8dv pdak6 p9tun lli30 f5y0f xgine xwjcj c3i4e r0fp5 j1pd1 itefn dark:text-neutral-200"> 15 </button> </div> <div> <button type="button" class="cu201 yxnrf flex dry15 items-center efs5t xk8dv pdak6 p9tun lli30 f5y0f xgine xwjcj c3i4e r0fp5 j1pd1 itefn dark:text-neutral-200"> 16 </button> </div> </div> <!-- Days --> <!-- Days --> <div class="flex"> <div> <button type="button" class="cu201 yxnrf flex dry15 items-center efs5t xk8dv pdak6 p9tun lli30 f5y0f xgine xwjcj c3i4e r0fp5 j1pd1 itefn dark:text-neutral-200"> 17 </button> </div> <div> <button type="button" class="cu201 yxnrf flex dry15 items-center efs5t xk8dv pdak6 p9tun lli30 f5y0f xgine xwjcj c3i4e r0fp5 j1pd1 itefn dark:text-neutral-200"> 18 </button> </div> <div> <button type="button" class="cu201 yxnrf flex dry15 items-center efs5t xk8dv pdak6 p9tun lli30 f5y0f xgine xwjcj c3i4e r0fp5 j1pd1 itefn dark:text-neutral-200"> 19 </button> </div> <div> <button type="button" class="cu201 yxnrf flex dry15 items-center x3r8b efs5t xk8dv pdak6 f4yq1 hrliy f5y0f lli30 dark:bg-indigo-500 xwjcj c3i4e r0fp5 ip2jr dark:hover:border-neutral-700"> 20 </button> </div> <div> <button type="button" class="cu201 yxnrf flex dry15 items-center efs5t xk8dv pdak6 p9tun lli30 f5y0f xgine xwjcj c3i4e r0fp5 j1pd1 itefn dark:text-neutral-200"> 21 </button> </div> <div> <button type="button" class="cu201 yxnrf flex dry15 items-center efs5t xk8dv pdak6 p9tun lli30 f5y0f xgine xwjcj c3i4e r0fp5 j1pd1 itefn dark:text-neutral-200"> 22 </button> </div> <div> <button type="button" class="cu201 yxnrf flex dry15 items-center efs5t xk8dv pdak6 p9tun lli30 f5y0f xgine xwjcj c3i4e r0fp5 j1pd1 itefn dark:text-neutral-200"> 23 </button> </div> </div> <!-- Days --> <!-- Days --> <div class="flex"> <div> <button type="button" class="cu201 yxnrf flex dry15 items-center efs5t xk8dv pdak6 p9tun lli30 f5y0f xgine xwjcj c3i4e r0fp5 j1pd1 itefn dark:text-neutral-200"> 24 </button> </div> <div > <button type="button" class="cu201 yxnrf flex dry15 items-center efs5t xk8dv pdak6 p9tun lli30 f5y0f xgine xwjcj c3i4e r0fp5 j1pd1 itefn dark:text-neutral-200"> 25 </button> </div> <div > <button type="button" class="cu201 yxnrf flex dry15 items-center efs5t xk8dv pdak6 p9tun lli30 f5y0f xgine xwjcj c3i4e r0fp5 j1pd1 itefn dark:text-neutral-200"> 26 </button> </div> <div > <button type="button" class="cu201 yxnrf flex dry15 items-center efs5t xk8dv pdak6 p9tun lli30 f5y0f xgine xwjcj c3i4e r0fp5 j1pd1 itefn dark:text-neutral-200"> 27 </button> </div> <div > <button type="button" class="cu201 yxnrf flex dry15 items-center efs5t xk8dv pdak6 p9tun lli30 f5y0f xgine xwjcj c3i4e r0fp5 j1pd1 itefn dark:text-neutral-200"> 28 </button> </div> <div > <button type="button" class="cu201 yxnrf flex dry15 items-center efs5t xk8dv pdak6 p9tun lli30 f5y0f xgine xwjcj c3i4e r0fp5 j1pd1 itefn dark:text-neutral-200"> 29 </button> </div> <div > <button type="button" class="cu201 yxnrf flex dry15 items-center efs5t xk8dv pdak6 p9tun lli30 f5y0f xgine xwjcj c3i4e r0fp5 j1pd1 itefn dark:text-neutral-200"> 30 </button> </div> </div> <!-- Days --> <!-- Days --> <div class="flex"> <div > <button type="button" class="cu201 yxnrf flex dry15 items-center efs5t xk8dv pdak6 p9tun lli30 f5y0f xgine xwjcj c3i4e r0fp5 j1pd1 itefn dark:text-neutral-200"> 31 </button> </div> <div > <button type="button" class="cu201 yxnrf flex dry15 items-center efs5t xk8dv pdak6 p9tun f5y0f xgine lli30 xwjcj c3i4e r0fp5 ip2jr dark:text-neutral-200 dark:hover:border-neutral-500 dark:focus:bg-neutral-700" disabled> 1 </button> </div> <div> <button type="button" class="cu201 yxnrf flex dry15 items-center efs5t xk8dv pdak6 p9tun f5y0f xgine lli30 xwjcj c3i4e r0fp5 ip2jr dark:text-neutral-200 dark:hover:border-neutral-500 dark:focus:bg-neutral-700" disabled> 2 </button> </div> <div> <button type="button" class="cu201 yxnrf flex dry15 items-center efs5t xk8dv pdak6 p9tun f5y0f xgine lli30 xwjcj c3i4e r0fp5 ip2jr dark:text-neutral-200 dark:hover:border-neutral-500 dark:focus:bg-neutral-700" disabled> 3 </button> </div> <div> <button type="button" class="cu201 yxnrf flex dry15 items-center efs5t xk8dv pdak6 p9tun f5y0f xgine lli30 xwjcj c3i4e r0fp5 ip2jr dark:text-neutral-200 dark:hover:border-neutral-500 dark:focus:bg-neutral-700" disabled> 4 </button> </div> <div> <button type="button" class="cu201 yxnrf flex dry15 items-center efs5t xk8dv pdak6 p9tun f5y0f xgine lli30 xwjcj c3i4e r0fp5 ip2jr dark:text-neutral-200 dark:hover:border-neutral-500 dark:focus:bg-neutral-700" disabled> 5 </button> </div> <div> <button type="button" class="cu201 yxnrf flex dry15 items-center efs5t xk8dv pdak6 p9tun f5y0f xgine lli30 xwjcj c3i4e r0fp5 ip2jr 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="bdby8 yi4bp s2k2k items-center dsp0o bqo3s f4yq1 awdil efs5t xk8dv x3r8b hrliy fjrn5 xwjcj c3i4e r0fp5 dg2gp sxn14 dark:focus:ring-indigo-500"> <svg class="hidden bmujp h21yx vs0hq" 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="rzitn xljyb rkm5u"> <!-- Empty State --> <div class="lc5w1 i1yur flex pz3xv dry15 items-center a3cw8"> <svg class="ywmgi huxlp" 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="oxv2h dark:fill-neutral-700"/> <rect x="9" y="20" width="6" height="45" fill="currentColor" class="oxv2h dark:fill-neutral-700"/> <rect x="18" y="25" width="6" height="40" fill="currentColor" class="oxv2h dark:fill-neutral-700"/> <rect x="27" width="6" height="65" fill="currentColor" class="oxv2h dark:fill-neutral-700"/> <rect x="36" y="5" width="6" height="60" fill="currentColor" class="oxv2h dark:fill-neutral-700"/> <rect x="45" y="40" width="6" height="25" fill="currentColor" class="oxv2h dark:fill-neutral-700"/> <rect x="54" y="25" width="6" height="40" fill="currentColor" class="oxv2h dark:fill-neutral-700"/> <rect x="63" y="12" width="6" height="53" fill="currentColor" class="oxv2h dark:fill-neutral-700"/> <rect x="72" width="6" height="65" fill="currentColor" class="oxv2h dark:fill-neutral-700"/> <rect x="81" y="44" width="6" height="21" fill="currentColor" class="oxv2h dark:fill-neutral-700"/> </svg> <div class="sbe6w huxlp"> <p class="jglyo f4yq1 p9tun dark:text-neutral-200"> No data </p> <p class="we17s pdak6 z1v6e dark:text-neutral-500"> No data here yet. We will notify you when there's an update. </p> </div> <button type="button" class="bdby8 viac4 s2k2k items-center dsp0o bqo3s f4yq1 awdil efs5t xk8dv x3r8b hrliy fjrn5 xwjcj c3i4e r0fp5 dg2gp zfu51" data-hs-overlay="#hs-pro-pabchesb"> <svg class="hidden bmujp h21yx vs0hq" 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=2.5.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 = 'uo3aj dsir7 m9vu4 efs5t kq7zk p9tun awdil jr7bp dark:bg-neutral-800 dark:border-neutral-700', wrapperExtClasses = '', seriesClasses = 'd92b5', seriesExtClasses = '', titleClasses = 'rozsb h7cjz zhcbf dhiec p9tun fbqsg dark:!bg-neutral-800 dark:!border-neutral-700 dark:text-neutral-200', titleExtClasses = '', markerClasses = 'js5sw x3v98 uxli5', markerExtClasses = 'xdtqp', valueClasses = 'yhjlq z1v6e g6xpd dark:text-neutral-400', valueExtClasses = '', labelClasses = 'z1v6e 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 lp4ru ${hasTextLabel ? 'yhauy' : ''} 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 pyszz"> <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 = 'uo3aj dsir7 m9vu4 efs5t kq7zk p9tun awdil jr7bp dark:bg-neutral-800 dark:border-neutral-700', wrapperExtClasses = '', seriesClasses = 'yhauy qaxp8 d92b5', seriesExtClasses = '', titleClasses = 'flex m0bgt rozsb h7cjz zhcbf dhiec p9tun fbqsg dark:!bg-neutral-800 dark:!border-neutral-700 dark:text-neutral-200', titleExtClasses = '', markerClasses = 'js5sw x3v98 uxli5', markerExtClasses = 'xdtqp', valueClasses = 'yhjlq z1v6e g6xpd dark:text-neutral-400', valueExtClasses = '', labelClasses = 'z1v6e dark:text-neutral-400 vzx5m', 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="ykxda ufena kacov" 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="ykxda ufena kacov" 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} lp4ru 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 pyszz"> ${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 ernqe ${!isDifferenceIsNull ? (isGrowing ? 'fq7i5' : 'f5ifd') : ''} vzx5m"> ${!isDifferenceIsNull ? icon : ''} <span class="ykxda pdak6"> ${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 = 'uo3aj dsir7 m9vu4 efs5t kq7zk p9tun awdil jr7bp dark:bg-neutral-800 dark:border-neutral-700', wrapperExtClasses = '', seriesClasses = 'yhauy qaxp8 d92b5', seriesExtClasses = '', titleClasses = 'flex m0bgt rozsb h7cjz zhcbf dhiec p9tun fbqsg dark:!bg-neutral-800 dark:!border-neutral-700 dark:text-neutral-200', titleExtClasses = '', markerClasses = 'js5sw x3v98 uxli5', markerExtClasses = 'xdtqp', valueClasses = 'yhjlq z1v6e g6xpd dark:text-neutral-400', valueExtClasses = '', labelClasses = 'z1v6e dark:text-neutral-400 vzx5m', 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="ykxda ufena kacov" 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="ykxda ufena kacov" 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 lp4ru ${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 d92b5 "> <div class="apexcharts-tooltip-y-group pyszz"> <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 ernqe ${!isDifferenceIsNull ? (isGrowing ? 'fq7i5' : 'f5ifd') : ''} vzx5m"> ${!isDifferenceIsNull ? icon : ''} <span class="ykxda pdak6"> ${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: 'uheuq', labelDivider: ':', labelExtClasses: 'vzx5m' }); } }, 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="vcvf1 kq7zk dark:border-neutral-700"> <!-- Page Header --> <div class="l3ebx xljyb flex m0bgt items-center tlb9g"> <h2 class="ykxda rozsb p9tun dark:text-neutral-200"> Preline </h2> <div class="flex tiner items-center dsp0o"> <!-- Calendar Dropdown --> <div class="hs-dropdown [--auto-close:inside] [--placement:top-right] s2k2k"> <button id="hs-pro-dnic" type="button" class="g0aw2 s2k2k items-center bqo3s f4yq1 awdil efs5t kq7zk m9vu4 p9tun ycht7 r73cx xwjcj c3i4e r0fp5 ckvf9 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="h21yx uvg3z vs0hq" 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="h21yx csib9 vs0hq" 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 u3v2m transition-[opacity,margin] duration opacity-0 hidden le6w0 m9vu4 dxf1r 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="e5zms z4ia7"> <!-- Months --> <div class="i80r8 tdmf2 items-center u96nv z2x3v wdbkl"> <!-- Prev Button --> <div class="lf2i4"> <button type="button" class="a0c5w flex dry15 items-center p9tun um5nz lli30 xwjcj c3i4e r0fp5 ip2jr dark:text-neutral-400 dark:hover:bg-neutral-800 dark:focus:bg-neutral-800"> <svg class="h21yx ufena" 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="ckb3b flex dry15 items-center ernqe"> <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 ifji7 qaxp8 cursor-pointer vf6o6 f4yq1 p9tun t76na r0fp5 zgjk6 vwcz4 cqqxl ycc3s dark:text-neutral-200 dark:hover:text-neutral-300 dark:focus:text-neutral-300", "dropdownClasses": "jglyo le6w0 n0c4a dgfr2 lavrb z4ia7 m9vu4 efs5t kq7zk awdil cxteb apqjg bgcuw zq2x8 oasqe c7c11 iz02v dark:[&::-webkit-scrollbar-track]:bg-neutral-700 dark:[&::-webkit-scrollbar-thumb]:bg-neutral-500 dark:bg-neutral-900 dark:border-neutral-700", "optionClasses": "g0aw2 qaxp8 pdak6 p9tun cursor-pointer um5nz awdil r0fp5 ip2jr dark:bg-neutral-900 dark:hover:bg-neutral-800 dark:text-neutral-200 dark:focus:bg-neutral-800", "optionTemplate": "<div class=\"flex m0bgt items-center qaxp8 \"><span data-title></span><span class=\"hidden hs-selected:block \"><svg class=\"h21yx vs0hq p9tun 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="p9tun 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 ifji7 qaxp8 cursor-pointer vf6o6 f4yq1 p9tun t76na r0fp5 zgjk6 vwcz4 cqqxl ycc3s dark:text-neutral-200 dark:hover:text-neutral-300 dark:focus:text-neutral-300", "dropdownClasses": "jglyo le6w0 f2107 dgfr2 lavrb z4ia7 m9vu4 efs5t kq7zk awdil cxteb apqjg bgcuw zq2x8 oasqe c7c11 iz02v dark:[&::-webkit-scrollbar-track]:bg-neutral-700 dark:[&::-webkit-scrollbar-thumb]:bg-neutral-500 dark:bg-neutral-900 dark:border-neutral-700", "optionClasses": "g0aw2 qaxp8 pdak6 p9tun cursor-pointer um5nz awdil r0fp5 ip2jr dark:bg-neutral-900 dark:hover:bg-neutral-800 dark:text-neutral-200 dark:focus:bg-neutral-800", "optionTemplate": "<div class=\"flex m0bgt items-center qaxp8 \"><span data-title></span><span class=\"hidden hs-selected:block \"><svg class=\"h21yx vs0hq p9tun 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="lf2i4 flex tiner"> <button type="button" class=" a0c5w flex dry15 items-center p9tun um5nz lli30 xwjcj c3i4e r0fp5 ip2jr dark:text-neutral-400 dark:hover:bg-neutral-800 dark:focus:bg-neutral-800"> <svg class="h21yx ufena" 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 e8ho2"> <span class="cu201 vldo9 block a3cw8 pdak6 z1v6e dark:text-neutral-500"> Mo </span> <span class="cu201 vldo9 block a3cw8 pdak6 z1v6e dark:text-neutral-500"> Tu </span> <span class="cu201 vldo9 block a3cw8 pdak6 z1v6e dark:text-neutral-500"> We </span> <span class="cu201 vldo9 block a3cw8 pdak6 z1v6e dark:text-neutral-500"> Th </span> <span class="cu201 vldo9 block a3cw8 pdak6 z1v6e dark:text-neutral-500"> Fr </span> <span class="cu201 vldo9 block a3cw8 pdak6 z1v6e dark:text-neutral-500"> Sa </span> <span class="cu201 vldo9 block a3cw8 pdak6 z1v6e dark:text-neutral-500"> Su </span> </div> <!-- Weeks --> <!-- Days --> <div class="flex"> <div> <button type="button" class="cu201 yxnrf flex dry15 items-center efs5t xk8dv pdak6 p9tun lli30 f5y0f xgine xwjcj c3i4e r0fp5 j1pd1 itefn dark:text-neutral-200" disabled> 26 </button> </div> <div> <button type="button" class="cu201 yxnrf flex dry15 items-center efs5t xk8dv pdak6 p9tun lli30 f5y0f xgine xwjcj c3i4e r0fp5 j1pd1 itefn dark:text-neutral-200" disabled> 27 </button> </div> <div> <button type="button" class="cu201 yxnrf flex dry15 items-center efs5t xk8dv pdak6 p9tun lli30 f5y0f xgine xwjcj c3i4e r0fp5 j1pd1 itefn dark:text-neutral-200" disabled> 28 </button> </div> <div> <button type="button" class="cu201 yxnrf flex dry15 items-center efs5t xk8dv pdak6 p9tun lli30 f5y0f xgine xwjcj c3i4e r0fp5 j1pd1 itefn dark:text-neutral-200" disabled> 29 </button> </div> <div> <button type="button" class="cu201 yxnrf flex dry15 items-center efs5t xk8dv pdak6 p9tun lli30 f5y0f xgine xwjcj c3i4e r0fp5 j1pd1 itefn dark:text-neutral-200" disabled> 30 </button> </div> <div> <button type="button" class="cu201 yxnrf flex dry15 items-center efs5t xk8dv pdak6 p9tun lli30 f5y0f xgine xwjcj c3i4e r0fp5 j1pd1 itefn dark:text-neutral-200"> 1 </button> </div> <div> <button type="button" class="cu201 yxnrf flex dry15 items-center efs5t xk8dv pdak6 p9tun lli30 f5y0f xgine xwjcj c3i4e r0fp5 j1pd1 itefn dark:text-neutral-200"> 2 </button> </div> </div> <!-- Days --> <!-- Days --> <div class="flex"> <div> <button type="button" class="cu201 yxnrf flex dry15 items-center efs5t xk8dv pdak6 p9tun lli30 f5y0f xgine xwjcj c3i4e r0fp5 j1pd1 itefn dark:text-neutral-200"> 3 </button> </div> <div> <button type="button" class="cu201 yxnrf flex dry15 items-center efs5t xk8dv pdak6 p9tun lli30 f5y0f xgine xwjcj c3i4e r0fp5 j1pd1 itefn dark:text-neutral-200"> 4 </button> </div> <div > <button type="button" class="cu201 yxnrf flex dry15 items-center efs5t xk8dv pdak6 p9tun lli30 f5y0f xgine xwjcj c3i4e r0fp5 j1pd1 itefn dark:text-neutral-200"> 5 </button> </div> <div > <button type="button" class="cu201 yxnrf flex dry15 items-center efs5t xk8dv pdak6 p9tun lli30 f5y0f xgine xwjcj c3i4e r0fp5 j1pd1 itefn dark:text-neutral-200"> 6 </button> </div> <div > <button type="button" class="cu201 yxnrf flex dry15 items-center efs5t xk8dv pdak6 p9tun lli30 f5y0f xgine xwjcj c3i4e r0fp5 j1pd1 itefn dark:text-neutral-200"> 7 </button> </div> <div > <button type="button" class="cu201 yxnrf flex dry15 items-center efs5t xk8dv pdak6 p9tun lli30 f5y0f xgine xwjcj c3i4e r0fp5 j1pd1 itefn dark:text-neutral-200"> 8 </button> </div> <div > <button type="button" class="cu201 yxnrf flex dry15 items-center efs5t xk8dv pdak6 p9tun lli30 f5y0f xgine xwjcj c3i4e r0fp5 j1pd1 itefn dark:text-neutral-200"> 9 </button> </div> </div> <!-- Days --> <!-- Days --> <div class="flex"> <div > <button type="button" class="cu201 yxnrf flex dry15 items-center efs5t xk8dv pdak6 p9tun lli30 f5y0f xgine xwjcj c3i4e r0fp5 j1pd1 itefn dark:text-neutral-200"> 10 </button> </div> <div > <button type="button" class="cu201 yxnrf flex dry15 items-center efs5t xk8dv pdak6 p9tun lli30 f5y0f xgine xwjcj c3i4e r0fp5 j1pd1 itefn dark:text-neutral-200"> 11 </button> </div> <div > <button type="button" class="cu201 yxnrf flex dry15 items-center efs5t xk8dv pdak6 p9tun lli30 f5y0f xgine xwjcj c3i4e r0fp5 j1pd1 itefn dark:text-neutral-200"> 12 </button> </div> <div> <button type="button" class="cu201 yxnrf flex dry15 items-center efs5t xk8dv pdak6 p9tun lli30 f5y0f xgine xwjcj c3i4e r0fp5 j1pd1 itefn dark:text-neutral-200"> 13 </button> </div> <div> <button type="button" class="cu201 yxnrf flex dry15 items-center efs5t xk8dv pdak6 p9tun lli30 f5y0f xgine xwjcj c3i4e r0fp5 j1pd1 itefn dark:text-neutral-200"> 14 </button> </div> <div> <button type="button" class="cu201 yxnrf flex dry15 items-center efs5t xk8dv pdak6 p9tun lli30 f5y0f xgine xwjcj c3i4e r0fp5 j1pd1 itefn dark:text-neutral-200"> 15 </button> </div> <div> <button type="button" class="cu201 yxnrf flex dry15 items-center efs5t xk8dv pdak6 p9tun lli30 f5y0f xgine xwjcj c3i4e r0fp5 j1pd1 itefn dark:text-neutral-200"> 16 </button> </div> </div> <!-- Days --> <!-- Days --> <div class="flex"> <div> <button type="button" class="cu201 yxnrf flex dry15 items-center efs5t xk8dv pdak6 p9tun lli30 f5y0f xgine xwjcj c3i4e r0fp5 j1pd1 itefn dark:text-neutral-200"> 17 </button> </div> <div> <button type="button" class="cu201 yxnrf flex dry15 items-center efs5t xk8dv pdak6 p9tun lli30 f5y0f xgine xwjcj c3i4e r0fp5 j1pd1 itefn dark:text-neutral-200"> 18 </button> </div> <div> <button type="button" class="cu201 yxnrf flex dry15 items-center efs5t xk8dv pdak6 p9tun lli30 f5y0f xgine xwjcj c3i4e r0fp5 j1pd1 itefn dark:text-neutral-200"> 19 </button> </div> <div> <button type="button" class="cu201 yxnrf flex dry15 items-center x3r8b efs5t xk8dv pdak6 f4yq1 hrliy f5y0f lli30 dark:bg-indigo-500 xwjcj c3i4e r0fp5 ip2jr dark:hover:border-neutral-700"> 20 </button> </div> <div> <button type="button" class="cu201 yxnrf flex dry15 items-center efs5t xk8dv pdak6 p9tun lli30 f5y0f xgine xwjcj c3i4e r0fp5 j1pd1 itefn dark:text-neutral-200"> 21 </button> </div> <div> <button type="button" class="cu201 yxnrf flex dry15 items-center efs5t xk8dv pdak6 p9tun lli30 f5y0f xgine xwjcj c3i4e r0fp5 j1pd1 itefn dark:text-neutral-200"> 22 </button> </div> <div> <button type="button" class="cu201 yxnrf flex dry15 items-center efs5t xk8dv pdak6 p9tun lli30 f5y0f xgine xwjcj c3i4e r0fp5 j1pd1 itefn dark:text-neutral-200"> 23 </button> </div> </div> <!-- Days --> <!-- Days --> <div class="flex"> <div> <button type="button" class="cu201 yxnrf flex dry15 items-center efs5t xk8dv pdak6 p9tun lli30 f5y0f xgine xwjcj c3i4e r0fp5 j1pd1 itefn dark:text-neutral-200"> 24 </button> </div> <div > <button type="button" class="cu201 yxnrf flex dry15 items-center efs5t xk8dv pdak6 p9tun lli30 f5y0f xgine xwjcj c3i4e r0fp5 j1pd1 itefn dark:text-neutral-200"> 25 </button> </div> <div > <button type="button" class="cu201 yxnrf flex dry15 items-center efs5t xk8dv pdak6 p9tun lli30 f5y0f xgine xwjcj c3i4e r0fp5 j1pd1 itefn dark:text-neutral-200"> 26 </button> </div> <div > <button type="button" class="cu201 yxnrf flex dry15 items-center efs5t xk8dv pdak6 p9tun lli30 f5y0f xgine xwjcj c3i4e r0fp5 j1pd1 itefn dark:text-neutral-200"> 27 </button> </div> <div > <button type="button" class="cu201 yxnrf flex dry15 items-center efs5t xk8dv pdak6 p9tun lli30 f5y0f xgine xwjcj c3i4e r0fp5 j1pd1 itefn dark:text-neutral-200"> 28 </button> </div> <div > <button type="button" class="cu201 yxnrf flex dry15 items-center efs5t xk8dv pdak6 p9tun lli30 f5y0f xgine xwjcj c3i4e r0fp5 j1pd1 itefn dark:text-neutral-200"> 29 </button> </div> <div > <button type="button" class="cu201 yxnrf flex dry15 items-center efs5t xk8dv pdak6 p9tun lli30 f5y0f xgine xwjcj c3i4e r0fp5 j1pd1 itefn dark:text-neutral-200"> 30 </button> </div> </div> <!-- Days --> <!-- Days --> <div class="flex"> <div > <button type="button" class="cu201 yxnrf flex dry15 items-center efs5t xk8dv pdak6 p9tun lli30 f5y0f xgine xwjcj c3i4e r0fp5 j1pd1 itefn dark:text-neutral-200"> 31 </button> </div> <div > <button type="button" class="cu201 yxnrf flex dry15 items-center efs5t xk8dv pdak6 p9tun f5y0f xgine lli30 xwjcj c3i4e r0fp5 ip2jr dark:text-neutral-200 dark:hover:border-neutral-500 dark:focus:bg-neutral-700" disabled> 1 </button> </div> <div> <button type="button" class="cu201 yxnrf flex dry15 items-center efs5t xk8dv pdak6 p9tun f5y0f xgine lli30 xwjcj c3i4e r0fp5 ip2jr dark:text-neutral-200 dark:hover:border-neutral-500 dark:focus:bg-neutral-700" disabled> 2 </button> </div> <div> <button type="button" class="cu201 yxnrf flex dry15 items-center efs5t xk8dv pdak6 p9tun f5y0f xgine lli30 xwjcj c3i4e r0fp5 ip2jr dark:text-neutral-200 dark:hover:border-neutral-500 dark:focus:bg-neutral-700" disabled> 3 </button> </div> <div> <button type="button" class="cu201 yxnrf flex dry15 items-center efs5t xk8dv pdak6 p9tun f5y0f xgine lli30 xwjcj c3i4e r0fp5 ip2jr dark:text-neutral-200 dark:hover:border-neutral-500 dark:focus:bg-neutral-700" disabled> 4 </button> </div> <div> <button type="button" class="cu201 yxnrf flex dry15 items-center efs5t xk8dv pdak6 p9tun f5y0f xgine lli30 xwjcj c3i4e r0fp5 ip2jr dark:text-neutral-200 dark:hover:border-neutral-500 dark:focus:bg-neutral-700" disabled> 5 </button> </div> <div> <button type="button" class="cu201 yxnrf flex dry15 items-center efs5t xk8dv pdak6 p9tun f5y0f xgine lli30 xwjcj c3i4e r0fp5 ip2jr 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="bdby8 yi4bp s2k2k items-center dsp0o bqo3s f4yq1 awdil efs5t xk8dv x3r8b hrliy fjrn5 xwjcj c3i4e r0fp5 dg2gp sxn14 dark:focus:ring-indigo-500"> <svg class="hidden bmujp h21yx vs0hq" 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="rzitn xljyb rkm5u"> <!-- Empty State --> <div class="lc5w1 i1yur flex pz3xv dry15 items-center a3cw8"> <svg class="ywmgi huxlp" 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="oxv2h dark:fill-neutral-700"/> <rect x="9" y="20" width="6" height="45" fill="currentColor" class="oxv2h dark:fill-neutral-700"/> <rect x="18" y="25" width="6" height="40" fill="currentColor" class="oxv2h dark:fill-neutral-700"/> <rect x="27" width="6" height="65" fill="currentColor" class="oxv2h dark:fill-neutral-700"/> <rect x="36" y="5" width="6" height="60" fill="currentColor" class="oxv2h dark:fill-neutral-700"/> <rect x="45" y="40" width="6" height="25" fill="currentColor" class="oxv2h dark:fill-neutral-700"/> <rect x="54" y="25" width="6" height="40" fill="currentColor" class="oxv2h dark:fill-neutral-700"/> <rect x="63" y="12" width="6" height="53" fill="currentColor" class="oxv2h dark:fill-neutral-700"/> <rect x="72" width="6" height="65" fill="currentColor" class="oxv2h dark:fill-neutral-700"/> <rect x="81" y="44" width="6" height="21" fill="currentColor" class="oxv2h dark:fill-neutral-700"/> </svg> <div class="sbe6w huxlp"> <p class="jglyo f4yq1 p9tun dark:text-neutral-200"> No data </p> <p class="we17s pdak6 z1v6e dark:text-neutral-500"> No data here yet. We will notify you when there's an update. </p> </div> <button type="button" class="bdby8 viac4 s2k2k items-center dsp0o bqo3s f4yq1 awdil efs5t xk8dv x3r8b hrliy fjrn5 xwjcj c3i4e r0fp5 dg2gp zfu51" data-hs-overlay="#hs-pro-pabchesb"> <svg class="hidden bmujp h21yx vs0hq" 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 kby5p ly3m4"> <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="lc5w1 wfoet flex pz3xv dry15 items-center a3cw8"> <svg class="ywmgi huxlp btpd5" 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="g4ri5 dark:fill-neutral-800"/> <rect x="27" y="50.5" width="124" height="39" rx="7.5" stroke="currentColor" class="qsp07 dark:stroke-neutral-700/10"/> <rect x="34.5" y="58" width="24" height="24" rx="4" fill="currentColor" class="z7ij7 dark:fill-neutral-700/30"/> <rect x="66.5" y="61" width="60" height="6" rx="3" fill="currentColor" class="z7ij7 dark:fill-neutral-700/30"/> <rect x="66.5" y="73" width="77" height="6" rx="3" fill="currentColor" class="z7ij7 dark:fill-neutral-700/30"/> <rect x="19.5" y="28.5" width="139" height="39" rx="7.5" fill="currentColor" class="g4ri5 dark:fill-neutral-800"/> <rect x="19.5" y="28.5" width="139" height="39" rx="7.5" stroke="currentColor" class="wpm6b dark:stroke-neutral-700/30"/> <rect x="27" y="36" width="24" height="24" rx="4" fill="currentColor" class="an5ob dark:fill-neutral-700/70"/> <rect x="59" y="39" width="60" height="6" rx="3" fill="currentColor" class="an5ob dark:fill-neutral-700/70"/> <rect x="59" y="51" width="92" height="6" rx="3" fill="currentColor" class="an5ob dark:fill-neutral-700/70"/> <g filter="url(#filter19)"> <rect x="12" y="6" width="154" height="40" rx="8" fill="currentColor" class="g4ri5 dark:fill-neutral-800" shape-rendering="crispEdges"/> <rect x="12.5" y="6.5" width="153" height="39" rx="7.5" stroke="currentColor" class="wpm6b dark:stroke-neutral-700/60" shape-rendering="crispEdges"/> <rect x="20" y="14" width="24" height="24" rx="4" fill="currentColor" class="oxv2h dark:fill-neutral-700 "/> <rect x="52" y="17" width="60" height="6" rx="3" fill="currentColor" class="oxv2h dark:fill-neutral-700"/> <rect x="52" y="29" width="106" height="6" rx="3" fill="currentColor" class="oxv2h 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="sbe6w huxlp"> <p class="jglyo f4yq1 p9tun dark:text-neutral-200"> No projects </p> <p class="we17s pdak6 z1v6e 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=2.5.0"></script> </body> </html>
<!-- Empty State --> <div class="lc5w1 wfoet flex pz3xv dry15 items-center a3cw8"> <svg class="ywmgi huxlp btpd5" 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="g4ri5 dark:fill-neutral-800"/> <rect x="27" y="50.5" width="124" height="39" rx="7.5" stroke="currentColor" class="qsp07 dark:stroke-neutral-700/10"/> <rect x="34.5" y="58" width="24" height="24" rx="4" fill="currentColor" class="z7ij7 dark:fill-neutral-700/30"/> <rect x="66.5" y="61" width="60" height="6" rx="3" fill="currentColor" class="z7ij7 dark:fill-neutral-700/30"/> <rect x="66.5" y="73" width="77" height="6" rx="3" fill="currentColor" class="z7ij7 dark:fill-neutral-700/30"/> <rect x="19.5" y="28.5" width="139" height="39" rx="7.5" fill="currentColor" class="g4ri5 dark:fill-neutral-800"/> <rect x="19.5" y="28.5" width="139" height="39" rx="7.5" stroke="currentColor" class="wpm6b dark:stroke-neutral-700/30"/> <rect x="27" y="36" width="24" height="24" rx="4" fill="currentColor" class="an5ob dark:fill-neutral-700/70"/> <rect x="59" y="39" width="60" height="6" rx="3" fill="currentColor" class="an5ob dark:fill-neutral-700/70"/> <rect x="59" y="51" width="92" height="6" rx="3" fill="currentColor" class="an5ob dark:fill-neutral-700/70"/> <g filter="url(#filter19)"> <rect x="12" y="6" width="154" height="40" rx="8" fill="currentColor" class="g4ri5 dark:fill-neutral-800" shape-rendering="crispEdges"/> <rect x="12.5" y="6.5" width="153" height="39" rx="7.5" stroke="currentColor" class="wpm6b dark:stroke-neutral-700/60" shape-rendering="crispEdges"/> <rect x="20" y="14" width="24" height="24" rx="4" fill="currentColor" class="oxv2h dark:fill-neutral-700 "/> <rect x="52" y="17" width="60" height="6" rx="3" fill="currentColor" class="oxv2h dark:fill-neutral-700"/> <rect x="52" y="29" width="106" height="6" rx="3" fill="currentColor" class="oxv2h 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="sbe6w huxlp"> <p class="jglyo f4yq1 p9tun dark:text-neutral-200"> No projects </p> <p class="we17s pdak6 z1v6e 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