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 rfeq5 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 h3sa8 du2fm"> <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 g9nzd pvi3v"><!-- Browsers Card --> <div class="du2fm flex ao3ns nz7b4 qm5z2 khwhk fwpr6 u33oi dark:bg-neutral-800 dark:border-neutral-700"> <!-- Header --> <div class="a6a2o avnhm flex fa4f9 items-center"> <h2 class="ymj28 xd86q lno3i t4wtn dark:text-neutral-200"> Browsers </h2> </div> <!-- End Header --> <!-- Body --> <div class="flex ao3ns fa4f9 du2fm fp4or wpkv9"> <div> <h4 class="p7ohq ny6kb zd5ha tiwe1 dark:text-blue-500"> <span class="x15tt a417z tw24r cuciq q9efq"> 0 </span> </h4> <p class="lf406 kugle dark:text-neutral-500"> Visitors are viewing website from the desktop device. </p> </div> <!-- Stats --> <div class="lf406"> <!-- Grid --> <div class="o4dae ckljf n0wng"> <!-- Card --> <div class="ogll8 qm5z2 g2g4t khwhk dark:border-neutral-700 zb2tq"> <img class="xqknn hz5e3 wardh" src="../../assets/svg/brands/chrome.svg" alt="Chrome Logo"> <p class="a3wk8 t4wtn dark:text-neutral-200"> Chrome </p> <p class="lno3i ol2kz t4wtn dark:text-neutral-200"> 0 </p> </div> <!-- End Card --> <!-- Card --> <div class="ogll8 qm5z2 g2g4t khwhk dark:border-neutral-700 zb2tq"> <img class="xqknn hz5e3 wardh" src="../../assets/svg/brands/firefox.svg" alt="Firefox Logo"> <p class="a3wk8 t4wtn dark:text-neutral-200"> Firefox </p> <p class="lno3i ol2kz t4wtn dark:text-neutral-200"> 0 </p> </div> <!-- End Card --> <!-- Card --> <div class="ogll8 qm5z2 g2g4t khwhk dark:border-neutral-700 zb2tq"> <img class="xqknn hz5e3 wardh" src="../../assets/svg/brands/safari.svg" alt="Safari Logo"> <p class="a3wk8 t4wtn dark:text-neutral-200"> Safari </p> <p class="lno3i ol2kz t4wtn dark:text-neutral-200"> 0 </p> </div> <!-- End Card --> </div> <!-- End Grid --> </div> <!-- End Stats --> <div class="lf406"> <!-- Alert --> <div class="nz7b4 qm5z2 khwhk u33oi fwpr6 rsqxb cc1ly dark:bg-neutral-800 dark:border-neutral-700" role="alert" tabindex="-1" aria-labelledby="hs-pro-dpna-label"> <div class="flex hwu3o"> <svg class="di2ve xqknn t0r8j t4wtn 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="qisry"> <h3 id="hs-pro-dpna-label" class="a3wk8 t4wtn lno3i dark:text-white"> Push notifications </h3> <p class="a3wk8 xkisd dark:text-neutral-400"> Automatically send me notifications </p> </div> <!-- Switch/Toggle --> <div class="flex fa4f9 items-center"> <label for="hs-pro-dbcpns" class="tuthn">On</label> <div class="relative xd86q"> <input type="checkbox" id="hs-pro-dbcpns" class="relative p158c mubga g3kj2 o7p0z ftfcy q9efq icuyk cursor-pointer m39z4 jryni xadp7 m9065 iec4s haq8z 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 kj2qv px11w xi15w vxbc1 p1nlw mqo4c olpql gyeq4 mbgvg tvt4z zutt1 h2kr4 gkp2r 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="du2fm flex ao3ns nz7b4 qm5z2 khwhk fwpr6 u33oi dark:bg-neutral-800 dark:border-neutral-700"> <!-- Header --> <div class="a6a2o avnhm flex fa4f9 items-center"> <h2 class="ymj28 xd86q lno3i t4wtn dark:text-neutral-200"> Browsers </h2> </div> <!-- End Header --> <!-- Body --> <div class="flex ao3ns fa4f9 du2fm fp4or wpkv9"> <div> <h4 class="p7ohq ny6kb zd5ha tiwe1 dark:text-blue-500"> <span class="x15tt a417z tw24r cuciq q9efq"> 0 </span> </h4> <p class="lf406 kugle dark:text-neutral-500"> Visitors are viewing website from the desktop device. </p> </div> <!-- Stats --> <div class="lf406"> <!-- Grid --> <div class="o4dae ckljf n0wng"> <!-- Card --> <div class="ogll8 qm5z2 g2g4t khwhk dark:border-neutral-700 zb2tq"> <img class="xqknn hz5e3 wardh" src="../../assets/svg/brands/chrome.svg" alt="Chrome Logo"> <p class="a3wk8 t4wtn dark:text-neutral-200"> Chrome </p> <p class="lno3i ol2kz t4wtn dark:text-neutral-200"> 0 </p> </div> <!-- End Card --> <!-- Card --> <div class="ogll8 qm5z2 g2g4t khwhk dark:border-neutral-700 zb2tq"> <img class="xqknn hz5e3 wardh" src="../../assets/svg/brands/firefox.svg" alt="Firefox Logo"> <p class="a3wk8 t4wtn dark:text-neutral-200"> Firefox </p> <p class="lno3i ol2kz t4wtn dark:text-neutral-200"> 0 </p> </div> <!-- End Card --> <!-- Card --> <div class="ogll8 qm5z2 g2g4t khwhk dark:border-neutral-700 zb2tq"> <img class="xqknn hz5e3 wardh" src="../../assets/svg/brands/safari.svg" alt="Safari Logo"> <p class="a3wk8 t4wtn dark:text-neutral-200"> Safari </p> <p class="lno3i ol2kz t4wtn dark:text-neutral-200"> 0 </p> </div> <!-- End Card --> </div> <!-- End Grid --> </div> <!-- End Stats --> <div class="lf406"> <!-- Alert --> <div class="nz7b4 qm5z2 khwhk u33oi fwpr6 rsqxb cc1ly dark:bg-neutral-800 dark:border-neutral-700" role="alert" tabindex="-1" aria-labelledby="hs-pro-dpna-label"> <div class="flex hwu3o"> <svg class="di2ve xqknn t0r8j t4wtn 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="qisry"> <h3 id="hs-pro-dpna-label" class="a3wk8 t4wtn lno3i dark:text-white"> Push notifications </h3> <p class="a3wk8 xkisd dark:text-neutral-400"> Automatically send me notifications </p> </div> <!-- Switch/Toggle --> <div class="flex fa4f9 items-center"> <label for="hs-pro-dbcpns" class="tuthn">On</label> <div class="relative xd86q"> <input type="checkbox" id="hs-pro-dbcpns" class="relative p158c mubga g3kj2 o7p0z ftfcy q9efq icuyk cursor-pointer m39z4 jryni xadp7 m9065 iec4s haq8z 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 kj2qv px11w xi15w vxbc1 p1nlw mqo4c olpql gyeq4 mbgvg tvt4z zutt1 h2kr4 gkp2r 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 h3sa8 du2fm"> <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 ao3ns nz7b4 qm5z2 khwhk shadow-[0_4px_6px_0px_rgba(0,0,0,0.03)] u33oi dark:bg-neutral-800 dark:border-neutral-700"><!-- Header --> <div class="bm6ej khwhk dark:border-neutral-700"> <!-- Page Header --> <div class="tjm3z wpkv9 flex fa4f9 items-center fejhu"> <h2 class="xd86q lno3i t4wtn dark:text-neutral-200"> Preline </h2> <div class="flex f5dbk items-center klk5r"> <!-- Calendar Dropdown --> <div class="hs-dropdown [--auto-close:inside] [--placement:top-right] rl1tg"> <button id="hs-pro-dnic" type="button" class="jxbdw rl1tg items-center egssd zd5ha zb2tq qm5z2 khwhk nz7b4 t4wtn fwpr6 w8bqc iec4s haq8z t4rxa a68yw 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="xqknn ymp3r ccfki" 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="xqknn vbyq5 ccfki" 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 av2mg transition-[opacity,margin] duration opacity-0 hidden w4j19 nz7b4 u33oi 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="ogll8 shme7"> <!-- Months --> <div class="o4dae ay7t5 items-center hwu3o e8r64 avnhm"> <!-- Prev Button --> <div class="bbqht"> <button type="button" class="j1mw5 flex a459h items-center t4wtn x8k6f icuyk iec4s haq8z t4rxa c2pts dark:text-neutral-400 dark:hover:bg-neutral-800 dark:focus:bg-neutral-800"> <svg class="xqknn d681g" 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="a5q9z flex a459h items-center o9jhx"> <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 j5skf w-full cursor-pointer gxh7t zd5ha t4wtn ythkq t4rxa je5ud v6hfb dbpp0 o0htc dark:text-neutral-200 dark:hover:text-neutral-300 dark:focus:text-neutral-300", "dropdownClasses": "vvl4w w4j19 l9eni tfx8w aqh96 shme7 nz7b4 qm5z2 khwhk zb2tq v1x81 wcomx a17xw sh48p ygi9h wv8uu wt1jo dark:[&::-webkit-scrollbar-track]:bg-neutral-700 dark:[&::-webkit-scrollbar-thumb]:bg-neutral-500 dark:bg-neutral-900 dark:border-neutral-700", "optionClasses": "jxbdw w-full a3wk8 t4wtn cursor-pointer x8k6f zb2tq t4rxa c2pts dark:bg-neutral-900 dark:hover:bg-neutral-800 dark:text-neutral-200 dark:focus:bg-neutral-800", "optionTemplate": "<div class=\"flex fa4f9 items-center w-full \"><span data-title></span><span class=\"hidden hs-selected:block \"><svg class=\"xqknn ccfki t4wtn 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="t4wtn 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 j5skf w-full cursor-pointer gxh7t zd5ha t4wtn ythkq t4rxa je5ud v6hfb dbpp0 o0htc dark:text-neutral-200 dark:hover:text-neutral-300 dark:focus:text-neutral-300", "dropdownClasses": "vvl4w w4j19 od2ao tfx8w aqh96 shme7 nz7b4 qm5z2 khwhk zb2tq v1x81 wcomx a17xw sh48p ygi9h wv8uu wt1jo dark:[&::-webkit-scrollbar-track]:bg-neutral-700 dark:[&::-webkit-scrollbar-thumb]:bg-neutral-500 dark:bg-neutral-900 dark:border-neutral-700", "optionClasses": "jxbdw w-full a3wk8 t4wtn cursor-pointer x8k6f zb2tq t4rxa c2pts dark:bg-neutral-900 dark:hover:bg-neutral-800 dark:text-neutral-200 dark:focus:bg-neutral-800", "optionTemplate": "<div class=\"flex fa4f9 items-center w-full \"><span data-title></span><span class=\"hidden hs-selected:block \"><svg class=\"xqknn ccfki t4wtn 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="bbqht flex f5dbk"> <button type="button" class=" j1mw5 flex a459h items-center t4wtn x8k6f icuyk iec4s haq8z t4rxa c2pts dark:text-neutral-400 dark:hover:bg-neutral-800 dark:focus:bg-neutral-800"> <svg class="xqknn d681g" 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 cqbvv"> <span class="whmww bwtk8 block iieae a3wk8 kugle dark:text-neutral-500"> Mo </span> <span class="whmww bwtk8 block iieae a3wk8 kugle dark:text-neutral-500"> Tu </span> <span class="whmww bwtk8 block iieae a3wk8 kugle dark:text-neutral-500"> We </span> <span class="whmww bwtk8 block iieae a3wk8 kugle dark:text-neutral-500"> Th </span> <span class="whmww bwtk8 block iieae a3wk8 kugle dark:text-neutral-500"> Fr </span> <span class="whmww bwtk8 block iieae a3wk8 kugle dark:text-neutral-500"> Sa </span> <span class="whmww bwtk8 block iieae a3wk8 kugle dark:text-neutral-500"> Su </span> </div> <!-- Weeks --> <!-- Days --> <div class="flex"> <div> <button type="button" class="whmww rzqz2 flex a459h items-center qm5z2 ftfcy a3wk8 t4wtn icuyk tgqg3 lgv9t iec4s haq8z t4rxa k3ck5 ajxk8 dark:text-neutral-200" disabled> 26 </button> </div> <div> <button type="button" class="whmww rzqz2 flex a459h items-center qm5z2 ftfcy a3wk8 t4wtn icuyk tgqg3 lgv9t iec4s haq8z t4rxa k3ck5 ajxk8 dark:text-neutral-200" disabled> 27 </button> </div> <div> <button type="button" class="whmww rzqz2 flex a459h items-center qm5z2 ftfcy a3wk8 t4wtn icuyk tgqg3 lgv9t iec4s haq8z t4rxa k3ck5 ajxk8 dark:text-neutral-200" disabled> 28 </button> </div> <div> <button type="button" class="whmww rzqz2 flex a459h items-center qm5z2 ftfcy a3wk8 t4wtn icuyk tgqg3 lgv9t iec4s haq8z t4rxa k3ck5 ajxk8 dark:text-neutral-200" disabled> 29 </button> </div> <div> <button type="button" class="whmww rzqz2 flex a459h items-center qm5z2 ftfcy a3wk8 t4wtn icuyk tgqg3 lgv9t iec4s haq8z t4rxa k3ck5 ajxk8 dark:text-neutral-200" disabled> 30 </button> </div> <div> <button type="button" class="whmww rzqz2 flex a459h items-center qm5z2 ftfcy a3wk8 t4wtn icuyk tgqg3 lgv9t iec4s haq8z t4rxa k3ck5 ajxk8 dark:text-neutral-200"> 1 </button> </div> <div> <button type="button" class="whmww rzqz2 flex a459h items-center qm5z2 ftfcy a3wk8 t4wtn icuyk tgqg3 lgv9t iec4s haq8z t4rxa k3ck5 ajxk8 dark:text-neutral-200"> 2 </button> </div> </div> <!-- Days --> <!-- Days --> <div class="flex"> <div> <button type="button" class="whmww rzqz2 flex a459h items-center qm5z2 ftfcy a3wk8 t4wtn icuyk tgqg3 lgv9t iec4s haq8z t4rxa k3ck5 ajxk8 dark:text-neutral-200"> 3 </button> </div> <div> <button type="button" class="whmww rzqz2 flex a459h items-center qm5z2 ftfcy a3wk8 t4wtn icuyk tgqg3 lgv9t iec4s haq8z t4rxa k3ck5 ajxk8 dark:text-neutral-200"> 4 </button> </div> <div > <button type="button" class="whmww rzqz2 flex a459h items-center qm5z2 ftfcy a3wk8 t4wtn icuyk tgqg3 lgv9t iec4s haq8z t4rxa k3ck5 ajxk8 dark:text-neutral-200"> 5 </button> </div> <div > <button type="button" class="whmww rzqz2 flex a459h items-center qm5z2 ftfcy a3wk8 t4wtn icuyk tgqg3 lgv9t iec4s haq8z t4rxa k3ck5 ajxk8 dark:text-neutral-200"> 6 </button> </div> <div > <button type="button" class="whmww rzqz2 flex a459h items-center qm5z2 ftfcy a3wk8 t4wtn icuyk tgqg3 lgv9t iec4s haq8z t4rxa k3ck5 ajxk8 dark:text-neutral-200"> 7 </button> </div> <div > <button type="button" class="whmww rzqz2 flex a459h items-center qm5z2 ftfcy a3wk8 t4wtn icuyk tgqg3 lgv9t iec4s haq8z t4rxa k3ck5 ajxk8 dark:text-neutral-200"> 8 </button> </div> <div > <button type="button" class="whmww rzqz2 flex a459h items-center qm5z2 ftfcy a3wk8 t4wtn icuyk tgqg3 lgv9t iec4s haq8z t4rxa k3ck5 ajxk8 dark:text-neutral-200"> 9 </button> </div> </div> <!-- Days --> <!-- Days --> <div class="flex"> <div > <button type="button" class="whmww rzqz2 flex a459h items-center qm5z2 ftfcy a3wk8 t4wtn icuyk tgqg3 lgv9t iec4s haq8z t4rxa k3ck5 ajxk8 dark:text-neutral-200"> 10 </button> </div> <div > <button type="button" class="whmww rzqz2 flex a459h items-center qm5z2 ftfcy a3wk8 t4wtn icuyk tgqg3 lgv9t iec4s haq8z t4rxa k3ck5 ajxk8 dark:text-neutral-200"> 11 </button> </div> <div > <button type="button" class="whmww rzqz2 flex a459h items-center qm5z2 ftfcy a3wk8 t4wtn icuyk tgqg3 lgv9t iec4s haq8z t4rxa k3ck5 ajxk8 dark:text-neutral-200"> 12 </button> </div> <div> <button type="button" class="whmww rzqz2 flex a459h items-center qm5z2 ftfcy a3wk8 t4wtn icuyk tgqg3 lgv9t iec4s haq8z t4rxa k3ck5 ajxk8 dark:text-neutral-200"> 13 </button> </div> <div> <button type="button" class="whmww rzqz2 flex a459h items-center qm5z2 ftfcy a3wk8 t4wtn icuyk tgqg3 lgv9t iec4s haq8z t4rxa k3ck5 ajxk8 dark:text-neutral-200"> 14 </button> </div> <div> <button type="button" class="whmww rzqz2 flex a459h items-center qm5z2 ftfcy a3wk8 t4wtn icuyk tgqg3 lgv9t iec4s haq8z t4rxa k3ck5 ajxk8 dark:text-neutral-200"> 15 </button> </div> <div> <button type="button" class="whmww rzqz2 flex a459h items-center qm5z2 ftfcy a3wk8 t4wtn icuyk tgqg3 lgv9t iec4s haq8z t4rxa k3ck5 ajxk8 dark:text-neutral-200"> 16 </button> </div> </div> <!-- Days --> <!-- Days --> <div class="flex"> <div> <button type="button" class="whmww rzqz2 flex a459h items-center qm5z2 ftfcy a3wk8 t4wtn icuyk tgqg3 lgv9t iec4s haq8z t4rxa k3ck5 ajxk8 dark:text-neutral-200"> 17 </button> </div> <div> <button type="button" class="whmww rzqz2 flex a459h items-center qm5z2 ftfcy a3wk8 t4wtn icuyk tgqg3 lgv9t iec4s haq8z t4rxa k3ck5 ajxk8 dark:text-neutral-200"> 18 </button> </div> <div> <button type="button" class="whmww rzqz2 flex a459h items-center qm5z2 ftfcy a3wk8 t4wtn icuyk tgqg3 lgv9t iec4s haq8z t4rxa k3ck5 ajxk8 dark:text-neutral-200"> 19 </button> </div> <div> <button type="button" class="whmww rzqz2 flex a459h items-center vqobd qm5z2 ftfcy a3wk8 zd5ha txh0b tgqg3 icuyk dark:bg-indigo-500 iec4s haq8z t4rxa c2pts dark:hover:border-neutral-700"> 20 </button> </div> <div> <button type="button" class="whmww rzqz2 flex a459h items-center qm5z2 ftfcy a3wk8 t4wtn icuyk tgqg3 lgv9t iec4s haq8z t4rxa k3ck5 ajxk8 dark:text-neutral-200"> 21 </button> </div> <div> <button type="button" class="whmww rzqz2 flex a459h items-center qm5z2 ftfcy a3wk8 t4wtn icuyk tgqg3 lgv9t iec4s haq8z t4rxa k3ck5 ajxk8 dark:text-neutral-200"> 22 </button> </div> <div> <button type="button" class="whmww rzqz2 flex a459h items-center qm5z2 ftfcy a3wk8 t4wtn icuyk tgqg3 lgv9t iec4s haq8z t4rxa k3ck5 ajxk8 dark:text-neutral-200"> 23 </button> </div> </div> <!-- Days --> <!-- Days --> <div class="flex"> <div> <button type="button" class="whmww rzqz2 flex a459h items-center qm5z2 ftfcy a3wk8 t4wtn icuyk tgqg3 lgv9t iec4s haq8z t4rxa k3ck5 ajxk8 dark:text-neutral-200"> 24 </button> </div> <div > <button type="button" class="whmww rzqz2 flex a459h items-center qm5z2 ftfcy a3wk8 t4wtn icuyk tgqg3 lgv9t iec4s haq8z t4rxa k3ck5 ajxk8 dark:text-neutral-200"> 25 </button> </div> <div > <button type="button" class="whmww rzqz2 flex a459h items-center qm5z2 ftfcy a3wk8 t4wtn icuyk tgqg3 lgv9t iec4s haq8z t4rxa k3ck5 ajxk8 dark:text-neutral-200"> 26 </button> </div> <div > <button type="button" class="whmww rzqz2 flex a459h items-center qm5z2 ftfcy a3wk8 t4wtn icuyk tgqg3 lgv9t iec4s haq8z t4rxa k3ck5 ajxk8 dark:text-neutral-200"> 27 </button> </div> <div > <button type="button" class="whmww rzqz2 flex a459h items-center qm5z2 ftfcy a3wk8 t4wtn icuyk tgqg3 lgv9t iec4s haq8z t4rxa k3ck5 ajxk8 dark:text-neutral-200"> 28 </button> </div> <div > <button type="button" class="whmww rzqz2 flex a459h items-center qm5z2 ftfcy a3wk8 t4wtn icuyk tgqg3 lgv9t iec4s haq8z t4rxa k3ck5 ajxk8 dark:text-neutral-200"> 29 </button> </div> <div > <button type="button" class="whmww rzqz2 flex a459h items-center qm5z2 ftfcy a3wk8 t4wtn icuyk tgqg3 lgv9t iec4s haq8z t4rxa k3ck5 ajxk8 dark:text-neutral-200"> 30 </button> </div> </div> <!-- Days --> <!-- Days --> <div class="flex"> <div > <button type="button" class="whmww rzqz2 flex a459h items-center qm5z2 ftfcy a3wk8 t4wtn icuyk tgqg3 lgv9t iec4s haq8z t4rxa k3ck5 ajxk8 dark:text-neutral-200"> 31 </button> </div> <div > <button type="button" class="whmww rzqz2 flex a459h items-center qm5z2 ftfcy a3wk8 t4wtn tgqg3 lgv9t icuyk iec4s haq8z t4rxa c2pts dark:text-neutral-200 dark:hover:border-neutral-500 dark:focus:bg-neutral-700" disabled> 1 </button> </div> <div> <button type="button" class="whmww rzqz2 flex a459h items-center qm5z2 ftfcy a3wk8 t4wtn tgqg3 lgv9t icuyk iec4s haq8z t4rxa c2pts dark:text-neutral-200 dark:hover:border-neutral-500 dark:focus:bg-neutral-700" disabled> 2 </button> </div> <div> <button type="button" class="whmww rzqz2 flex a459h items-center qm5z2 ftfcy a3wk8 t4wtn tgqg3 lgv9t icuyk iec4s haq8z t4rxa c2pts dark:text-neutral-200 dark:hover:border-neutral-500 dark:focus:bg-neutral-700" disabled> 3 </button> </div> <div> <button type="button" class="whmww rzqz2 flex a459h items-center qm5z2 ftfcy a3wk8 t4wtn tgqg3 lgv9t icuyk iec4s haq8z t4rxa c2pts dark:text-neutral-200 dark:hover:border-neutral-500 dark:focus:bg-neutral-700" disabled> 4 </button> </div> <div> <button type="button" class="whmww rzqz2 flex a459h items-center qm5z2 ftfcy a3wk8 t4wtn tgqg3 lgv9t icuyk iec4s haq8z t4rxa c2pts dark:text-neutral-200 dark:hover:border-neutral-500 dark:focus:bg-neutral-700" disabled> 5 </button> </div> <div> <button type="button" class="whmww rzqz2 flex a459h items-center qm5z2 ftfcy a3wk8 t4wtn tgqg3 lgv9t icuyk iec4s haq8z t4rxa c2pts 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="rsqxb otlhf rl1tg items-center klk5r egssd zd5ha zb2tq qm5z2 ftfcy vqobd txh0b wtw6t iec4s haq8z t4rxa c78c9 kchrk dark:focus:ring-indigo-500"> <svg class="hidden y0411 xqknn ccfki" 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="dmqa5 wpkv9 nkoh0"> <!-- Empty State --> <div class="a6a2o ee68l flex ao3ns a459h items-center iieae"> <svg class="j30qf pvi3v" 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="y7oum dark:fill-neutral-700"/> <rect x="9" y="20" width="6" height="45" fill="currentColor" class="y7oum dark:fill-neutral-700"/> <rect x="18" y="25" width="6" height="40" fill="currentColor" class="y7oum dark:fill-neutral-700"/> <rect x="27" width="6" height="65" fill="currentColor" class="y7oum dark:fill-neutral-700"/> <rect x="36" y="5" width="6" height="60" fill="currentColor" class="y7oum dark:fill-neutral-700"/> <rect x="45" y="40" width="6" height="25" fill="currentColor" class="y7oum dark:fill-neutral-700"/> <rect x="54" y="25" width="6" height="40" fill="currentColor" class="y7oum dark:fill-neutral-700"/> <rect x="63" y="12" width="6" height="53" fill="currentColor" class="y7oum dark:fill-neutral-700"/> <rect x="72" width="6" height="65" fill="currentColor" class="y7oum dark:fill-neutral-700"/> <rect x="81" y="44" width="6" height="21" fill="currentColor" class="y7oum dark:fill-neutral-700"/> </svg> <div class="wuei0 pvi3v"> <p class="vvl4w zd5ha t4wtn dark:text-neutral-200"> No data </p> <p class="i2zc4 a3wk8 kugle dark:text-neutral-500"> No data here yet. We will notify you when there's an update. </p> </div> <button type="button" class="rsqxb cc1ly rl1tg items-center klk5r egssd zd5ha zb2tq qm5z2 ftfcy vqobd txh0b wtw6t iec4s haq8z t4rxa c78c9 ihjvk" data-hs-overlay="#hs-pro-pabchesb"> <svg class="hidden y0411 xqknn ccfki" 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 = 'jbkap trjok nz7b4 qm5z2 khwhk t4wtn zb2tq rxdzr dark:bg-neutral-800 dark:border-neutral-700', wrapperExtClasses = '', seriesClasses = 'z4gae', seriesExtClasses = '', titleClasses = 'lno3i mlgbz tx0qf am1ry t4wtn xsebh dark:!bg-neutral-800 dark:!border-neutral-700 dark:text-neutral-200', titleExtClasses = '', markerClasses = 'yncfd ltb6e i5biv', markerExtClasses = 'c5oru', valueClasses = 'odkub kugle j5si5 dark:text-neutral-400', valueExtClasses = '', labelClasses = 'kugle 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 pujes ${hasTextLabel ? 'ju5lp' : ''} 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 mlo4j"> <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 = 'jbkap trjok nz7b4 qm5z2 khwhk t4wtn zb2tq rxdzr dark:bg-neutral-800 dark:border-neutral-700', wrapperExtClasses = '', seriesClasses = 'ju5lp w-full z4gae', seriesExtClasses = '', titleClasses = 'flex fa4f9 lno3i mlgbz tx0qf am1ry t4wtn xsebh dark:!bg-neutral-800 dark:!border-neutral-700 dark:text-neutral-200', titleExtClasses = '', markerClasses = 'yncfd ltb6e i5biv', markerExtClasses = 'c5oru', valueClasses = 'odkub kugle j5si5 dark:text-neutral-400', valueExtClasses = '', labelClasses = 'kugle dark:text-neutral-400 lpi99', 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="xd86q d681g b8921" 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="xd86q d681g b8921" 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} pujes 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 mlo4j"> ${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 o9jhx ${!isDifferenceIsNull ? (isGrowing ? 'haqdz' : 'izrez') : ''} lpi99"> ${!isDifferenceIsNull ? icon : ''} <span class="xd86q a3wk8"> ${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 = 'jbkap trjok nz7b4 qm5z2 khwhk t4wtn zb2tq rxdzr dark:bg-neutral-800 dark:border-neutral-700', wrapperExtClasses = '', seriesClasses = 'ju5lp w-full z4gae', seriesExtClasses = '', titleClasses = 'flex fa4f9 lno3i mlgbz tx0qf am1ry t4wtn xsebh dark:!bg-neutral-800 dark:!border-neutral-700 dark:text-neutral-200', titleExtClasses = '', markerClasses = 'yncfd ltb6e i5biv', markerExtClasses = 'c5oru', valueClasses = 'odkub kugle j5si5 dark:text-neutral-400', valueExtClasses = '', labelClasses = 'kugle dark:text-neutral-400 lpi99', 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="xd86q d681g b8921" 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="xd86q d681g b8921" 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 pujes ${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 z4gae "> <div class="apexcharts-tooltip-y-group mlo4j"> <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 o9jhx ${!isDifferenceIsNull ? (isGrowing ? 'haqdz' : 'izrez') : ''} lpi99"> ${!isDifferenceIsNull ? icon : ''} <span class="xd86q a3wk8"> ${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: 'csqzy', labelDivider: ':', labelExtClasses: 'lpi99' }); } }, 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="bm6ej khwhk dark:border-neutral-700"> <!-- Page Header --> <div class="tjm3z wpkv9 flex fa4f9 items-center fejhu"> <h2 class="xd86q lno3i t4wtn dark:text-neutral-200"> Preline </h2> <div class="flex f5dbk items-center klk5r"> <!-- Calendar Dropdown --> <div class="hs-dropdown [--auto-close:inside] [--placement:top-right] rl1tg"> <button id="hs-pro-dnic" type="button" class="jxbdw rl1tg items-center egssd zd5ha zb2tq qm5z2 khwhk nz7b4 t4wtn fwpr6 w8bqc iec4s haq8z t4rxa a68yw 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="xqknn ymp3r ccfki" 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="xqknn vbyq5 ccfki" 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 av2mg transition-[opacity,margin] duration opacity-0 hidden w4j19 nz7b4 u33oi 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="ogll8 shme7"> <!-- Months --> <div class="o4dae ay7t5 items-center hwu3o e8r64 avnhm"> <!-- Prev Button --> <div class="bbqht"> <button type="button" class="j1mw5 flex a459h items-center t4wtn x8k6f icuyk iec4s haq8z t4rxa c2pts dark:text-neutral-400 dark:hover:bg-neutral-800 dark:focus:bg-neutral-800"> <svg class="xqknn d681g" 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="a5q9z flex a459h items-center o9jhx"> <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 j5skf w-full cursor-pointer gxh7t zd5ha t4wtn ythkq t4rxa je5ud v6hfb dbpp0 o0htc dark:text-neutral-200 dark:hover:text-neutral-300 dark:focus:text-neutral-300", "dropdownClasses": "vvl4w w4j19 l9eni tfx8w aqh96 shme7 nz7b4 qm5z2 khwhk zb2tq v1x81 wcomx a17xw sh48p ygi9h wv8uu wt1jo dark:[&::-webkit-scrollbar-track]:bg-neutral-700 dark:[&::-webkit-scrollbar-thumb]:bg-neutral-500 dark:bg-neutral-900 dark:border-neutral-700", "optionClasses": "jxbdw w-full a3wk8 t4wtn cursor-pointer x8k6f zb2tq t4rxa c2pts dark:bg-neutral-900 dark:hover:bg-neutral-800 dark:text-neutral-200 dark:focus:bg-neutral-800", "optionTemplate": "<div class=\"flex fa4f9 items-center w-full \"><span data-title></span><span class=\"hidden hs-selected:block \"><svg class=\"xqknn ccfki t4wtn 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="t4wtn 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 j5skf w-full cursor-pointer gxh7t zd5ha t4wtn ythkq t4rxa je5ud v6hfb dbpp0 o0htc dark:text-neutral-200 dark:hover:text-neutral-300 dark:focus:text-neutral-300", "dropdownClasses": "vvl4w w4j19 od2ao tfx8w aqh96 shme7 nz7b4 qm5z2 khwhk zb2tq v1x81 wcomx a17xw sh48p ygi9h wv8uu wt1jo dark:[&::-webkit-scrollbar-track]:bg-neutral-700 dark:[&::-webkit-scrollbar-thumb]:bg-neutral-500 dark:bg-neutral-900 dark:border-neutral-700", "optionClasses": "jxbdw w-full a3wk8 t4wtn cursor-pointer x8k6f zb2tq t4rxa c2pts dark:bg-neutral-900 dark:hover:bg-neutral-800 dark:text-neutral-200 dark:focus:bg-neutral-800", "optionTemplate": "<div class=\"flex fa4f9 items-center w-full \"><span data-title></span><span class=\"hidden hs-selected:block \"><svg class=\"xqknn ccfki t4wtn 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="bbqht flex f5dbk"> <button type="button" class=" j1mw5 flex a459h items-center t4wtn x8k6f icuyk iec4s haq8z t4rxa c2pts dark:text-neutral-400 dark:hover:bg-neutral-800 dark:focus:bg-neutral-800"> <svg class="xqknn d681g" 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 cqbvv"> <span class="whmww bwtk8 block iieae a3wk8 kugle dark:text-neutral-500"> Mo </span> <span class="whmww bwtk8 block iieae a3wk8 kugle dark:text-neutral-500"> Tu </span> <span class="whmww bwtk8 block iieae a3wk8 kugle dark:text-neutral-500"> We </span> <span class="whmww bwtk8 block iieae a3wk8 kugle dark:text-neutral-500"> Th </span> <span class="whmww bwtk8 block iieae a3wk8 kugle dark:text-neutral-500"> Fr </span> <span class="whmww bwtk8 block iieae a3wk8 kugle dark:text-neutral-500"> Sa </span> <span class="whmww bwtk8 block iieae a3wk8 kugle dark:text-neutral-500"> Su </span> </div> <!-- Weeks --> <!-- Days --> <div class="flex"> <div> <button type="button" class="whmww rzqz2 flex a459h items-center qm5z2 ftfcy a3wk8 t4wtn icuyk tgqg3 lgv9t iec4s haq8z t4rxa k3ck5 ajxk8 dark:text-neutral-200" disabled> 26 </button> </div> <div> <button type="button" class="whmww rzqz2 flex a459h items-center qm5z2 ftfcy a3wk8 t4wtn icuyk tgqg3 lgv9t iec4s haq8z t4rxa k3ck5 ajxk8 dark:text-neutral-200" disabled> 27 </button> </div> <div> <button type="button" class="whmww rzqz2 flex a459h items-center qm5z2 ftfcy a3wk8 t4wtn icuyk tgqg3 lgv9t iec4s haq8z t4rxa k3ck5 ajxk8 dark:text-neutral-200" disabled> 28 </button> </div> <div> <button type="button" class="whmww rzqz2 flex a459h items-center qm5z2 ftfcy a3wk8 t4wtn icuyk tgqg3 lgv9t iec4s haq8z t4rxa k3ck5 ajxk8 dark:text-neutral-200" disabled> 29 </button> </div> <div> <button type="button" class="whmww rzqz2 flex a459h items-center qm5z2 ftfcy a3wk8 t4wtn icuyk tgqg3 lgv9t iec4s haq8z t4rxa k3ck5 ajxk8 dark:text-neutral-200" disabled> 30 </button> </div> <div> <button type="button" class="whmww rzqz2 flex a459h items-center qm5z2 ftfcy a3wk8 t4wtn icuyk tgqg3 lgv9t iec4s haq8z t4rxa k3ck5 ajxk8 dark:text-neutral-200"> 1 </button> </div> <div> <button type="button" class="whmww rzqz2 flex a459h items-center qm5z2 ftfcy a3wk8 t4wtn icuyk tgqg3 lgv9t iec4s haq8z t4rxa k3ck5 ajxk8 dark:text-neutral-200"> 2 </button> </div> </div> <!-- Days --> <!-- Days --> <div class="flex"> <div> <button type="button" class="whmww rzqz2 flex a459h items-center qm5z2 ftfcy a3wk8 t4wtn icuyk tgqg3 lgv9t iec4s haq8z t4rxa k3ck5 ajxk8 dark:text-neutral-200"> 3 </button> </div> <div> <button type="button" class="whmww rzqz2 flex a459h items-center qm5z2 ftfcy a3wk8 t4wtn icuyk tgqg3 lgv9t iec4s haq8z t4rxa k3ck5 ajxk8 dark:text-neutral-200"> 4 </button> </div> <div > <button type="button" class="whmww rzqz2 flex a459h items-center qm5z2 ftfcy a3wk8 t4wtn icuyk tgqg3 lgv9t iec4s haq8z t4rxa k3ck5 ajxk8 dark:text-neutral-200"> 5 </button> </div> <div > <button type="button" class="whmww rzqz2 flex a459h items-center qm5z2 ftfcy a3wk8 t4wtn icuyk tgqg3 lgv9t iec4s haq8z t4rxa k3ck5 ajxk8 dark:text-neutral-200"> 6 </button> </div> <div > <button type="button" class="whmww rzqz2 flex a459h items-center qm5z2 ftfcy a3wk8 t4wtn icuyk tgqg3 lgv9t iec4s haq8z t4rxa k3ck5 ajxk8 dark:text-neutral-200"> 7 </button> </div> <div > <button type="button" class="whmww rzqz2 flex a459h items-center qm5z2 ftfcy a3wk8 t4wtn icuyk tgqg3 lgv9t iec4s haq8z t4rxa k3ck5 ajxk8 dark:text-neutral-200"> 8 </button> </div> <div > <button type="button" class="whmww rzqz2 flex a459h items-center qm5z2 ftfcy a3wk8 t4wtn icuyk tgqg3 lgv9t iec4s haq8z t4rxa k3ck5 ajxk8 dark:text-neutral-200"> 9 </button> </div> </div> <!-- Days --> <!-- Days --> <div class="flex"> <div > <button type="button" class="whmww rzqz2 flex a459h items-center qm5z2 ftfcy a3wk8 t4wtn icuyk tgqg3 lgv9t iec4s haq8z t4rxa k3ck5 ajxk8 dark:text-neutral-200"> 10 </button> </div> <div > <button type="button" class="whmww rzqz2 flex a459h items-center qm5z2 ftfcy a3wk8 t4wtn icuyk tgqg3 lgv9t iec4s haq8z t4rxa k3ck5 ajxk8 dark:text-neutral-200"> 11 </button> </div> <div > <button type="button" class="whmww rzqz2 flex a459h items-center qm5z2 ftfcy a3wk8 t4wtn icuyk tgqg3 lgv9t iec4s haq8z t4rxa k3ck5 ajxk8 dark:text-neutral-200"> 12 </button> </div> <div> <button type="button" class="whmww rzqz2 flex a459h items-center qm5z2 ftfcy a3wk8 t4wtn icuyk tgqg3 lgv9t iec4s haq8z t4rxa k3ck5 ajxk8 dark:text-neutral-200"> 13 </button> </div> <div> <button type="button" class="whmww rzqz2 flex a459h items-center qm5z2 ftfcy a3wk8 t4wtn icuyk tgqg3 lgv9t iec4s haq8z t4rxa k3ck5 ajxk8 dark:text-neutral-200"> 14 </button> </div> <div> <button type="button" class="whmww rzqz2 flex a459h items-center qm5z2 ftfcy a3wk8 t4wtn icuyk tgqg3 lgv9t iec4s haq8z t4rxa k3ck5 ajxk8 dark:text-neutral-200"> 15 </button> </div> <div> <button type="button" class="whmww rzqz2 flex a459h items-center qm5z2 ftfcy a3wk8 t4wtn icuyk tgqg3 lgv9t iec4s haq8z t4rxa k3ck5 ajxk8 dark:text-neutral-200"> 16 </button> </div> </div> <!-- Days --> <!-- Days --> <div class="flex"> <div> <button type="button" class="whmww rzqz2 flex a459h items-center qm5z2 ftfcy a3wk8 t4wtn icuyk tgqg3 lgv9t iec4s haq8z t4rxa k3ck5 ajxk8 dark:text-neutral-200"> 17 </button> </div> <div> <button type="button" class="whmww rzqz2 flex a459h items-center qm5z2 ftfcy a3wk8 t4wtn icuyk tgqg3 lgv9t iec4s haq8z t4rxa k3ck5 ajxk8 dark:text-neutral-200"> 18 </button> </div> <div> <button type="button" class="whmww rzqz2 flex a459h items-center qm5z2 ftfcy a3wk8 t4wtn icuyk tgqg3 lgv9t iec4s haq8z t4rxa k3ck5 ajxk8 dark:text-neutral-200"> 19 </button> </div> <div> <button type="button" class="whmww rzqz2 flex a459h items-center vqobd qm5z2 ftfcy a3wk8 zd5ha txh0b tgqg3 icuyk dark:bg-indigo-500 iec4s haq8z t4rxa c2pts dark:hover:border-neutral-700"> 20 </button> </div> <div> <button type="button" class="whmww rzqz2 flex a459h items-center qm5z2 ftfcy a3wk8 t4wtn icuyk tgqg3 lgv9t iec4s haq8z t4rxa k3ck5 ajxk8 dark:text-neutral-200"> 21 </button> </div> <div> <button type="button" class="whmww rzqz2 flex a459h items-center qm5z2 ftfcy a3wk8 t4wtn icuyk tgqg3 lgv9t iec4s haq8z t4rxa k3ck5 ajxk8 dark:text-neutral-200"> 22 </button> </div> <div> <button type="button" class="whmww rzqz2 flex a459h items-center qm5z2 ftfcy a3wk8 t4wtn icuyk tgqg3 lgv9t iec4s haq8z t4rxa k3ck5 ajxk8 dark:text-neutral-200"> 23 </button> </div> </div> <!-- Days --> <!-- Days --> <div class="flex"> <div> <button type="button" class="whmww rzqz2 flex a459h items-center qm5z2 ftfcy a3wk8 t4wtn icuyk tgqg3 lgv9t iec4s haq8z t4rxa k3ck5 ajxk8 dark:text-neutral-200"> 24 </button> </div> <div > <button type="button" class="whmww rzqz2 flex a459h items-center qm5z2 ftfcy a3wk8 t4wtn icuyk tgqg3 lgv9t iec4s haq8z t4rxa k3ck5 ajxk8 dark:text-neutral-200"> 25 </button> </div> <div > <button type="button" class="whmww rzqz2 flex a459h items-center qm5z2 ftfcy a3wk8 t4wtn icuyk tgqg3 lgv9t iec4s haq8z t4rxa k3ck5 ajxk8 dark:text-neutral-200"> 26 </button> </div> <div > <button type="button" class="whmww rzqz2 flex a459h items-center qm5z2 ftfcy a3wk8 t4wtn icuyk tgqg3 lgv9t iec4s haq8z t4rxa k3ck5 ajxk8 dark:text-neutral-200"> 27 </button> </div> <div > <button type="button" class="whmww rzqz2 flex a459h items-center qm5z2 ftfcy a3wk8 t4wtn icuyk tgqg3 lgv9t iec4s haq8z t4rxa k3ck5 ajxk8 dark:text-neutral-200"> 28 </button> </div> <div > <button type="button" class="whmww rzqz2 flex a459h items-center qm5z2 ftfcy a3wk8 t4wtn icuyk tgqg3 lgv9t iec4s haq8z t4rxa k3ck5 ajxk8 dark:text-neutral-200"> 29 </button> </div> <div > <button type="button" class="whmww rzqz2 flex a459h items-center qm5z2 ftfcy a3wk8 t4wtn icuyk tgqg3 lgv9t iec4s haq8z t4rxa k3ck5 ajxk8 dark:text-neutral-200"> 30 </button> </div> </div> <!-- Days --> <!-- Days --> <div class="flex"> <div > <button type="button" class="whmww rzqz2 flex a459h items-center qm5z2 ftfcy a3wk8 t4wtn icuyk tgqg3 lgv9t iec4s haq8z t4rxa k3ck5 ajxk8 dark:text-neutral-200"> 31 </button> </div> <div > <button type="button" class="whmww rzqz2 flex a459h items-center qm5z2 ftfcy a3wk8 t4wtn tgqg3 lgv9t icuyk iec4s haq8z t4rxa c2pts dark:text-neutral-200 dark:hover:border-neutral-500 dark:focus:bg-neutral-700" disabled> 1 </button> </div> <div> <button type="button" class="whmww rzqz2 flex a459h items-center qm5z2 ftfcy a3wk8 t4wtn tgqg3 lgv9t icuyk iec4s haq8z t4rxa c2pts dark:text-neutral-200 dark:hover:border-neutral-500 dark:focus:bg-neutral-700" disabled> 2 </button> </div> <div> <button type="button" class="whmww rzqz2 flex a459h items-center qm5z2 ftfcy a3wk8 t4wtn tgqg3 lgv9t icuyk iec4s haq8z t4rxa c2pts dark:text-neutral-200 dark:hover:border-neutral-500 dark:focus:bg-neutral-700" disabled> 3 </button> </div> <div> <button type="button" class="whmww rzqz2 flex a459h items-center qm5z2 ftfcy a3wk8 t4wtn tgqg3 lgv9t icuyk iec4s haq8z t4rxa c2pts dark:text-neutral-200 dark:hover:border-neutral-500 dark:focus:bg-neutral-700" disabled> 4 </button> </div> <div> <button type="button" class="whmww rzqz2 flex a459h items-center qm5z2 ftfcy a3wk8 t4wtn tgqg3 lgv9t icuyk iec4s haq8z t4rxa c2pts dark:text-neutral-200 dark:hover:border-neutral-500 dark:focus:bg-neutral-700" disabled> 5 </button> </div> <div> <button type="button" class="whmww rzqz2 flex a459h items-center qm5z2 ftfcy a3wk8 t4wtn tgqg3 lgv9t icuyk iec4s haq8z t4rxa c2pts 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="rsqxb otlhf rl1tg items-center klk5r egssd zd5ha zb2tq qm5z2 ftfcy vqobd txh0b wtw6t iec4s haq8z t4rxa c78c9 kchrk dark:focus:ring-indigo-500"> <svg class="hidden y0411 xqknn ccfki" 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="dmqa5 wpkv9 nkoh0"> <!-- Empty State --> <div class="a6a2o ee68l flex ao3ns a459h items-center iieae"> <svg class="j30qf pvi3v" 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="y7oum dark:fill-neutral-700"/> <rect x="9" y="20" width="6" height="45" fill="currentColor" class="y7oum dark:fill-neutral-700"/> <rect x="18" y="25" width="6" height="40" fill="currentColor" class="y7oum dark:fill-neutral-700"/> <rect x="27" width="6" height="65" fill="currentColor" class="y7oum dark:fill-neutral-700"/> <rect x="36" y="5" width="6" height="60" fill="currentColor" class="y7oum dark:fill-neutral-700"/> <rect x="45" y="40" width="6" height="25" fill="currentColor" class="y7oum dark:fill-neutral-700"/> <rect x="54" y="25" width="6" height="40" fill="currentColor" class="y7oum dark:fill-neutral-700"/> <rect x="63" y="12" width="6" height="53" fill="currentColor" class="y7oum dark:fill-neutral-700"/> <rect x="72" width="6" height="65" fill="currentColor" class="y7oum dark:fill-neutral-700"/> <rect x="81" y="44" width="6" height="21" fill="currentColor" class="y7oum dark:fill-neutral-700"/> </svg> <div class="wuei0 pvi3v"> <p class="vvl4w zd5ha t4wtn dark:text-neutral-200"> No data </p> <p class="i2zc4 a3wk8 kugle dark:text-neutral-500"> No data here yet. We will notify you when there's an update. </p> </div> <button type="button" class="rsqxb cc1ly rl1tg items-center klk5r egssd zd5ha zb2tq qm5z2 ftfcy vqobd txh0b wtw6t iec4s haq8z t4rxa c78c9 ihjvk" data-hs-overlay="#hs-pro-pabchesb"> <svg class="hidden y0411 xqknn ccfki" 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 h3sa8 du2fm"> <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="a6a2o ry7iz flex ao3ns a459h items-center iieae"> <svg class="j30qf pvi3v wardh" 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="i8dix dark:fill-neutral-800"/> <rect x="27" y="50.5" width="124" height="39" rx="7.5" stroke="currentColor" class="rxmog dark:stroke-neutral-700/10"/> <rect x="34.5" y="58" width="24" height="24" rx="4" fill="currentColor" class="lmhhu dark:fill-neutral-700/30"/> <rect x="66.5" y="61" width="60" height="6" rx="3" fill="currentColor" class="lmhhu dark:fill-neutral-700/30"/> <rect x="66.5" y="73" width="77" height="6" rx="3" fill="currentColor" class="lmhhu dark:fill-neutral-700/30"/> <rect x="19.5" y="28.5" width="139" height="39" rx="7.5" fill="currentColor" class="i8dix dark:fill-neutral-800"/> <rect x="19.5" y="28.5" width="139" height="39" rx="7.5" stroke="currentColor" class="hgnqi dark:stroke-neutral-700/30"/> <rect x="27" y="36" width="24" height="24" rx="4" fill="currentColor" class="wvm9f dark:fill-neutral-700/70"/> <rect x="59" y="39" width="60" height="6" rx="3" fill="currentColor" class="wvm9f dark:fill-neutral-700/70"/> <rect x="59" y="51" width="92" height="6" rx="3" fill="currentColor" class="wvm9f dark:fill-neutral-700/70"/> <g filter="url(#filter19)"> <rect x="12" y="6" width="154" height="40" rx="8" fill="currentColor" class="i8dix dark:fill-neutral-800" shape-rendering="crispEdges"/> <rect x="12.5" y="6.5" width="153" height="39" rx="7.5" stroke="currentColor" class="hgnqi dark:stroke-neutral-700/60" shape-rendering="crispEdges"/> <rect x="20" y="14" width="24" height="24" rx="4" fill="currentColor" class="y7oum dark:fill-neutral-700 "/> <rect x="52" y="17" width="60" height="6" rx="3" fill="currentColor" class="y7oum dark:fill-neutral-700"/> <rect x="52" y="29" width="106" height="6" rx="3" fill="currentColor" class="y7oum 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="wuei0 pvi3v"> <p class="vvl4w zd5ha t4wtn dark:text-neutral-200"> No projects </p> <p class="i2zc4 a3wk8 kugle 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="a6a2o ry7iz flex ao3ns a459h items-center iieae"> <svg class="j30qf pvi3v wardh" 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="i8dix dark:fill-neutral-800"/> <rect x="27" y="50.5" width="124" height="39" rx="7.5" stroke="currentColor" class="rxmog dark:stroke-neutral-700/10"/> <rect x="34.5" y="58" width="24" height="24" rx="4" fill="currentColor" class="lmhhu dark:fill-neutral-700/30"/> <rect x="66.5" y="61" width="60" height="6" rx="3" fill="currentColor" class="lmhhu dark:fill-neutral-700/30"/> <rect x="66.5" y="73" width="77" height="6" rx="3" fill="currentColor" class="lmhhu dark:fill-neutral-700/30"/> <rect x="19.5" y="28.5" width="139" height="39" rx="7.5" fill="currentColor" class="i8dix dark:fill-neutral-800"/> <rect x="19.5" y="28.5" width="139" height="39" rx="7.5" stroke="currentColor" class="hgnqi dark:stroke-neutral-700/30"/> <rect x="27" y="36" width="24" height="24" rx="4" fill="currentColor" class="wvm9f dark:fill-neutral-700/70"/> <rect x="59" y="39" width="60" height="6" rx="3" fill="currentColor" class="wvm9f dark:fill-neutral-700/70"/> <rect x="59" y="51" width="92" height="6" rx="3" fill="currentColor" class="wvm9f dark:fill-neutral-700/70"/> <g filter="url(#filter19)"> <rect x="12" y="6" width="154" height="40" rx="8" fill="currentColor" class="i8dix dark:fill-neutral-800" shape-rendering="crispEdges"/> <rect x="12.5" y="6.5" width="153" height="39" rx="7.5" stroke="currentColor" class="hgnqi dark:stroke-neutral-700/60" shape-rendering="crispEdges"/> <rect x="20" y="14" width="24" height="24" rx="4" fill="currentColor" class="y7oum dark:fill-neutral-700 "/> <rect x="52" y="17" width="60" height="6" rx="3" fill="currentColor" class="y7oum dark:fill-neutral-700"/> <rect x="52" y="29" width="106" height="6" rx="3" fill="currentColor" class="y7oum 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="wuei0 pvi3v"> <p class="vvl4w zd5ha t4wtn dark:text-neutral-200"> No projects </p> <p class="i2zc4 a3wk8 kugle 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