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 awxhi 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 um8nq qpmwn"> <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="i65bn w7kls mx-auto"><!-- Browsers Card --> <div class="qpmwn flex flex-col oo8ro wfm4e d77gl hx4gm lile3 dark:bg-neutral-800 dark:border-neutral-700"> <!-- Header --> <div class="xlz15 nfrzv flex uip67 items-center"> <h2 class="k5amb inline-block u832x y2wul bp13m dark:text-neutral-200"> Browsers </h2> </div> <!-- End Header --> <!-- Body --> <div class="flex flex-col uip67 qpmwn rq5fj blhyt"> <div> <h4 class="bneap zcd5u vo20k rwtxm dark:text-blue-500"> <span class="ujzxw phxlm padx4 y9k00 pnlhs"> 0 </span> </h4> <p class="w11y8 t6rrs dark:text-neutral-500"> Visitors are viewing website from the desktop device. </p> </div> <!-- Stats --> <div class="w11y8"> <!-- Grid --> <div class="dmfqa uir33 aygsi"> <!-- Card --> <div class="yyez4 wfm4e ef3uy d77gl dark:border-neutral-700 ps5iq"> <img class="hq6gx awhdl dl93o" src="../../assets/svg/brands/chrome.svg" alt="Chrome Logo"> <p class="t5ziw bp13m dark:text-neutral-200"> Chrome </p> <p class="y2wul u832x bp13m dark:text-neutral-200"> 0 </p> </div> <!-- End Card --> <!-- Card --> <div class="yyez4 wfm4e ef3uy d77gl dark:border-neutral-700 ps5iq"> <img class="hq6gx awhdl dl93o" src="../../assets/svg/brands/firefox.svg" alt="Firefox Logo"> <p class="t5ziw bp13m dark:text-neutral-200"> Firefox </p> <p class="y2wul u832x bp13m dark:text-neutral-200"> 0 </p> </div> <!-- End Card --> <!-- Card --> <div class="yyez4 wfm4e ef3uy d77gl dark:border-neutral-700 ps5iq"> <img class="hq6gx awhdl dl93o" src="../../assets/svg/brands/safari.svg" alt="Safari Logo"> <p class="t5ziw bp13m dark:text-neutral-200"> Safari </p> <p class="y2wul u832x bp13m dark:text-neutral-200"> 0 </p> </div> <!-- End Card --> </div> <!-- End Grid --> </div> <!-- End Stats --> <div class="w11y8"> <!-- Alert --> <div class="oo8ro wfm4e d77gl lile3 idgjj i7oig apc69 dark:bg-neutral-800 dark:border-neutral-700" role="alert" tabindex="-1" aria-labelledby="hs-pro-dpna-label"> <div class="flex items-center vmt4s"> <svg class="hq6gx ca09w bp13m 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="e3fpz"> <h3 id="hs-pro-dpna-label" class="t5ziw bp13m y2wul dark:text-white"> Push notifications </h3> <p class="t5ziw p4gf7 dark:text-neutral-400"> Automatically send me notifications </p> </div> <div class="flex items-center fgkms"> <!-- Switch/Toggle --> <label for="hs-pro-dbcpns" class="relative inline-block fklyq yoxjp cursor-pointer"> <input type="checkbox" id="hs-pro-dbcpns" class="peer ecbnn" > <span class="absolute inset-0 rjuva oq0dt hgdm1 vtbde jhf88 peer-checked:bg-blue-600 dark:bg-neutral-700 dark:peer-checked:bg-blue-500 peer-disabled:opacity-50 peer-disabled:pointer-events-none"></span> <span class="absolute wgue8 sabt1 -translate-y-1/2 ca09w oo8ro oq0dt t4usm pjxlf vtbde jhf88 peer-checked:translate-x-full dark:bg-neutral-400 dark:peer-checked:bg-white"></span> </label> <!-- End Switch/Toggle --> </div> </div> </div> <!-- End Alert --> </div> </div> <!-- End Body --> </div> <!-- End Browsers Card --></div> <script src="../../assets/vendor/preline/dist/index.js?v=3.0.1"></script> </body> </html>
<!-- Browsers Card --> <div class="qpmwn flex flex-col oo8ro wfm4e d77gl hx4gm lile3 dark:bg-neutral-800 dark:border-neutral-700"> <!-- Header --> <div class="xlz15 nfrzv flex uip67 items-center"> <h2 class="k5amb inline-block u832x y2wul bp13m dark:text-neutral-200"> Browsers </h2> </div> <!-- End Header --> <!-- Body --> <div class="flex flex-col uip67 qpmwn rq5fj blhyt"> <div> <h4 class="bneap zcd5u vo20k rwtxm dark:text-blue-500"> <span class="ujzxw phxlm padx4 y9k00 pnlhs"> 0 </span> </h4> <p class="w11y8 t6rrs dark:text-neutral-500"> Visitors are viewing website from the desktop device. </p> </div> <!-- Stats --> <div class="w11y8"> <!-- Grid --> <div class="dmfqa uir33 aygsi"> <!-- Card --> <div class="yyez4 wfm4e ef3uy d77gl dark:border-neutral-700 ps5iq"> <img class="hq6gx awhdl dl93o" src="../../assets/svg/brands/chrome.svg" alt="Chrome Logo"> <p class="t5ziw bp13m dark:text-neutral-200"> Chrome </p> <p class="y2wul u832x bp13m dark:text-neutral-200"> 0 </p> </div> <!-- End Card --> <!-- Card --> <div class="yyez4 wfm4e ef3uy d77gl dark:border-neutral-700 ps5iq"> <img class="hq6gx awhdl dl93o" src="../../assets/svg/brands/firefox.svg" alt="Firefox Logo"> <p class="t5ziw bp13m dark:text-neutral-200"> Firefox </p> <p class="y2wul u832x bp13m dark:text-neutral-200"> 0 </p> </div> <!-- End Card --> <!-- Card --> <div class="yyez4 wfm4e ef3uy d77gl dark:border-neutral-700 ps5iq"> <img class="hq6gx awhdl dl93o" src="../../assets/svg/brands/safari.svg" alt="Safari Logo"> <p class="t5ziw bp13m dark:text-neutral-200"> Safari </p> <p class="y2wul u832x bp13m dark:text-neutral-200"> 0 </p> </div> <!-- End Card --> </div> <!-- End Grid --> </div> <!-- End Stats --> <div class="w11y8"> <!-- Alert --> <div class="oo8ro wfm4e d77gl lile3 idgjj i7oig apc69 dark:bg-neutral-800 dark:border-neutral-700" role="alert" tabindex="-1" aria-labelledby="hs-pro-dpna-label"> <div class="flex items-center vmt4s"> <svg class="hq6gx ca09w bp13m 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="e3fpz"> <h3 id="hs-pro-dpna-label" class="t5ziw bp13m y2wul dark:text-white"> Push notifications </h3> <p class="t5ziw p4gf7 dark:text-neutral-400"> Automatically send me notifications </p> </div> <div class="flex items-center fgkms"> <!-- Switch/Toggle --> <label for="hs-pro-dbcpns" class="relative inline-block fklyq yoxjp cursor-pointer"> <input type="checkbox" id="hs-pro-dbcpns" class="peer ecbnn" > <span class="absolute inset-0 rjuva oq0dt hgdm1 vtbde jhf88 peer-checked:bg-blue-600 dark:bg-neutral-700 dark:peer-checked:bg-blue-500 peer-disabled:opacity-50 peer-disabled:pointer-events-none"></span> <span class="absolute wgue8 sabt1 -translate-y-1/2 ca09w oo8ro oq0dt t4usm pjxlf vtbde jhf88 peer-checked:translate-x-full dark:bg-neutral-400 dark:peer-checked:bg-white"></span> </label> <!-- End Switch/Toggle --> </div> </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 um8nq qpmwn"> <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 flex-col oo8ro wfm4e d77gl idgjj lile3 dark:bg-neutral-800 dark:border-neutral-700"><!-- Header --> <div class="ic6aj d77gl dark:border-neutral-700"> <!-- Page Header --> <div class="mctd2 blhyt flex uip67 items-center ocl6c"> <h2 class="inline-block y2wul u832x bp13m dark:text-neutral-200"> Preline </h2> <div class="flex c9j8j items-center lialp"> <!-- Calendar Dropdown --> <div class="hs-dropdown [--auto-close:inside] [--placement:top-right] inline-flex"> <button id="hs-pro-dnic" type="button" class="n33uu inline-flex items-center cm336 vo20k ps5iq wfm4e d77gl oo8ro bp13m hx4gm tdhmi disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden tme8y 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="hq6gx epucs stqz8" 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="hq6gx mb4ft stqz8" 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 v4b5n transition-[opacity,margin] duration opacity-0 hidden ucmtr oo8ro lile3 rrmkk dark:bg-neutral-900" role="menu" aria-orientation="vertical" aria-labelledby="hs-pro-dnic"> <!-- Calendar --> <div class="yyez4 space-y-0.5"> <!-- Months --> <div class="dmfqa mqtol items-center vmt4s mzxha nfrzv"> <!-- Prev Button --> <div class="i63zv"> <button type="button" class="aukwz flex r00n9 items-center bp13m ksr3h oq0dt disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden kf4z7 dark:text-neutral-400 dark:hover:bg-neutral-800 dark:focus:bg-neutral-800"> <svg class="hq6gx ibvs1" 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="nvgw2 flex r00n9 items-center pgjbi"> <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 dslo6 i65bn cursor-pointer qgy40 vo20k bp13m b9xvx focus:outline-hidden xyfur before:absolute before:inset-0 before:z-1 dark:text-neutral-200 dark:hover:text-neutral-300 dark:focus:text-neutral-300", "dropdownClasses": "ls9te ucmtr qzvcy yj8ha ju7it space-y-0.5 oo8ro wfm4e d77gl ps5iq rkof5 overflow-hidden overflow-y-auto n4ec4 xlk9f rzoxf xcbgk dark:[&::-webkit-scrollbar-track]:bg-neutral-700 dark:[&::-webkit-scrollbar-thumb]:bg-neutral-500 dark:bg-neutral-900 dark:border-neutral-700", "optionClasses": "n33uu i65bn t5ziw bp13m cursor-pointer ksr3h ps5iq focus:outline-hidden kf4z7 dark:bg-neutral-900 dark:hover:bg-neutral-800 dark:text-neutral-200 dark:focus:bg-neutral-800", "optionTemplate": "<div class=\"flex uip67 items-center i65bn \"><span data-title></span><span class=\"hidden hs-selected:block \"><svg class=\"hq6gx stqz8 bp13m 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="bp13m 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 dslo6 i65bn cursor-pointer qgy40 vo20k bp13m b9xvx focus:outline-hidden xyfur before:absolute before:inset-0 before:z-1 dark:text-neutral-200 dark:hover:text-neutral-300 dark:focus:text-neutral-300", "dropdownClasses": "ls9te ucmtr vl7eg yj8ha ju7it space-y-0.5 oo8ro wfm4e d77gl ps5iq rkof5 overflow-hidden overflow-y-auto n4ec4 xlk9f rzoxf xcbgk dark:[&::-webkit-scrollbar-track]:bg-neutral-700 dark:[&::-webkit-scrollbar-thumb]:bg-neutral-500 dark:bg-neutral-900 dark:border-neutral-700", "optionClasses": "n33uu i65bn t5ziw bp13m cursor-pointer ksr3h ps5iq focus:outline-hidden kf4z7 dark:bg-neutral-900 dark:hover:bg-neutral-800 dark:text-neutral-200 dark:focus:bg-neutral-800", "optionTemplate": "<div class=\"flex uip67 items-center i65bn \"><span data-title></span><span class=\"hidden hs-selected:block \"><svg class=\"hq6gx stqz8 bp13m 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="i63zv flex c9j8j"> <button type="button" class=" aukwz flex r00n9 items-center bp13m ksr3h oq0dt disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden kf4z7 dark:text-neutral-400 dark:hover:bg-neutral-800 dark:focus:bg-neutral-800"> <svg class="hq6gx ibvs1" 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 yh9al"> <span class="p6abj p8o62 block lj7mp t5ziw t6rrs dark:text-neutral-500"> Mo </span> <span class="p6abj p8o62 block lj7mp t5ziw t6rrs dark:text-neutral-500"> Tu </span> <span class="p6abj p8o62 block lj7mp t5ziw t6rrs dark:text-neutral-500"> We </span> <span class="p6abj p8o62 block lj7mp t5ziw t6rrs dark:text-neutral-500"> Th </span> <span class="p6abj p8o62 block lj7mp t5ziw t6rrs dark:text-neutral-500"> Fr </span> <span class="p6abj p8o62 block lj7mp t5ziw t6rrs dark:text-neutral-500"> Sa </span> <span class="p6abj p8o62 block lj7mp t5ziw t6rrs dark:text-neutral-500"> Su </span> </div> <!-- Weeks --> <!-- Days --> <div class="flex"> <div> <button type="button" class="p6abj qil8e flex r00n9 items-center wfm4e qb17b t5ziw bp13m oq0dt ze09w nkcue disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden zw80d dvj8n dark:text-neutral-200" disabled> 26 </button> </div> <div> <button type="button" class="p6abj qil8e flex r00n9 items-center wfm4e qb17b t5ziw bp13m oq0dt ze09w nkcue disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden zw80d dvj8n dark:text-neutral-200" disabled> 27 </button> </div> <div> <button type="button" class="p6abj qil8e flex r00n9 items-center wfm4e qb17b t5ziw bp13m oq0dt ze09w nkcue disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden zw80d dvj8n dark:text-neutral-200" disabled> 28 </button> </div> <div> <button type="button" class="p6abj qil8e flex r00n9 items-center wfm4e qb17b t5ziw bp13m oq0dt ze09w nkcue disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden zw80d dvj8n dark:text-neutral-200" disabled> 29 </button> </div> <div> <button type="button" class="p6abj qil8e flex r00n9 items-center wfm4e qb17b t5ziw bp13m oq0dt ze09w nkcue disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden zw80d dvj8n dark:text-neutral-200" disabled> 30 </button> </div> <div> <button type="button" class="p6abj qil8e flex r00n9 items-center wfm4e qb17b t5ziw bp13m oq0dt ze09w nkcue disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden zw80d dvj8n dark:text-neutral-200"> 1 </button> </div> <div> <button type="button" class="p6abj qil8e flex r00n9 items-center wfm4e qb17b t5ziw bp13m oq0dt ze09w nkcue disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden zw80d dvj8n dark:text-neutral-200"> 2 </button> </div> </div> <!-- Days --> <!-- Days --> <div class="flex"> <div> <button type="button" class="p6abj qil8e flex r00n9 items-center wfm4e qb17b t5ziw bp13m oq0dt ze09w nkcue disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden zw80d dvj8n dark:text-neutral-200"> 3 </button> </div> <div> <button type="button" class="p6abj qil8e flex r00n9 items-center wfm4e qb17b t5ziw bp13m oq0dt ze09w nkcue disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden zw80d dvj8n dark:text-neutral-200"> 4 </button> </div> <div > <button type="button" class="p6abj qil8e flex r00n9 items-center wfm4e qb17b t5ziw bp13m oq0dt ze09w nkcue disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden zw80d dvj8n dark:text-neutral-200"> 5 </button> </div> <div > <button type="button" class="p6abj qil8e flex r00n9 items-center wfm4e qb17b t5ziw bp13m oq0dt ze09w nkcue disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden zw80d dvj8n dark:text-neutral-200"> 6 </button> </div> <div > <button type="button" class="p6abj qil8e flex r00n9 items-center wfm4e qb17b t5ziw bp13m oq0dt ze09w nkcue disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden zw80d dvj8n dark:text-neutral-200"> 7 </button> </div> <div > <button type="button" class="p6abj qil8e flex r00n9 items-center wfm4e qb17b t5ziw bp13m oq0dt ze09w nkcue disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden zw80d dvj8n dark:text-neutral-200"> 8 </button> </div> <div > <button type="button" class="p6abj qil8e flex r00n9 items-center wfm4e qb17b t5ziw bp13m oq0dt ze09w nkcue disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden zw80d dvj8n dark:text-neutral-200"> 9 </button> </div> </div> <!-- Days --> <!-- Days --> <div class="flex"> <div > <button type="button" class="p6abj qil8e flex r00n9 items-center wfm4e qb17b t5ziw bp13m oq0dt ze09w nkcue disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden zw80d dvj8n dark:text-neutral-200"> 10 </button> </div> <div > <button type="button" class="p6abj qil8e flex r00n9 items-center wfm4e qb17b t5ziw bp13m oq0dt ze09w nkcue disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden zw80d dvj8n dark:text-neutral-200"> 11 </button> </div> <div > <button type="button" class="p6abj qil8e flex r00n9 items-center wfm4e qb17b t5ziw bp13m oq0dt ze09w nkcue disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden zw80d dvj8n dark:text-neutral-200"> 12 </button> </div> <div> <button type="button" class="p6abj qil8e flex r00n9 items-center wfm4e qb17b t5ziw bp13m oq0dt ze09w nkcue disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden zw80d dvj8n dark:text-neutral-200"> 13 </button> </div> <div> <button type="button" class="p6abj qil8e flex r00n9 items-center wfm4e qb17b t5ziw bp13m oq0dt ze09w nkcue disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden zw80d dvj8n dark:text-neutral-200"> 14 </button> </div> <div> <button type="button" class="p6abj qil8e flex r00n9 items-center wfm4e qb17b t5ziw bp13m oq0dt ze09w nkcue disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden zw80d dvj8n dark:text-neutral-200"> 15 </button> </div> <div> <button type="button" class="p6abj qil8e flex r00n9 items-center wfm4e qb17b t5ziw bp13m oq0dt ze09w nkcue disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden zw80d dvj8n dark:text-neutral-200"> 16 </button> </div> </div> <!-- Days --> <!-- Days --> <div class="flex"> <div> <button type="button" class="p6abj qil8e flex r00n9 items-center wfm4e qb17b t5ziw bp13m oq0dt ze09w nkcue disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden zw80d dvj8n dark:text-neutral-200"> 17 </button> </div> <div> <button type="button" class="p6abj qil8e flex r00n9 items-center wfm4e qb17b t5ziw bp13m oq0dt ze09w nkcue disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden zw80d dvj8n dark:text-neutral-200"> 18 </button> </div> <div> <button type="button" class="p6abj qil8e flex r00n9 items-center wfm4e qb17b t5ziw bp13m oq0dt ze09w nkcue disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden zw80d dvj8n dark:text-neutral-200"> 19 </button> </div> <div> <button type="button" class="p6abj qil8e flex r00n9 items-center h1a67 wfm4e qb17b t5ziw vo20k zr4l6 ze09w oq0dt dark:bg-indigo-500 disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden kf4z7 dark:hover:border-neutral-700"> 20 </button> </div> <div> <button type="button" class="p6abj qil8e flex r00n9 items-center wfm4e qb17b t5ziw bp13m oq0dt ze09w nkcue disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden zw80d dvj8n dark:text-neutral-200"> 21 </button> </div> <div> <button type="button" class="p6abj qil8e flex r00n9 items-center wfm4e qb17b t5ziw bp13m oq0dt ze09w nkcue disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden zw80d dvj8n dark:text-neutral-200"> 22 </button> </div> <div> <button type="button" class="p6abj qil8e flex r00n9 items-center wfm4e qb17b t5ziw bp13m oq0dt ze09w nkcue disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden zw80d dvj8n dark:text-neutral-200"> 23 </button> </div> </div> <!-- Days --> <!-- Days --> <div class="flex"> <div> <button type="button" class="p6abj qil8e flex r00n9 items-center wfm4e qb17b t5ziw bp13m oq0dt ze09w nkcue disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden zw80d dvj8n dark:text-neutral-200"> 24 </button> </div> <div > <button type="button" class="p6abj qil8e flex r00n9 items-center wfm4e qb17b t5ziw bp13m oq0dt ze09w nkcue disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden zw80d dvj8n dark:text-neutral-200"> 25 </button> </div> <div > <button type="button" class="p6abj qil8e flex r00n9 items-center wfm4e qb17b t5ziw bp13m oq0dt ze09w nkcue disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden zw80d dvj8n dark:text-neutral-200"> 26 </button> </div> <div > <button type="button" class="p6abj qil8e flex r00n9 items-center wfm4e qb17b t5ziw bp13m oq0dt ze09w nkcue disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden zw80d dvj8n dark:text-neutral-200"> 27 </button> </div> <div > <button type="button" class="p6abj qil8e flex r00n9 items-center wfm4e qb17b t5ziw bp13m oq0dt ze09w nkcue disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden zw80d dvj8n dark:text-neutral-200"> 28 </button> </div> <div > <button type="button" class="p6abj qil8e flex r00n9 items-center wfm4e qb17b t5ziw bp13m oq0dt ze09w nkcue disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden zw80d dvj8n dark:text-neutral-200"> 29 </button> </div> <div > <button type="button" class="p6abj qil8e flex r00n9 items-center wfm4e qb17b t5ziw bp13m oq0dt ze09w nkcue disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden zw80d dvj8n dark:text-neutral-200"> 30 </button> </div> </div> <!-- Days --> <!-- Days --> <div class="flex"> <div > <button type="button" class="p6abj qil8e flex r00n9 items-center wfm4e qb17b t5ziw bp13m oq0dt ze09w nkcue disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden zw80d dvj8n dark:text-neutral-200"> 31 </button> </div> <div > <button type="button" class="p6abj qil8e flex r00n9 items-center wfm4e qb17b t5ziw bp13m ze09w nkcue oq0dt disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden kf4z7 dark:text-neutral-200 dark:hover:border-neutral-500 dark:focus:bg-neutral-700" disabled> 1 </button> </div> <div> <button type="button" class="p6abj qil8e flex r00n9 items-center wfm4e qb17b t5ziw bp13m ze09w nkcue oq0dt disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden kf4z7 dark:text-neutral-200 dark:hover:border-neutral-500 dark:focus:bg-neutral-700" disabled> 2 </button> </div> <div> <button type="button" class="p6abj qil8e flex r00n9 items-center wfm4e qb17b t5ziw bp13m ze09w nkcue oq0dt disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden kf4z7 dark:text-neutral-200 dark:hover:border-neutral-500 dark:focus:bg-neutral-700" disabled> 3 </button> </div> <div> <button type="button" class="p6abj qil8e flex r00n9 items-center wfm4e qb17b t5ziw bp13m ze09w nkcue oq0dt disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden kf4z7 dark:text-neutral-200 dark:hover:border-neutral-500 dark:focus:bg-neutral-700" disabled> 4 </button> </div> <div> <button type="button" class="p6abj qil8e flex r00n9 items-center wfm4e qb17b t5ziw bp13m ze09w nkcue oq0dt disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden kf4z7 dark:text-neutral-200 dark:hover:border-neutral-500 dark:focus:bg-neutral-700" disabled> 5 </button> </div> <div> <button type="button" class="p6abj qil8e flex r00n9 items-center wfm4e qb17b t5ziw bp13m ze09w nkcue oq0dt disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden kf4z7 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="i7oig rfnst inline-flex items-center lialp cm336 vo20k ps5iq wfm4e qb17b h1a67 zr4l6 z3bp0 disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden v1cco vjs3l dark:focus:ring-indigo-500"> <svg class="hidden sm:block hq6gx stqz8" 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="gxlt6 blhyt space-y-4"> <!-- Empty State --> <div class="xlz15 t3zc0 flex flex-col r00n9 items-center lj7mp"> <svg class="rmc90 mx-auto" 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="bxw6c dark:fill-neutral-700"/> <rect x="9" y="20" width="6" height="45" fill="currentColor" class="bxw6c dark:fill-neutral-700"/> <rect x="18" y="25" width="6" height="40" fill="currentColor" class="bxw6c dark:fill-neutral-700"/> <rect x="27" width="6" height="65" fill="currentColor" class="bxw6c dark:fill-neutral-700"/> <rect x="36" y="5" width="6" height="60" fill="currentColor" class="bxw6c dark:fill-neutral-700"/> <rect x="45" y="40" width="6" height="25" fill="currentColor" class="bxw6c dark:fill-neutral-700"/> <rect x="54" y="25" width="6" height="40" fill="currentColor" class="bxw6c dark:fill-neutral-700"/> <rect x="63" y="12" width="6" height="53" fill="currentColor" class="bxw6c dark:fill-neutral-700"/> <rect x="72" width="6" height="65" fill="currentColor" class="bxw6c dark:fill-neutral-700"/> <rect x="81" y="44" width="6" height="21" fill="currentColor" class="bxw6c dark:fill-neutral-700"/> </svg> <div class="idprf mx-auto"> <p class="ls9te vo20k bp13m dark:text-neutral-200"> No data </p> <p class="iqt6z t5ziw t6rrs dark:text-neutral-500"> No data here yet. We will notify you when there's an update. </p> </div> <button type="button" class="i7oig apc69 inline-flex items-center lialp cm336 vo20k ps5iq wfm4e qb17b h1a67 zr4l6 z3bp0 disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden v1cco iqwqc" data-hs-overlay="#hs-pro-pabchesb"> <svg class="hidden sm:block hq6gx stqz8" 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=3.0.1"></script> <script src="../../assets/vendor/lodash/lodash.min.js"></script> <script src="../../assets/vendor/apexcharts/dist/apexcharts.min.js"></script> <script> function buildTooltip(props, options) { const { title, mode, valuePrefix = '$', isValueDivided = true, valuePostfix = '', hasTextLabel = false, invertGroup = false, labelDivider = '', wrapperClasses = 'u7zz8 ej64t oo8ro wfm4e d77gl bp13m ps5iq ttai3 dark:bg-neutral-800 dark:border-neutral-700', wrapperExtClasses = '', seriesClasses = 'cm336', seriesExtClasses = '', titleClasses = 'y2wul d2ov9 hft9r n4eug bp13m l96n9 dark:bg-neutral-800! dark:border-neutral-700! dark:text-neutral-200', titleExtClasses = '', markerClasses = 'e86k1 o03ob dwlzo', markerExtClasses = 'bw8uh', valueClasses = 'oo3sc t6rrs ms-auto! dark:text-neutral-400', valueExtClasses = '', labelClasses = 't6rrs 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 flex! ${hasTextLabel ? 'fdh2j' : ''} 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 t067g"> <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 = 'u7zz8 ej64t oo8ro wfm4e d77gl bp13m ps5iq ttai3 dark:bg-neutral-800 dark:border-neutral-700', wrapperExtClasses = '', seriesClasses = 'fdh2j i65bn cm336', seriesExtClasses = '', titleClasses = 'flex uip67 y2wul d2ov9 hft9r n4eug bp13m l96n9 dark:bg-neutral-800! dark:border-neutral-700! dark:text-neutral-200', titleExtClasses = '', markerClasses = 'e86k1 o03ob dwlzo', markerExtClasses = 'bw8uh', valueClasses = 'oo3sc t6rrs ms-auto! dark:text-neutral-400', valueExtClasses = '', labelClasses = 't6rrs dark:text-neutral-400 zocwd', 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="inline-block ibvs1 s1drr" 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="inline-block ibvs1 s1drr" 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} flex! 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 t067g"> ${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 pgjbi ${!isDifferenceIsNull ? (isGrowing ? 'f411b' : 'vrq52') : ''} zocwd"> ${!isDifferenceIsNull ? icon : ''} <span class="inline-block t5ziw"> ${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 = 'u7zz8 ej64t oo8ro wfm4e d77gl bp13m ps5iq ttai3 dark:bg-neutral-800 dark:border-neutral-700', wrapperExtClasses = '', seriesClasses = 'fdh2j i65bn cm336', seriesExtClasses = '', titleClasses = 'flex uip67 y2wul d2ov9 hft9r n4eug bp13m l96n9 dark:bg-neutral-800! dark:border-neutral-700! dark:text-neutral-200', titleExtClasses = '', markerClasses = 'e86k1 o03ob dwlzo', markerExtClasses = 'bw8uh', valueClasses = 'oo3sc t6rrs ms-auto! dark:text-neutral-400', valueExtClasses = '', labelClasses = 't6rrs dark:text-neutral-400 zocwd', 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="inline-block ibvs1 s1drr" 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="inline-block ibvs1 s1drr" 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 flex! ${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 cm336"> <div class="apexcharts-tooltip-y-group t067g"> <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 pgjbi ${!isDifferenceIsNull ? (isGrowing ? 'f411b' : 'vrq52') : ''} zocwd"> ${!isDifferenceIsNull ? icon : ''} <span class="inline-block t5ziw"> ${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: 'ra2m1', labelDivider: ':', labelExtClasses: 'zocwd' }); } }, 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="ic6aj d77gl dark:border-neutral-700"> <!-- Page Header --> <div class="mctd2 blhyt flex uip67 items-center ocl6c"> <h2 class="inline-block y2wul u832x bp13m dark:text-neutral-200"> Preline </h2> <div class="flex c9j8j items-center lialp"> <!-- Calendar Dropdown --> <div class="hs-dropdown [--auto-close:inside] [--placement:top-right] inline-flex"> <button id="hs-pro-dnic" type="button" class="n33uu inline-flex items-center cm336 vo20k ps5iq wfm4e d77gl oo8ro bp13m hx4gm tdhmi disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden tme8y 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="hq6gx epucs stqz8" 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="hq6gx mb4ft stqz8" 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 v4b5n transition-[opacity,margin] duration opacity-0 hidden ucmtr oo8ro lile3 rrmkk dark:bg-neutral-900" role="menu" aria-orientation="vertical" aria-labelledby="hs-pro-dnic"> <!-- Calendar --> <div class="yyez4 space-y-0.5"> <!-- Months --> <div class="dmfqa mqtol items-center vmt4s mzxha nfrzv"> <!-- Prev Button --> <div class="i63zv"> <button type="button" class="aukwz flex r00n9 items-center bp13m ksr3h oq0dt disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden kf4z7 dark:text-neutral-400 dark:hover:bg-neutral-800 dark:focus:bg-neutral-800"> <svg class="hq6gx ibvs1" 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="nvgw2 flex r00n9 items-center pgjbi"> <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 dslo6 i65bn cursor-pointer qgy40 vo20k bp13m b9xvx focus:outline-hidden xyfur before:absolute before:inset-0 before:z-1 dark:text-neutral-200 dark:hover:text-neutral-300 dark:focus:text-neutral-300", "dropdownClasses": "ls9te ucmtr qzvcy yj8ha ju7it space-y-0.5 oo8ro wfm4e d77gl ps5iq rkof5 overflow-hidden overflow-y-auto n4ec4 xlk9f rzoxf xcbgk dark:[&::-webkit-scrollbar-track]:bg-neutral-700 dark:[&::-webkit-scrollbar-thumb]:bg-neutral-500 dark:bg-neutral-900 dark:border-neutral-700", "optionClasses": "n33uu i65bn t5ziw bp13m cursor-pointer ksr3h ps5iq focus:outline-hidden kf4z7 dark:bg-neutral-900 dark:hover:bg-neutral-800 dark:text-neutral-200 dark:focus:bg-neutral-800", "optionTemplate": "<div class=\"flex uip67 items-center i65bn \"><span data-title></span><span class=\"hidden hs-selected:block \"><svg class=\"hq6gx stqz8 bp13m 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="bp13m 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 dslo6 i65bn cursor-pointer qgy40 vo20k bp13m b9xvx focus:outline-hidden xyfur before:absolute before:inset-0 before:z-1 dark:text-neutral-200 dark:hover:text-neutral-300 dark:focus:text-neutral-300", "dropdownClasses": "ls9te ucmtr vl7eg yj8ha ju7it space-y-0.5 oo8ro wfm4e d77gl ps5iq rkof5 overflow-hidden overflow-y-auto n4ec4 xlk9f rzoxf xcbgk dark:[&::-webkit-scrollbar-track]:bg-neutral-700 dark:[&::-webkit-scrollbar-thumb]:bg-neutral-500 dark:bg-neutral-900 dark:border-neutral-700", "optionClasses": "n33uu i65bn t5ziw bp13m cursor-pointer ksr3h ps5iq focus:outline-hidden kf4z7 dark:bg-neutral-900 dark:hover:bg-neutral-800 dark:text-neutral-200 dark:focus:bg-neutral-800", "optionTemplate": "<div class=\"flex uip67 items-center i65bn \"><span data-title></span><span class=\"hidden hs-selected:block \"><svg class=\"hq6gx stqz8 bp13m 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="i63zv flex c9j8j"> <button type="button" class=" aukwz flex r00n9 items-center bp13m ksr3h oq0dt disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden kf4z7 dark:text-neutral-400 dark:hover:bg-neutral-800 dark:focus:bg-neutral-800"> <svg class="hq6gx ibvs1" 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 yh9al"> <span class="p6abj p8o62 block lj7mp t5ziw t6rrs dark:text-neutral-500"> Mo </span> <span class="p6abj p8o62 block lj7mp t5ziw t6rrs dark:text-neutral-500"> Tu </span> <span class="p6abj p8o62 block lj7mp t5ziw t6rrs dark:text-neutral-500"> We </span> <span class="p6abj p8o62 block lj7mp t5ziw t6rrs dark:text-neutral-500"> Th </span> <span class="p6abj p8o62 block lj7mp t5ziw t6rrs dark:text-neutral-500"> Fr </span> <span class="p6abj p8o62 block lj7mp t5ziw t6rrs dark:text-neutral-500"> Sa </span> <span class="p6abj p8o62 block lj7mp t5ziw t6rrs dark:text-neutral-500"> Su </span> </div> <!-- Weeks --> <!-- Days --> <div class="flex"> <div> <button type="button" class="p6abj qil8e flex r00n9 items-center wfm4e qb17b t5ziw bp13m oq0dt ze09w nkcue disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden zw80d dvj8n dark:text-neutral-200" disabled> 26 </button> </div> <div> <button type="button" class="p6abj qil8e flex r00n9 items-center wfm4e qb17b t5ziw bp13m oq0dt ze09w nkcue disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden zw80d dvj8n dark:text-neutral-200" disabled> 27 </button> </div> <div> <button type="button" class="p6abj qil8e flex r00n9 items-center wfm4e qb17b t5ziw bp13m oq0dt ze09w nkcue disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden zw80d dvj8n dark:text-neutral-200" disabled> 28 </button> </div> <div> <button type="button" class="p6abj qil8e flex r00n9 items-center wfm4e qb17b t5ziw bp13m oq0dt ze09w nkcue disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden zw80d dvj8n dark:text-neutral-200" disabled> 29 </button> </div> <div> <button type="button" class="p6abj qil8e flex r00n9 items-center wfm4e qb17b t5ziw bp13m oq0dt ze09w nkcue disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden zw80d dvj8n dark:text-neutral-200" disabled> 30 </button> </div> <div> <button type="button" class="p6abj qil8e flex r00n9 items-center wfm4e qb17b t5ziw bp13m oq0dt ze09w nkcue disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden zw80d dvj8n dark:text-neutral-200"> 1 </button> </div> <div> <button type="button" class="p6abj qil8e flex r00n9 items-center wfm4e qb17b t5ziw bp13m oq0dt ze09w nkcue disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden zw80d dvj8n dark:text-neutral-200"> 2 </button> </div> </div> <!-- Days --> <!-- Days --> <div class="flex"> <div> <button type="button" class="p6abj qil8e flex r00n9 items-center wfm4e qb17b t5ziw bp13m oq0dt ze09w nkcue disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden zw80d dvj8n dark:text-neutral-200"> 3 </button> </div> <div> <button type="button" class="p6abj qil8e flex r00n9 items-center wfm4e qb17b t5ziw bp13m oq0dt ze09w nkcue disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden zw80d dvj8n dark:text-neutral-200"> 4 </button> </div> <div > <button type="button" class="p6abj qil8e flex r00n9 items-center wfm4e qb17b t5ziw bp13m oq0dt ze09w nkcue disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden zw80d dvj8n dark:text-neutral-200"> 5 </button> </div> <div > <button type="button" class="p6abj qil8e flex r00n9 items-center wfm4e qb17b t5ziw bp13m oq0dt ze09w nkcue disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden zw80d dvj8n dark:text-neutral-200"> 6 </button> </div> <div > <button type="button" class="p6abj qil8e flex r00n9 items-center wfm4e qb17b t5ziw bp13m oq0dt ze09w nkcue disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden zw80d dvj8n dark:text-neutral-200"> 7 </button> </div> <div > <button type="button" class="p6abj qil8e flex r00n9 items-center wfm4e qb17b t5ziw bp13m oq0dt ze09w nkcue disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden zw80d dvj8n dark:text-neutral-200"> 8 </button> </div> <div > <button type="button" class="p6abj qil8e flex r00n9 items-center wfm4e qb17b t5ziw bp13m oq0dt ze09w nkcue disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden zw80d dvj8n dark:text-neutral-200"> 9 </button> </div> </div> <!-- Days --> <!-- Days --> <div class="flex"> <div > <button type="button" class="p6abj qil8e flex r00n9 items-center wfm4e qb17b t5ziw bp13m oq0dt ze09w nkcue disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden zw80d dvj8n dark:text-neutral-200"> 10 </button> </div> <div > <button type="button" class="p6abj qil8e flex r00n9 items-center wfm4e qb17b t5ziw bp13m oq0dt ze09w nkcue disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden zw80d dvj8n dark:text-neutral-200"> 11 </button> </div> <div > <button type="button" class="p6abj qil8e flex r00n9 items-center wfm4e qb17b t5ziw bp13m oq0dt ze09w nkcue disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden zw80d dvj8n dark:text-neutral-200"> 12 </button> </div> <div> <button type="button" class="p6abj qil8e flex r00n9 items-center wfm4e qb17b t5ziw bp13m oq0dt ze09w nkcue disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden zw80d dvj8n dark:text-neutral-200"> 13 </button> </div> <div> <button type="button" class="p6abj qil8e flex r00n9 items-center wfm4e qb17b t5ziw bp13m oq0dt ze09w nkcue disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden zw80d dvj8n dark:text-neutral-200"> 14 </button> </div> <div> <button type="button" class="p6abj qil8e flex r00n9 items-center wfm4e qb17b t5ziw bp13m oq0dt ze09w nkcue disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden zw80d dvj8n dark:text-neutral-200"> 15 </button> </div> <div> <button type="button" class="p6abj qil8e flex r00n9 items-center wfm4e qb17b t5ziw bp13m oq0dt ze09w nkcue disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden zw80d dvj8n dark:text-neutral-200"> 16 </button> </div> </div> <!-- Days --> <!-- Days --> <div class="flex"> <div> <button type="button" class="p6abj qil8e flex r00n9 items-center wfm4e qb17b t5ziw bp13m oq0dt ze09w nkcue disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden zw80d dvj8n dark:text-neutral-200"> 17 </button> </div> <div> <button type="button" class="p6abj qil8e flex r00n9 items-center wfm4e qb17b t5ziw bp13m oq0dt ze09w nkcue disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden zw80d dvj8n dark:text-neutral-200"> 18 </button> </div> <div> <button type="button" class="p6abj qil8e flex r00n9 items-center wfm4e qb17b t5ziw bp13m oq0dt ze09w nkcue disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden zw80d dvj8n dark:text-neutral-200"> 19 </button> </div> <div> <button type="button" class="p6abj qil8e flex r00n9 items-center h1a67 wfm4e qb17b t5ziw vo20k zr4l6 ze09w oq0dt dark:bg-indigo-500 disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden kf4z7 dark:hover:border-neutral-700"> 20 </button> </div> <div> <button type="button" class="p6abj qil8e flex r00n9 items-center wfm4e qb17b t5ziw bp13m oq0dt ze09w nkcue disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden zw80d dvj8n dark:text-neutral-200"> 21 </button> </div> <div> <button type="button" class="p6abj qil8e flex r00n9 items-center wfm4e qb17b t5ziw bp13m oq0dt ze09w nkcue disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden zw80d dvj8n dark:text-neutral-200"> 22 </button> </div> <div> <button type="button" class="p6abj qil8e flex r00n9 items-center wfm4e qb17b t5ziw bp13m oq0dt ze09w nkcue disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden zw80d dvj8n dark:text-neutral-200"> 23 </button> </div> </div> <!-- Days --> <!-- Days --> <div class="flex"> <div> <button type="button" class="p6abj qil8e flex r00n9 items-center wfm4e qb17b t5ziw bp13m oq0dt ze09w nkcue disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden zw80d dvj8n dark:text-neutral-200"> 24 </button> </div> <div > <button type="button" class="p6abj qil8e flex r00n9 items-center wfm4e qb17b t5ziw bp13m oq0dt ze09w nkcue disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden zw80d dvj8n dark:text-neutral-200"> 25 </button> </div> <div > <button type="button" class="p6abj qil8e flex r00n9 items-center wfm4e qb17b t5ziw bp13m oq0dt ze09w nkcue disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden zw80d dvj8n dark:text-neutral-200"> 26 </button> </div> <div > <button type="button" class="p6abj qil8e flex r00n9 items-center wfm4e qb17b t5ziw bp13m oq0dt ze09w nkcue disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden zw80d dvj8n dark:text-neutral-200"> 27 </button> </div> <div > <button type="button" class="p6abj qil8e flex r00n9 items-center wfm4e qb17b t5ziw bp13m oq0dt ze09w nkcue disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden zw80d dvj8n dark:text-neutral-200"> 28 </button> </div> <div > <button type="button" class="p6abj qil8e flex r00n9 items-center wfm4e qb17b t5ziw bp13m oq0dt ze09w nkcue disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden zw80d dvj8n dark:text-neutral-200"> 29 </button> </div> <div > <button type="button" class="p6abj qil8e flex r00n9 items-center wfm4e qb17b t5ziw bp13m oq0dt ze09w nkcue disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden zw80d dvj8n dark:text-neutral-200"> 30 </button> </div> </div> <!-- Days --> <!-- Days --> <div class="flex"> <div > <button type="button" class="p6abj qil8e flex r00n9 items-center wfm4e qb17b t5ziw bp13m oq0dt ze09w nkcue disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden zw80d dvj8n dark:text-neutral-200"> 31 </button> </div> <div > <button type="button" class="p6abj qil8e flex r00n9 items-center wfm4e qb17b t5ziw bp13m ze09w nkcue oq0dt disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden kf4z7 dark:text-neutral-200 dark:hover:border-neutral-500 dark:focus:bg-neutral-700" disabled> 1 </button> </div> <div> <button type="button" class="p6abj qil8e flex r00n9 items-center wfm4e qb17b t5ziw bp13m ze09w nkcue oq0dt disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden kf4z7 dark:text-neutral-200 dark:hover:border-neutral-500 dark:focus:bg-neutral-700" disabled> 2 </button> </div> <div> <button type="button" class="p6abj qil8e flex r00n9 items-center wfm4e qb17b t5ziw bp13m ze09w nkcue oq0dt disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden kf4z7 dark:text-neutral-200 dark:hover:border-neutral-500 dark:focus:bg-neutral-700" disabled> 3 </button> </div> <div> <button type="button" class="p6abj qil8e flex r00n9 items-center wfm4e qb17b t5ziw bp13m ze09w nkcue oq0dt disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden kf4z7 dark:text-neutral-200 dark:hover:border-neutral-500 dark:focus:bg-neutral-700" disabled> 4 </button> </div> <div> <button type="button" class="p6abj qil8e flex r00n9 items-center wfm4e qb17b t5ziw bp13m ze09w nkcue oq0dt disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden kf4z7 dark:text-neutral-200 dark:hover:border-neutral-500 dark:focus:bg-neutral-700" disabled> 5 </button> </div> <div> <button type="button" class="p6abj qil8e flex r00n9 items-center wfm4e qb17b t5ziw bp13m ze09w nkcue oq0dt disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden kf4z7 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="i7oig rfnst inline-flex items-center lialp cm336 vo20k ps5iq wfm4e qb17b h1a67 zr4l6 z3bp0 disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden v1cco vjs3l dark:focus:ring-indigo-500"> <svg class="hidden sm:block hq6gx stqz8" 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="gxlt6 blhyt space-y-4"> <!-- Empty State --> <div class="xlz15 t3zc0 flex flex-col r00n9 items-center lj7mp"> <svg class="rmc90 mx-auto" 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="bxw6c dark:fill-neutral-700"/> <rect x="9" y="20" width="6" height="45" fill="currentColor" class="bxw6c dark:fill-neutral-700"/> <rect x="18" y="25" width="6" height="40" fill="currentColor" class="bxw6c dark:fill-neutral-700"/> <rect x="27" width="6" height="65" fill="currentColor" class="bxw6c dark:fill-neutral-700"/> <rect x="36" y="5" width="6" height="60" fill="currentColor" class="bxw6c dark:fill-neutral-700"/> <rect x="45" y="40" width="6" height="25" fill="currentColor" class="bxw6c dark:fill-neutral-700"/> <rect x="54" y="25" width="6" height="40" fill="currentColor" class="bxw6c dark:fill-neutral-700"/> <rect x="63" y="12" width="6" height="53" fill="currentColor" class="bxw6c dark:fill-neutral-700"/> <rect x="72" width="6" height="65" fill="currentColor" class="bxw6c dark:fill-neutral-700"/> <rect x="81" y="44" width="6" height="21" fill="currentColor" class="bxw6c dark:fill-neutral-700"/> </svg> <div class="idprf mx-auto"> <p class="ls9te vo20k bp13m dark:text-neutral-200"> No data </p> <p class="iqt6z t5ziw t6rrs dark:text-neutral-500"> No data here yet. We will notify you when there's an update. </p> </div> <button type="button" class="i7oig apc69 inline-flex items-center lialp cm336 vo20k ps5iq wfm4e qb17b h1a67 zr4l6 z3bp0 disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden v1cco iqwqc" data-hs-overlay="#hs-pro-pabchesb"> <svg class="hidden sm:block hq6gx stqz8" 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 um8nq qpmwn"> <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="xlz15 a97zp flex flex-col r00n9 items-center lj7mp"> <svg class="rmc90 mx-auto dl93o" 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="mlmpr dark:fill-neutral-800"/> <rect x="27" y="50.5" width="124" height="39" rx="7.5" stroke="currentColor" class="l4rfy dark:stroke-neutral-700/10"/> <rect x="34.5" y="58" width="24" height="24" rx="4" fill="currentColor" class="hb386 dark:fill-neutral-700/30"/> <rect x="66.5" y="61" width="60" height="6" rx="3" fill="currentColor" class="hb386 dark:fill-neutral-700/30"/> <rect x="66.5" y="73" width="77" height="6" rx="3" fill="currentColor" class="hb386 dark:fill-neutral-700/30"/> <rect x="19.5" y="28.5" width="139" height="39" rx="7.5" fill="currentColor" class="mlmpr dark:fill-neutral-800"/> <rect x="19.5" y="28.5" width="139" height="39" rx="7.5" stroke="currentColor" class="c7le4 dark:stroke-neutral-700/30"/> <rect x="27" y="36" width="24" height="24" rx="4" fill="currentColor" class="p2drp dark:fill-neutral-700/70"/> <rect x="59" y="39" width="60" height="6" rx="3" fill="currentColor" class="p2drp dark:fill-neutral-700/70"/> <rect x="59" y="51" width="92" height="6" rx="3" fill="currentColor" class="p2drp dark:fill-neutral-700/70"/> <g filter="url(#filter19)"> <rect x="12" y="6" width="154" height="40" rx="8" fill="currentColor" class="mlmpr dark:fill-neutral-800" shape-rendering="crispEdges"/> <rect x="12.5" y="6.5" width="153" height="39" rx="7.5" stroke="currentColor" class="c7le4 dark:stroke-neutral-700/60" shape-rendering="crispEdges"/> <rect x="20" y="14" width="24" height="24" rx="4" fill="currentColor" class="bxw6c dark:fill-neutral-700 "/> <rect x="52" y="17" width="60" height="6" rx="3" fill="currentColor" class="bxw6c dark:fill-neutral-700"/> <rect x="52" y="29" width="106" height="6" rx="3" fill="currentColor" class="bxw6c 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="idprf mx-auto"> <p class="ls9te vo20k bp13m dark:text-neutral-200"> No projects </p> <p class="iqt6z t5ziw t6rrs 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=3.0.1"></script> </body> </html>
<!-- Empty State --> <div class="xlz15 a97zp flex flex-col r00n9 items-center lj7mp"> <svg class="rmc90 mx-auto dl93o" 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="mlmpr dark:fill-neutral-800"/> <rect x="27" y="50.5" width="124" height="39" rx="7.5" stroke="currentColor" class="l4rfy dark:stroke-neutral-700/10"/> <rect x="34.5" y="58" width="24" height="24" rx="4" fill="currentColor" class="hb386 dark:fill-neutral-700/30"/> <rect x="66.5" y="61" width="60" height="6" rx="3" fill="currentColor" class="hb386 dark:fill-neutral-700/30"/> <rect x="66.5" y="73" width="77" height="6" rx="3" fill="currentColor" class="hb386 dark:fill-neutral-700/30"/> <rect x="19.5" y="28.5" width="139" height="39" rx="7.5" fill="currentColor" class="mlmpr dark:fill-neutral-800"/> <rect x="19.5" y="28.5" width="139" height="39" rx="7.5" stroke="currentColor" class="c7le4 dark:stroke-neutral-700/30"/> <rect x="27" y="36" width="24" height="24" rx="4" fill="currentColor" class="p2drp dark:fill-neutral-700/70"/> <rect x="59" y="39" width="60" height="6" rx="3" fill="currentColor" class="p2drp dark:fill-neutral-700/70"/> <rect x="59" y="51" width="92" height="6" rx="3" fill="currentColor" class="p2drp dark:fill-neutral-700/70"/> <g filter="url(#filter19)"> <rect x="12" y="6" width="154" height="40" rx="8" fill="currentColor" class="mlmpr dark:fill-neutral-800" shape-rendering="crispEdges"/> <rect x="12.5" y="6.5" width="153" height="39" rx="7.5" stroke="currentColor" class="c7le4 dark:stroke-neutral-700/60" shape-rendering="crispEdges"/> <rect x="20" y="14" width="24" height="24" rx="4" fill="currentColor" class="bxw6c dark:fill-neutral-700 "/> <rect x="52" y="17" width="60" height="6" rx="3" fill="currentColor" class="bxw6c dark:fill-neutral-700"/> <rect x="52" y="29" width="106" height="6" rx="3" fill="currentColor" class="bxw6c 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="idprf mx-auto"> <p class="ls9te vo20k bp13m dark:text-neutral-200"> No projects </p> <p class="iqt6z t5ziw t6rrs 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