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 xubsc 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 y56xt lcvuk"> <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="q0mum l0v7c yob35"><!-- Browsers Card --> <div class="lcvuk flex egjkw lx3ar aesap m457n peu41 xfco6 dark:bg-neutral-800 dark:border-neutral-700"> <!-- Header --> <div class="jjx2u nblgz flex qj8qf items-center"> <h2 class="xudtb fip28 a66ko i6scm dark:text-neutral-200"> Browsers </h2> </div> <!-- End Header --> <!-- Body --> <div class="flex egjkw qj8qf lcvuk tlcck aezid"> <div> <h4 class="whnq5 x76kn mwwf4 w3gzo dark:text-blue-500"> <span class="v5g12 oovrb g835c oltsu f9h82"> 0 </span> </h4> <p class="nsgfh daned dark:text-neutral-500"> Visitors are viewing website from the desktop device. </p> </div> <!-- Stats --> <div class="nsgfh"> <!-- Grid --> <div class="bd993 nkeid nax65"> <!-- Card --> <div class="jeqo2 aesap ykoc7 m457n dark:border-neutral-700 klofg"> <img class="ylm2u xuwx7 vxa5s" src="../../assets/svg/brands/chrome.svg" alt="Chrome Logo"> <p class="ibyb7 i6scm dark:text-neutral-200"> Chrome </p> <p class="a66ko btos2 i6scm dark:text-neutral-200"> 0 </p> </div> <!-- End Card --> <!-- Card --> <div class="jeqo2 aesap ykoc7 m457n dark:border-neutral-700 klofg"> <img class="ylm2u xuwx7 vxa5s" src="../../assets/svg/brands/firefox.svg" alt="Firefox Logo"> <p class="ibyb7 i6scm dark:text-neutral-200"> Firefox </p> <p class="a66ko btos2 i6scm dark:text-neutral-200"> 0 </p> </div> <!-- End Card --> <!-- Card --> <div class="jeqo2 aesap ykoc7 m457n dark:border-neutral-700 klofg"> <img class="ylm2u xuwx7 vxa5s" src="../../assets/svg/brands/safari.svg" alt="Safari Logo"> <p class="ibyb7 i6scm dark:text-neutral-200"> Safari </p> <p class="a66ko btos2 i6scm dark:text-neutral-200"> 0 </p> </div> <!-- End Card --> </div> <!-- End Grid --> </div> <!-- End Stats --> <div class="nsgfh"> <!-- Alert --> <div class="lx3ar aesap m457n xfco6 peu41 kun15 sr7qy dark:bg-neutral-800 dark:border-neutral-700" role="alert" tabindex="-1" aria-labelledby="hs-pro-dpna-label"> <div class="flex u4mmg"> <svg class="sunl2 ylm2u qdd8v i6scm 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="v6j3t"> <h3 id="hs-pro-dpna-label" class="ibyb7 i6scm a66ko dark:text-white"> Push notifications </h3> <p class="ibyb7 p1nwo dark:text-neutral-400"> Automatically send me notifications </p> </div> <!-- Switch/Toggle --> <div class="flex qj8qf items-center"> <label for="hs-pro-dbcpns" class="l14y8">On</label> <div class="relative fip28"> <input type="checkbox" id="hs-pro-dbcpns" class="relative x24yd a3ylr fyivg i2ex5 r0r2c f9h82 drtn2 cursor-pointer tsise c6wne obzmg irzk2 j01y2 otank 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 mnbio sux6t jho3p uv5nn k1lzj y13pt d1p5y lx487 fn3pi qb50i j3h53 fcftr mw1z4 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="lcvuk flex egjkw lx3ar aesap m457n peu41 xfco6 dark:bg-neutral-800 dark:border-neutral-700"> <!-- Header --> <div class="jjx2u nblgz flex qj8qf items-center"> <h2 class="xudtb fip28 a66ko i6scm dark:text-neutral-200"> Browsers </h2> </div> <!-- End Header --> <!-- Body --> <div class="flex egjkw qj8qf lcvuk tlcck aezid"> <div> <h4 class="whnq5 x76kn mwwf4 w3gzo dark:text-blue-500"> <span class="v5g12 oovrb g835c oltsu f9h82"> 0 </span> </h4> <p class="nsgfh daned dark:text-neutral-500"> Visitors are viewing website from the desktop device. </p> </div> <!-- Stats --> <div class="nsgfh"> <!-- Grid --> <div class="bd993 nkeid nax65"> <!-- Card --> <div class="jeqo2 aesap ykoc7 m457n dark:border-neutral-700 klofg"> <img class="ylm2u xuwx7 vxa5s" src="../../assets/svg/brands/chrome.svg" alt="Chrome Logo"> <p class="ibyb7 i6scm dark:text-neutral-200"> Chrome </p> <p class="a66ko btos2 i6scm dark:text-neutral-200"> 0 </p> </div> <!-- End Card --> <!-- Card --> <div class="jeqo2 aesap ykoc7 m457n dark:border-neutral-700 klofg"> <img class="ylm2u xuwx7 vxa5s" src="../../assets/svg/brands/firefox.svg" alt="Firefox Logo"> <p class="ibyb7 i6scm dark:text-neutral-200"> Firefox </p> <p class="a66ko btos2 i6scm dark:text-neutral-200"> 0 </p> </div> <!-- End Card --> <!-- Card --> <div class="jeqo2 aesap ykoc7 m457n dark:border-neutral-700 klofg"> <img class="ylm2u xuwx7 vxa5s" src="../../assets/svg/brands/safari.svg" alt="Safari Logo"> <p class="ibyb7 i6scm dark:text-neutral-200"> Safari </p> <p class="a66ko btos2 i6scm dark:text-neutral-200"> 0 </p> </div> <!-- End Card --> </div> <!-- End Grid --> </div> <!-- End Stats --> <div class="nsgfh"> <!-- Alert --> <div class="lx3ar aesap m457n xfco6 peu41 kun15 sr7qy dark:bg-neutral-800 dark:border-neutral-700" role="alert" tabindex="-1" aria-labelledby="hs-pro-dpna-label"> <div class="flex u4mmg"> <svg class="sunl2 ylm2u qdd8v i6scm 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="v6j3t"> <h3 id="hs-pro-dpna-label" class="ibyb7 i6scm a66ko dark:text-white"> Push notifications </h3> <p class="ibyb7 p1nwo dark:text-neutral-400"> Automatically send me notifications </p> </div> <!-- Switch/Toggle --> <div class="flex qj8qf items-center"> <label for="hs-pro-dbcpns" class="l14y8">On</label> <div class="relative fip28"> <input type="checkbox" id="hs-pro-dbcpns" class="relative x24yd a3ylr fyivg i2ex5 r0r2c f9h82 drtn2 cursor-pointer tsise c6wne obzmg irzk2 j01y2 otank 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 mnbio sux6t jho3p uv5nn k1lzj y13pt d1p5y lx487 fn3pi qb50i j3h53 fcftr mw1z4 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
New
Preview
Get the code
Existing accounts: Sign in to your account to access the source code.
<!DOCTYPE html> <html lang="en" dir="" class="relative y56xt lcvuk"> <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 egjkw lx3ar aesap m457n shadow-[0_4px_6px_0px_rgba(0,0,0,0.03)] xfco6 dark:bg-neutral-800 dark:border-neutral-700"><!-- Header --> <div class="hxiry m457n dark:border-neutral-700"> <!-- Page Header --> <div class="gtgfz aezid flex qj8qf items-center zeqcc"> <h2 class="fip28 a66ko i6scm dark:text-neutral-200"> Preline </h2> <div class="flex zmyke items-center syne5"> <!-- Calendar Dropdown --> <div class="hs-dropdown [--auto-close:inside] [--placement:top-right] jqzvs"> <button id="hs-pro-dnic" type="button" class="etcw0 jqzvs items-center zlgt1 mwwf4 klofg aesap m457n lx3ar i6scm peu41 dobbe j01y2 otank wh5re ss1ti 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="ylm2u icspj enx0e" 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="ylm2u lnjs9 enx0e" 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 p2mfi transition-[opacity,margin] duration opacity-0 hidden xywim lx3ar xfco6 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="jeqo2 rnyto"> <!-- Months --> <div class="bd993 x8hew items-center u4mmg b2wcu nblgz"> <!-- Prev Button --> <div class="qgtgq"> <button type="button" class="uiima flex t2j25 items-center i6scm s1xgi drtn2 j01y2 otank wh5re lug43 dark:text-neutral-400 dark:hover:bg-neutral-800 dark:focus:bg-neutral-800"> <svg class="ylm2u yaf2e" 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="v5ybc flex t2j25 items-center rz3p9"> <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 q9qvy q0mum cursor-pointer cbt59 mwwf4 i6scm hruhb wh5re q10le etwkc zlj2b s4vql dark:text-neutral-200 dark:hover:text-neutral-300 dark:focus:text-neutral-300", "dropdownClasses": "huvyz xywim csg0j ng19c bsjk7 rnyto lx3ar aesap m457n klofg x3vl5 ca7mt zlsid msslc qdwom gjvdb r21b7 dark:[&::-webkit-scrollbar-track]:bg-neutral-700 dark:[&::-webkit-scrollbar-thumb]:bg-neutral-500 dark:bg-neutral-900 dark:border-neutral-700", "optionClasses": "etcw0 q0mum ibyb7 i6scm cursor-pointer s1xgi klofg wh5re lug43 dark:bg-neutral-900 dark:hover:bg-neutral-800 dark:text-neutral-200 dark:focus:bg-neutral-800", "optionTemplate": "<div class=\"flex qj8qf items-center q0mum \"><span data-title></span><span class=\"hidden hs-selected:block \"><svg class=\"ylm2u enx0e i6scm 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="i6scm 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 q9qvy q0mum cursor-pointer cbt59 mwwf4 i6scm hruhb wh5re q10le etwkc zlj2b s4vql dark:text-neutral-200 dark:hover:text-neutral-300 dark:focus:text-neutral-300", "dropdownClasses": "huvyz xywim twr4n ng19c bsjk7 rnyto lx3ar aesap m457n klofg x3vl5 ca7mt zlsid msslc qdwom gjvdb r21b7 dark:[&::-webkit-scrollbar-track]:bg-neutral-700 dark:[&::-webkit-scrollbar-thumb]:bg-neutral-500 dark:bg-neutral-900 dark:border-neutral-700", "optionClasses": "etcw0 q0mum ibyb7 i6scm cursor-pointer s1xgi klofg wh5re lug43 dark:bg-neutral-900 dark:hover:bg-neutral-800 dark:text-neutral-200 dark:focus:bg-neutral-800", "optionTemplate": "<div class=\"flex qj8qf items-center q0mum \"><span data-title></span><span class=\"hidden hs-selected:block \"><svg class=\"ylm2u enx0e i6scm 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="qgtgq flex zmyke"> <button type="button" class=" uiima flex t2j25 items-center i6scm s1xgi drtn2 j01y2 otank wh5re lug43 dark:text-neutral-400 dark:hover:bg-neutral-800 dark:focus:bg-neutral-800"> <svg class="ylm2u yaf2e" 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 l3luo"> <span class="p37dm axth2 block ojv0p ibyb7 daned dark:text-neutral-500"> Mo </span> <span class="p37dm axth2 block ojv0p ibyb7 daned dark:text-neutral-500"> Tu </span> <span class="p37dm axth2 block ojv0p ibyb7 daned dark:text-neutral-500"> We </span> <span class="p37dm axth2 block ojv0p ibyb7 daned dark:text-neutral-500"> Th </span> <span class="p37dm axth2 block ojv0p ibyb7 daned dark:text-neutral-500"> Fr </span> <span class="p37dm axth2 block ojv0p ibyb7 daned dark:text-neutral-500"> Sa </span> <span class="p37dm axth2 block ojv0p ibyb7 daned dark:text-neutral-500"> Su </span> </div> <!-- Weeks --> <!-- Days --> <div class="flex"> <div> <button type="button" class="p37dm f68gs flex t2j25 items-center aesap r0r2c ibyb7 i6scm drtn2 mswab tfgda j01y2 otank wh5re nng5j qq7u8 dark:text-neutral-200" disabled> 26 </button> </div> <div> <button type="button" class="p37dm f68gs flex t2j25 items-center aesap r0r2c ibyb7 i6scm drtn2 mswab tfgda j01y2 otank wh5re nng5j qq7u8 dark:text-neutral-200" disabled> 27 </button> </div> <div> <button type="button" class="p37dm f68gs flex t2j25 items-center aesap r0r2c ibyb7 i6scm drtn2 mswab tfgda j01y2 otank wh5re nng5j qq7u8 dark:text-neutral-200" disabled> 28 </button> </div> <div> <button type="button" class="p37dm f68gs flex t2j25 items-center aesap r0r2c ibyb7 i6scm drtn2 mswab tfgda j01y2 otank wh5re nng5j qq7u8 dark:text-neutral-200" disabled> 29 </button> </div> <div> <button type="button" class="p37dm f68gs flex t2j25 items-center aesap r0r2c ibyb7 i6scm drtn2 mswab tfgda j01y2 otank wh5re nng5j qq7u8 dark:text-neutral-200" disabled> 30 </button> </div> <div> <button type="button" class="p37dm f68gs flex t2j25 items-center aesap r0r2c ibyb7 i6scm drtn2 mswab tfgda j01y2 otank wh5re nng5j qq7u8 dark:text-neutral-200"> 1 </button> </div> <div> <button type="button" class="p37dm f68gs flex t2j25 items-center aesap r0r2c ibyb7 i6scm drtn2 mswab tfgda j01y2 otank wh5re nng5j qq7u8 dark:text-neutral-200"> 2 </button> </div> </div> <!-- Days --> <!-- Days --> <div class="flex"> <div> <button type="button" class="p37dm f68gs flex t2j25 items-center aesap r0r2c ibyb7 i6scm drtn2 mswab tfgda j01y2 otank wh5re nng5j qq7u8 dark:text-neutral-200"> 3 </button> </div> <div> <button type="button" class="p37dm f68gs flex t2j25 items-center aesap r0r2c ibyb7 i6scm drtn2 mswab tfgda j01y2 otank wh5re nng5j qq7u8 dark:text-neutral-200"> 4 </button> </div> <div > <button type="button" class="p37dm f68gs flex t2j25 items-center aesap r0r2c ibyb7 i6scm drtn2 mswab tfgda j01y2 otank wh5re nng5j qq7u8 dark:text-neutral-200"> 5 </button> </div> <div > <button type="button" class="p37dm f68gs flex t2j25 items-center aesap r0r2c ibyb7 i6scm drtn2 mswab tfgda j01y2 otank wh5re nng5j qq7u8 dark:text-neutral-200"> 6 </button> </div> <div > <button type="button" class="p37dm f68gs flex t2j25 items-center aesap r0r2c ibyb7 i6scm drtn2 mswab tfgda j01y2 otank wh5re nng5j qq7u8 dark:text-neutral-200"> 7 </button> </div> <div > <button type="button" class="p37dm f68gs flex t2j25 items-center aesap r0r2c ibyb7 i6scm drtn2 mswab tfgda j01y2 otank wh5re nng5j qq7u8 dark:text-neutral-200"> 8 </button> </div> <div > <button type="button" class="p37dm f68gs flex t2j25 items-center aesap r0r2c ibyb7 i6scm drtn2 mswab tfgda j01y2 otank wh5re nng5j qq7u8 dark:text-neutral-200"> 9 </button> </div> </div> <!-- Days --> <!-- Days --> <div class="flex"> <div > <button type="button" class="p37dm f68gs flex t2j25 items-center aesap r0r2c ibyb7 i6scm drtn2 mswab tfgda j01y2 otank wh5re nng5j qq7u8 dark:text-neutral-200"> 10 </button> </div> <div > <button type="button" class="p37dm f68gs flex t2j25 items-center aesap r0r2c ibyb7 i6scm drtn2 mswab tfgda j01y2 otank wh5re nng5j qq7u8 dark:text-neutral-200"> 11 </button> </div> <div > <button type="button" class="p37dm f68gs flex t2j25 items-center aesap r0r2c ibyb7 i6scm drtn2 mswab tfgda j01y2 otank wh5re nng5j qq7u8 dark:text-neutral-200"> 12 </button> </div> <div> <button type="button" class="p37dm f68gs flex t2j25 items-center aesap r0r2c ibyb7 i6scm drtn2 mswab tfgda j01y2 otank wh5re nng5j qq7u8 dark:text-neutral-200"> 13 </button> </div> <div> <button type="button" class="p37dm f68gs flex t2j25 items-center aesap r0r2c ibyb7 i6scm drtn2 mswab tfgda j01y2 otank wh5re nng5j qq7u8 dark:text-neutral-200"> 14 </button> </div> <div> <button type="button" class="p37dm f68gs flex t2j25 items-center aesap r0r2c ibyb7 i6scm drtn2 mswab tfgda j01y2 otank wh5re nng5j qq7u8 dark:text-neutral-200"> 15 </button> </div> <div> <button type="button" class="p37dm f68gs flex t2j25 items-center aesap r0r2c ibyb7 i6scm drtn2 mswab tfgda j01y2 otank wh5re nng5j qq7u8 dark:text-neutral-200"> 16 </button> </div> </div> <!-- Days --> <!-- Days --> <div class="flex"> <div> <button type="button" class="p37dm f68gs flex t2j25 items-center aesap r0r2c ibyb7 i6scm drtn2 mswab tfgda j01y2 otank wh5re nng5j qq7u8 dark:text-neutral-200"> 17 </button> </div> <div> <button type="button" class="p37dm f68gs flex t2j25 items-center aesap r0r2c ibyb7 i6scm drtn2 mswab tfgda j01y2 otank wh5re nng5j qq7u8 dark:text-neutral-200"> 18 </button> </div> <div> <button type="button" class="p37dm f68gs flex t2j25 items-center aesap r0r2c ibyb7 i6scm drtn2 mswab tfgda j01y2 otank wh5re nng5j qq7u8 dark:text-neutral-200"> 19 </button> </div> <div> <button type="button" class="p37dm f68gs flex t2j25 items-center m2a72 aesap r0r2c ibyb7 mwwf4 i3pem mswab drtn2 dark:bg-indigo-500 j01y2 otank wh5re lug43 dark:hover:border-neutral-700"> 20 </button> </div> <div> <button type="button" class="p37dm f68gs flex t2j25 items-center aesap r0r2c ibyb7 i6scm drtn2 mswab tfgda j01y2 otank wh5re nng5j qq7u8 dark:text-neutral-200"> 21 </button> </div> <div> <button type="button" class="p37dm f68gs flex t2j25 items-center aesap r0r2c ibyb7 i6scm drtn2 mswab tfgda j01y2 otank wh5re nng5j qq7u8 dark:text-neutral-200"> 22 </button> </div> <div> <button type="button" class="p37dm f68gs flex t2j25 items-center aesap r0r2c ibyb7 i6scm drtn2 mswab tfgda j01y2 otank wh5re nng5j qq7u8 dark:text-neutral-200"> 23 </button> </div> </div> <!-- Days --> <!-- Days --> <div class="flex"> <div> <button type="button" class="p37dm f68gs flex t2j25 items-center aesap r0r2c ibyb7 i6scm drtn2 mswab tfgda j01y2 otank wh5re nng5j qq7u8 dark:text-neutral-200"> 24 </button> </div> <div > <button type="button" class="p37dm f68gs flex t2j25 items-center aesap r0r2c ibyb7 i6scm drtn2 mswab tfgda j01y2 otank wh5re nng5j qq7u8 dark:text-neutral-200"> 25 </button> </div> <div > <button type="button" class="p37dm f68gs flex t2j25 items-center aesap r0r2c ibyb7 i6scm drtn2 mswab tfgda j01y2 otank wh5re nng5j qq7u8 dark:text-neutral-200"> 26 </button> </div> <div > <button type="button" class="p37dm f68gs flex t2j25 items-center aesap r0r2c ibyb7 i6scm drtn2 mswab tfgda j01y2 otank wh5re nng5j qq7u8 dark:text-neutral-200"> 27 </button> </div> <div > <button type="button" class="p37dm f68gs flex t2j25 items-center aesap r0r2c ibyb7 i6scm drtn2 mswab tfgda j01y2 otank wh5re nng5j qq7u8 dark:text-neutral-200"> 28 </button> </div> <div > <button type="button" class="p37dm f68gs flex t2j25 items-center aesap r0r2c ibyb7 i6scm drtn2 mswab tfgda j01y2 otank wh5re nng5j qq7u8 dark:text-neutral-200"> 29 </button> </div> <div > <button type="button" class="p37dm f68gs flex t2j25 items-center aesap r0r2c ibyb7 i6scm drtn2 mswab tfgda j01y2 otank wh5re nng5j qq7u8 dark:text-neutral-200"> 30 </button> </div> </div> <!-- Days --> <!-- Days --> <div class="flex"> <div > <button type="button" class="p37dm f68gs flex t2j25 items-center aesap r0r2c ibyb7 i6scm drtn2 mswab tfgda j01y2 otank wh5re nng5j qq7u8 dark:text-neutral-200"> 31 </button> </div> <div > <button type="button" class="p37dm f68gs flex t2j25 items-center aesap r0r2c ibyb7 i6scm mswab tfgda drtn2 j01y2 otank wh5re lug43 dark:text-neutral-200 dark:hover:border-neutral-500 dark:focus:bg-neutral-700" disabled> 1 </button> </div> <div> <button type="button" class="p37dm f68gs flex t2j25 items-center aesap r0r2c ibyb7 i6scm mswab tfgda drtn2 j01y2 otank wh5re lug43 dark:text-neutral-200 dark:hover:border-neutral-500 dark:focus:bg-neutral-700" disabled> 2 </button> </div> <div> <button type="button" class="p37dm f68gs flex t2j25 items-center aesap r0r2c ibyb7 i6scm mswab tfgda drtn2 j01y2 otank wh5re lug43 dark:text-neutral-200 dark:hover:border-neutral-500 dark:focus:bg-neutral-700" disabled> 3 </button> </div> <div> <button type="button" class="p37dm f68gs flex t2j25 items-center aesap r0r2c ibyb7 i6scm mswab tfgda drtn2 j01y2 otank wh5re lug43 dark:text-neutral-200 dark:hover:border-neutral-500 dark:focus:bg-neutral-700" disabled> 4 </button> </div> <div> <button type="button" class="p37dm f68gs flex t2j25 items-center aesap r0r2c ibyb7 i6scm mswab tfgda drtn2 j01y2 otank wh5re lug43 dark:text-neutral-200 dark:hover:border-neutral-500 dark:focus:bg-neutral-700" disabled> 5 </button> </div> <div> <button type="button" class="p37dm f68gs flex t2j25 items-center aesap r0r2c ibyb7 i6scm mswab tfgda drtn2 j01y2 otank wh5re lug43 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="kun15 cz3ro jqzvs items-center syne5 zlgt1 mwwf4 klofg aesap r0r2c m2a72 i3pem g04u3 j01y2 otank wh5re odr96 bfe8x dark:focus:ring-indigo-500"> <svg class="hidden e53q4 ylm2u enx0e" 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="dnkun aezid wuzx9"> <!-- Empty State --> <div class="jjx2u j6gbu flex egjkw t2j25 items-center ojv0p"> <svg class="rh3a4 yob35" 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="ylane dark:fill-neutral-700"/> <rect x="9" y="20" width="6" height="45" fill="currentColor" class="ylane dark:fill-neutral-700"/> <rect x="18" y="25" width="6" height="40" fill="currentColor" class="ylane dark:fill-neutral-700"/> <rect x="27" width="6" height="65" fill="currentColor" class="ylane dark:fill-neutral-700"/> <rect x="36" y="5" width="6" height="60" fill="currentColor" class="ylane dark:fill-neutral-700"/> <rect x="45" y="40" width="6" height="25" fill="currentColor" class="ylane dark:fill-neutral-700"/> <rect x="54" y="25" width="6" height="40" fill="currentColor" class="ylane dark:fill-neutral-700"/> <rect x="63" y="12" width="6" height="53" fill="currentColor" class="ylane dark:fill-neutral-700"/> <rect x="72" width="6" height="65" fill="currentColor" class="ylane dark:fill-neutral-700"/> <rect x="81" y="44" width="6" height="21" fill="currentColor" class="ylane dark:fill-neutral-700"/> </svg> <div class="oeiai yob35"> <p class="huvyz mwwf4 i6scm dark:text-neutral-200"> No data </p> <p class="z9z79 ibyb7 daned dark:text-neutral-500"> No data here yet. We will notify you when there's an update. </p> </div> <button type="button" class="kun15 sr7qy jqzvs items-center syne5 zlgt1 mwwf4 klofg aesap r0r2c m2a72 i3pem g04u3 j01y2 otank wh5re odr96 wfvxl" data-hs-overlay="#hs-pro-pabchesb"> <svg class="hidden e53q4 ylm2u enx0e" 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 = 'hds6s np1k4 lx3ar aesap m457n i6scm klofg f9e7l dark:bg-neutral-800 dark:border-neutral-700', wrapperExtClasses = '', seriesClasses = 'xtce4', seriesExtClasses = '', titleClasses = 'a66ko va4on x3whp ivp9k i6scm diz87 dark:!bg-neutral-800 dark:!border-neutral-700 dark:text-neutral-200', titleExtClasses = '', markerClasses = 'ymyjz vdiby k7o0d', markerExtClasses = 'oqv92', valueClasses = 'p38o0 daned h9zjh dark:text-neutral-400', valueExtClasses = '', labelClasses = 'daned 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 t2fub ${hasTextLabel ? 'f8qbv' : ''} 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 jg054"> <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 = 'hds6s np1k4 lx3ar aesap m457n i6scm klofg f9e7l dark:bg-neutral-800 dark:border-neutral-700', wrapperExtClasses = '', seriesClasses = 'f8qbv q0mum xtce4', seriesExtClasses = '', titleClasses = 'flex qj8qf a66ko va4on x3whp ivp9k i6scm diz87 dark:!bg-neutral-800 dark:!border-neutral-700 dark:text-neutral-200', titleExtClasses = '', markerClasses = 'ymyjz vdiby k7o0d', markerExtClasses = 'oqv92', valueClasses = 'p38o0 daned h9zjh dark:text-neutral-400', valueExtClasses = '', labelClasses = 'daned dark:text-neutral-400 qupk7', 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="fip28 yaf2e yrnw3" 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="fip28 yaf2e yrnw3" 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} t2fub 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 jg054"> ${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 rz3p9 ${!isDifferenceIsNull ? (isGrowing ? 'zkd6r' : 'a8poe') : ''} qupk7"> ${!isDifferenceIsNull ? icon : ''} <span class="fip28 ibyb7"> ${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 = 'hds6s np1k4 lx3ar aesap m457n i6scm klofg f9e7l dark:bg-neutral-800 dark:border-neutral-700', wrapperExtClasses = '', seriesClasses = 'f8qbv q0mum xtce4', seriesExtClasses = '', titleClasses = 'flex qj8qf a66ko va4on x3whp ivp9k i6scm diz87 dark:!bg-neutral-800 dark:!border-neutral-700 dark:text-neutral-200', titleExtClasses = '', markerClasses = 'ymyjz vdiby k7o0d', markerExtClasses = 'oqv92', valueClasses = 'p38o0 daned h9zjh dark:text-neutral-400', valueExtClasses = '', labelClasses = 'daned dark:text-neutral-400 qupk7', 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="fip28 yaf2e yrnw3" 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="fip28 yaf2e yrnw3" 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 t2fub ${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 xtce4"> <div class="apexcharts-tooltip-y-group jg054"> <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 rz3p9 ${!isDifferenceIsNull ? (isGrowing ? 'zkd6r' : 'a8poe') : ''} qupk7"> ${!isDifferenceIsNull ? icon : ''} <span class="fip28 ibyb7"> ${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: 'wjgdo', labelDivider: ':', labelExtClasses: 'qupk7' }); } }, 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="hxiry m457n dark:border-neutral-700"> <!-- Page Header --> <div class="gtgfz aezid flex qj8qf items-center zeqcc"> <h2 class="fip28 a66ko i6scm dark:text-neutral-200"> Preline </h2> <div class="flex zmyke items-center syne5"> <!-- Calendar Dropdown --> <div class="hs-dropdown [--auto-close:inside] [--placement:top-right] jqzvs"> <button id="hs-pro-dnic" type="button" class="etcw0 jqzvs items-center zlgt1 mwwf4 klofg aesap m457n lx3ar i6scm peu41 dobbe j01y2 otank wh5re ss1ti 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="ylm2u icspj enx0e" 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="ylm2u lnjs9 enx0e" 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 p2mfi transition-[opacity,margin] duration opacity-0 hidden xywim lx3ar xfco6 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="jeqo2 rnyto"> <!-- Months --> <div class="bd993 x8hew items-center u4mmg b2wcu nblgz"> <!-- Prev Button --> <div class="qgtgq"> <button type="button" class="uiima flex t2j25 items-center i6scm s1xgi drtn2 j01y2 otank wh5re lug43 dark:text-neutral-400 dark:hover:bg-neutral-800 dark:focus:bg-neutral-800"> <svg class="ylm2u yaf2e" 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="v5ybc flex t2j25 items-center rz3p9"> <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 q9qvy q0mum cursor-pointer cbt59 mwwf4 i6scm hruhb wh5re q10le etwkc zlj2b s4vql dark:text-neutral-200 dark:hover:text-neutral-300 dark:focus:text-neutral-300", "dropdownClasses": "huvyz xywim csg0j ng19c bsjk7 rnyto lx3ar aesap m457n klofg x3vl5 ca7mt zlsid msslc qdwom gjvdb r21b7 dark:[&::-webkit-scrollbar-track]:bg-neutral-700 dark:[&::-webkit-scrollbar-thumb]:bg-neutral-500 dark:bg-neutral-900 dark:border-neutral-700", "optionClasses": "etcw0 q0mum ibyb7 i6scm cursor-pointer s1xgi klofg wh5re lug43 dark:bg-neutral-900 dark:hover:bg-neutral-800 dark:text-neutral-200 dark:focus:bg-neutral-800", "optionTemplate": "<div class=\"flex qj8qf items-center q0mum \"><span data-title></span><span class=\"hidden hs-selected:block \"><svg class=\"ylm2u enx0e i6scm 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="i6scm 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 q9qvy q0mum cursor-pointer cbt59 mwwf4 i6scm hruhb wh5re q10le etwkc zlj2b s4vql dark:text-neutral-200 dark:hover:text-neutral-300 dark:focus:text-neutral-300", "dropdownClasses": "huvyz xywim twr4n ng19c bsjk7 rnyto lx3ar aesap m457n klofg x3vl5 ca7mt zlsid msslc qdwom gjvdb r21b7 dark:[&::-webkit-scrollbar-track]:bg-neutral-700 dark:[&::-webkit-scrollbar-thumb]:bg-neutral-500 dark:bg-neutral-900 dark:border-neutral-700", "optionClasses": "etcw0 q0mum ibyb7 i6scm cursor-pointer s1xgi klofg wh5re lug43 dark:bg-neutral-900 dark:hover:bg-neutral-800 dark:text-neutral-200 dark:focus:bg-neutral-800", "optionTemplate": "<div class=\"flex qj8qf items-center q0mum \"><span data-title></span><span class=\"hidden hs-selected:block \"><svg class=\"ylm2u enx0e i6scm 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="qgtgq flex zmyke"> <button type="button" class=" uiima flex t2j25 items-center i6scm s1xgi drtn2 j01y2 otank wh5re lug43 dark:text-neutral-400 dark:hover:bg-neutral-800 dark:focus:bg-neutral-800"> <svg class="ylm2u yaf2e" 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 l3luo"> <span class="p37dm axth2 block ojv0p ibyb7 daned dark:text-neutral-500"> Mo </span> <span class="p37dm axth2 block ojv0p ibyb7 daned dark:text-neutral-500"> Tu </span> <span class="p37dm axth2 block ojv0p ibyb7 daned dark:text-neutral-500"> We </span> <span class="p37dm axth2 block ojv0p ibyb7 daned dark:text-neutral-500"> Th </span> <span class="p37dm axth2 block ojv0p ibyb7 daned dark:text-neutral-500"> Fr </span> <span class="p37dm axth2 block ojv0p ibyb7 daned dark:text-neutral-500"> Sa </span> <span class="p37dm axth2 block ojv0p ibyb7 daned dark:text-neutral-500"> Su </span> </div> <!-- Weeks --> <!-- Days --> <div class="flex"> <div> <button type="button" class="p37dm f68gs flex t2j25 items-center aesap r0r2c ibyb7 i6scm drtn2 mswab tfgda j01y2 otank wh5re nng5j qq7u8 dark:text-neutral-200" disabled> 26 </button> </div> <div> <button type="button" class="p37dm f68gs flex t2j25 items-center aesap r0r2c ibyb7 i6scm drtn2 mswab tfgda j01y2 otank wh5re nng5j qq7u8 dark:text-neutral-200" disabled> 27 </button> </div> <div> <button type="button" class="p37dm f68gs flex t2j25 items-center aesap r0r2c ibyb7 i6scm drtn2 mswab tfgda j01y2 otank wh5re nng5j qq7u8 dark:text-neutral-200" disabled> 28 </button> </div> <div> <button type="button" class="p37dm f68gs flex t2j25 items-center aesap r0r2c ibyb7 i6scm drtn2 mswab tfgda j01y2 otank wh5re nng5j qq7u8 dark:text-neutral-200" disabled> 29 </button> </div> <div> <button type="button" class="p37dm f68gs flex t2j25 items-center aesap r0r2c ibyb7 i6scm drtn2 mswab tfgda j01y2 otank wh5re nng5j qq7u8 dark:text-neutral-200" disabled> 30 </button> </div> <div> <button type="button" class="p37dm f68gs flex t2j25 items-center aesap r0r2c ibyb7 i6scm drtn2 mswab tfgda j01y2 otank wh5re nng5j qq7u8 dark:text-neutral-200"> 1 </button> </div> <div> <button type="button" class="p37dm f68gs flex t2j25 items-center aesap r0r2c ibyb7 i6scm drtn2 mswab tfgda j01y2 otank wh5re nng5j qq7u8 dark:text-neutral-200"> 2 </button> </div> </div> <!-- Days --> <!-- Days --> <div class="flex"> <div> <button type="button" class="p37dm f68gs flex t2j25 items-center aesap r0r2c ibyb7 i6scm drtn2 mswab tfgda j01y2 otank wh5re nng5j qq7u8 dark:text-neutral-200"> 3 </button> </div> <div> <button type="button" class="p37dm f68gs flex t2j25 items-center aesap r0r2c ibyb7 i6scm drtn2 mswab tfgda j01y2 otank wh5re nng5j qq7u8 dark:text-neutral-200"> 4 </button> </div> <div > <button type="button" class="p37dm f68gs flex t2j25 items-center aesap r0r2c ibyb7 i6scm drtn2 mswab tfgda j01y2 otank wh5re nng5j qq7u8 dark:text-neutral-200"> 5 </button> </div> <div > <button type="button" class="p37dm f68gs flex t2j25 items-center aesap r0r2c ibyb7 i6scm drtn2 mswab tfgda j01y2 otank wh5re nng5j qq7u8 dark:text-neutral-200"> 6 </button> </div> <div > <button type="button" class="p37dm f68gs flex t2j25 items-center aesap r0r2c ibyb7 i6scm drtn2 mswab tfgda j01y2 otank wh5re nng5j qq7u8 dark:text-neutral-200"> 7 </button> </div> <div > <button type="button" class="p37dm f68gs flex t2j25 items-center aesap r0r2c ibyb7 i6scm drtn2 mswab tfgda j01y2 otank wh5re nng5j qq7u8 dark:text-neutral-200"> 8 </button> </div> <div > <button type="button" class="p37dm f68gs flex t2j25 items-center aesap r0r2c ibyb7 i6scm drtn2 mswab tfgda j01y2 otank wh5re nng5j qq7u8 dark:text-neutral-200"> 9 </button> </div> </div> <!-- Days --> <!-- Days --> <div class="flex"> <div > <button type="button" class="p37dm f68gs flex t2j25 items-center aesap r0r2c ibyb7 i6scm drtn2 mswab tfgda j01y2 otank wh5re nng5j qq7u8 dark:text-neutral-200"> 10 </button> </div> <div > <button type="button" class="p37dm f68gs flex t2j25 items-center aesap r0r2c ibyb7 i6scm drtn2 mswab tfgda j01y2 otank wh5re nng5j qq7u8 dark:text-neutral-200"> 11 </button> </div> <div > <button type="button" class="p37dm f68gs flex t2j25 items-center aesap r0r2c ibyb7 i6scm drtn2 mswab tfgda j01y2 otank wh5re nng5j qq7u8 dark:text-neutral-200"> 12 </button> </div> <div> <button type="button" class="p37dm f68gs flex t2j25 items-center aesap r0r2c ibyb7 i6scm drtn2 mswab tfgda j01y2 otank wh5re nng5j qq7u8 dark:text-neutral-200"> 13 </button> </div> <div> <button type="button" class="p37dm f68gs flex t2j25 items-center aesap r0r2c ibyb7 i6scm drtn2 mswab tfgda j01y2 otank wh5re nng5j qq7u8 dark:text-neutral-200"> 14 </button> </div> <div> <button type="button" class="p37dm f68gs flex t2j25 items-center aesap r0r2c ibyb7 i6scm drtn2 mswab tfgda j01y2 otank wh5re nng5j qq7u8 dark:text-neutral-200"> 15 </button> </div> <div> <button type="button" class="p37dm f68gs flex t2j25 items-center aesap r0r2c ibyb7 i6scm drtn2 mswab tfgda j01y2 otank wh5re nng5j qq7u8 dark:text-neutral-200"> 16 </button> </div> </div> <!-- Days --> <!-- Days --> <div class="flex"> <div> <button type="button" class="p37dm f68gs flex t2j25 items-center aesap r0r2c ibyb7 i6scm drtn2 mswab tfgda j01y2 otank wh5re nng5j qq7u8 dark:text-neutral-200"> 17 </button> </div> <div> <button type="button" class="p37dm f68gs flex t2j25 items-center aesap r0r2c ibyb7 i6scm drtn2 mswab tfgda j01y2 otank wh5re nng5j qq7u8 dark:text-neutral-200"> 18 </button> </div> <div> <button type="button" class="p37dm f68gs flex t2j25 items-center aesap r0r2c ibyb7 i6scm drtn2 mswab tfgda j01y2 otank wh5re nng5j qq7u8 dark:text-neutral-200"> 19 </button> </div> <div> <button type="button" class="p37dm f68gs flex t2j25 items-center m2a72 aesap r0r2c ibyb7 mwwf4 i3pem mswab drtn2 dark:bg-indigo-500 j01y2 otank wh5re lug43 dark:hover:border-neutral-700"> 20 </button> </div> <div> <button type="button" class="p37dm f68gs flex t2j25 items-center aesap r0r2c ibyb7 i6scm drtn2 mswab tfgda j01y2 otank wh5re nng5j qq7u8 dark:text-neutral-200"> 21 </button> </div> <div> <button type="button" class="p37dm f68gs flex t2j25 items-center aesap r0r2c ibyb7 i6scm drtn2 mswab tfgda j01y2 otank wh5re nng5j qq7u8 dark:text-neutral-200"> 22 </button> </div> <div> <button type="button" class="p37dm f68gs flex t2j25 items-center aesap r0r2c ibyb7 i6scm drtn2 mswab tfgda j01y2 otank wh5re nng5j qq7u8 dark:text-neutral-200"> 23 </button> </div> </div> <!-- Days --> <!-- Days --> <div class="flex"> <div> <button type="button" class="p37dm f68gs flex t2j25 items-center aesap r0r2c ibyb7 i6scm drtn2 mswab tfgda j01y2 otank wh5re nng5j qq7u8 dark:text-neutral-200"> 24 </button> </div> <div > <button type="button" class="p37dm f68gs flex t2j25 items-center aesap r0r2c ibyb7 i6scm drtn2 mswab tfgda j01y2 otank wh5re nng5j qq7u8 dark:text-neutral-200"> 25 </button> </div> <div > <button type="button" class="p37dm f68gs flex t2j25 items-center aesap r0r2c ibyb7 i6scm drtn2 mswab tfgda j01y2 otank wh5re nng5j qq7u8 dark:text-neutral-200"> 26 </button> </div> <div > <button type="button" class="p37dm f68gs flex t2j25 items-center aesap r0r2c ibyb7 i6scm drtn2 mswab tfgda j01y2 otank wh5re nng5j qq7u8 dark:text-neutral-200"> 27 </button> </div> <div > <button type="button" class="p37dm f68gs flex t2j25 items-center aesap r0r2c ibyb7 i6scm drtn2 mswab tfgda j01y2 otank wh5re nng5j qq7u8 dark:text-neutral-200"> 28 </button> </div> <div > <button type="button" class="p37dm f68gs flex t2j25 items-center aesap r0r2c ibyb7 i6scm drtn2 mswab tfgda j01y2 otank wh5re nng5j qq7u8 dark:text-neutral-200"> 29 </button> </div> <div > <button type="button" class="p37dm f68gs flex t2j25 items-center aesap r0r2c ibyb7 i6scm drtn2 mswab tfgda j01y2 otank wh5re nng5j qq7u8 dark:text-neutral-200"> 30 </button> </div> </div> <!-- Days --> <!-- Days --> <div class="flex"> <div > <button type="button" class="p37dm f68gs flex t2j25 items-center aesap r0r2c ibyb7 i6scm drtn2 mswab tfgda j01y2 otank wh5re nng5j qq7u8 dark:text-neutral-200"> 31 </button> </div> <div > <button type="button" class="p37dm f68gs flex t2j25 items-center aesap r0r2c ibyb7 i6scm mswab tfgda drtn2 j01y2 otank wh5re lug43 dark:text-neutral-200 dark:hover:border-neutral-500 dark:focus:bg-neutral-700" disabled> 1 </button> </div> <div> <button type="button" class="p37dm f68gs flex t2j25 items-center aesap r0r2c ibyb7 i6scm mswab tfgda drtn2 j01y2 otank wh5re lug43 dark:text-neutral-200 dark:hover:border-neutral-500 dark:focus:bg-neutral-700" disabled> 2 </button> </div> <div> <button type="button" class="p37dm f68gs flex t2j25 items-center aesap r0r2c ibyb7 i6scm mswab tfgda drtn2 j01y2 otank wh5re lug43 dark:text-neutral-200 dark:hover:border-neutral-500 dark:focus:bg-neutral-700" disabled> 3 </button> </div> <div> <button type="button" class="p37dm f68gs flex t2j25 items-center aesap r0r2c ibyb7 i6scm mswab tfgda drtn2 j01y2 otank wh5re lug43 dark:text-neutral-200 dark:hover:border-neutral-500 dark:focus:bg-neutral-700" disabled> 4 </button> </div> <div> <button type="button" class="p37dm f68gs flex t2j25 items-center aesap r0r2c ibyb7 i6scm mswab tfgda drtn2 j01y2 otank wh5re lug43 dark:text-neutral-200 dark:hover:border-neutral-500 dark:focus:bg-neutral-700" disabled> 5 </button> </div> <div> <button type="button" class="p37dm f68gs flex t2j25 items-center aesap r0r2c ibyb7 i6scm mswab tfgda drtn2 j01y2 otank wh5re lug43 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="kun15 cz3ro jqzvs items-center syne5 zlgt1 mwwf4 klofg aesap r0r2c m2a72 i3pem g04u3 j01y2 otank wh5re odr96 bfe8x dark:focus:ring-indigo-500"> <svg class="hidden e53q4 ylm2u enx0e" 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="dnkun aezid wuzx9"> <!-- Empty State --> <div class="jjx2u j6gbu flex egjkw t2j25 items-center ojv0p"> <svg class="rh3a4 yob35" 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="ylane dark:fill-neutral-700"/> <rect x="9" y="20" width="6" height="45" fill="currentColor" class="ylane dark:fill-neutral-700"/> <rect x="18" y="25" width="6" height="40" fill="currentColor" class="ylane dark:fill-neutral-700"/> <rect x="27" width="6" height="65" fill="currentColor" class="ylane dark:fill-neutral-700"/> <rect x="36" y="5" width="6" height="60" fill="currentColor" class="ylane dark:fill-neutral-700"/> <rect x="45" y="40" width="6" height="25" fill="currentColor" class="ylane dark:fill-neutral-700"/> <rect x="54" y="25" width="6" height="40" fill="currentColor" class="ylane dark:fill-neutral-700"/> <rect x="63" y="12" width="6" height="53" fill="currentColor" class="ylane dark:fill-neutral-700"/> <rect x="72" width="6" height="65" fill="currentColor" class="ylane dark:fill-neutral-700"/> <rect x="81" y="44" width="6" height="21" fill="currentColor" class="ylane dark:fill-neutral-700"/> </svg> <div class="oeiai yob35"> <p class="huvyz mwwf4 i6scm dark:text-neutral-200"> No data </p> <p class="z9z79 ibyb7 daned dark:text-neutral-500"> No data here yet. We will notify you when there's an update. </p> </div> <button type="button" class="kun15 sr7qy jqzvs items-center syne5 zlgt1 mwwf4 klofg aesap r0r2c m2a72 i3pem g04u3 j01y2 otank wh5re odr96 wfvxl" data-hs-overlay="#hs-pro-pabchesb"> <svg class="hidden e53q4 ylm2u enx0e" 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 y56xt lcvuk"> <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="jjx2u e235m flex egjkw t2j25 items-center ojv0p"> <svg class="rh3a4 yob35 vxa5s" 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="g3njg dark:fill-neutral-800"/> <rect x="27" y="50.5" width="124" height="39" rx="7.5" stroke="currentColor" class="ir0tw dark:stroke-neutral-700/10"/> <rect x="34.5" y="58" width="24" height="24" rx="4" fill="currentColor" class="q1q6p dark:fill-neutral-700/30"/> <rect x="66.5" y="61" width="60" height="6" rx="3" fill="currentColor" class="q1q6p dark:fill-neutral-700/30"/> <rect x="66.5" y="73" width="77" height="6" rx="3" fill="currentColor" class="q1q6p dark:fill-neutral-700/30"/> <rect x="19.5" y="28.5" width="139" height="39" rx="7.5" fill="currentColor" class="g3njg dark:fill-neutral-800"/> <rect x="19.5" y="28.5" width="139" height="39" rx="7.5" stroke="currentColor" class="byl25 dark:stroke-neutral-700/30"/> <rect x="27" y="36" width="24" height="24" rx="4" fill="currentColor" class="m1d7o dark:fill-neutral-700/70"/> <rect x="59" y="39" width="60" height="6" rx="3" fill="currentColor" class="m1d7o dark:fill-neutral-700/70"/> <rect x="59" y="51" width="92" height="6" rx="3" fill="currentColor" class="m1d7o dark:fill-neutral-700/70"/> <g filter="url(#filter19)"> <rect x="12" y="6" width="154" height="40" rx="8" fill="currentColor" class="g3njg dark:fill-neutral-800" shape-rendering="crispEdges"/> <rect x="12.5" y="6.5" width="153" height="39" rx="7.5" stroke="currentColor" class="byl25 dark:stroke-neutral-700/60" shape-rendering="crispEdges"/> <rect x="20" y="14" width="24" height="24" rx="4" fill="currentColor" class="ylane dark:fill-neutral-700 "/> <rect x="52" y="17" width="60" height="6" rx="3" fill="currentColor" class="ylane dark:fill-neutral-700"/> <rect x="52" y="29" width="106" height="6" rx="3" fill="currentColor" class="ylane 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="oeiai yob35"> <p class="huvyz mwwf4 i6scm dark:text-neutral-200"> No projects </p> <p class="z9z79 ibyb7 daned 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="jjx2u e235m flex egjkw t2j25 items-center ojv0p"> <svg class="rh3a4 yob35 vxa5s" 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="g3njg dark:fill-neutral-800"/> <rect x="27" y="50.5" width="124" height="39" rx="7.5" stroke="currentColor" class="ir0tw dark:stroke-neutral-700/10"/> <rect x="34.5" y="58" width="24" height="24" rx="4" fill="currentColor" class="q1q6p dark:fill-neutral-700/30"/> <rect x="66.5" y="61" width="60" height="6" rx="3" fill="currentColor" class="q1q6p dark:fill-neutral-700/30"/> <rect x="66.5" y="73" width="77" height="6" rx="3" fill="currentColor" class="q1q6p dark:fill-neutral-700/30"/> <rect x="19.5" y="28.5" width="139" height="39" rx="7.5" fill="currentColor" class="g3njg dark:fill-neutral-800"/> <rect x="19.5" y="28.5" width="139" height="39" rx="7.5" stroke="currentColor" class="byl25 dark:stroke-neutral-700/30"/> <rect x="27" y="36" width="24" height="24" rx="4" fill="currentColor" class="m1d7o dark:fill-neutral-700/70"/> <rect x="59" y="39" width="60" height="6" rx="3" fill="currentColor" class="m1d7o dark:fill-neutral-700/70"/> <rect x="59" y="51" width="92" height="6" rx="3" fill="currentColor" class="m1d7o dark:fill-neutral-700/70"/> <g filter="url(#filter19)"> <rect x="12" y="6" width="154" height="40" rx="8" fill="currentColor" class="g3njg dark:fill-neutral-800" shape-rendering="crispEdges"/> <rect x="12.5" y="6.5" width="153" height="39" rx="7.5" stroke="currentColor" class="byl25 dark:stroke-neutral-700/60" shape-rendering="crispEdges"/> <rect x="20" y="14" width="24" height="24" rx="4" fill="currentColor" class="ylane dark:fill-neutral-700 "/> <rect x="52" y="17" width="60" height="6" rx="3" fill="currentColor" class="ylane dark:fill-neutral-700"/> <rect x="52" y="29" width="106" height="6" rx="3" fill="currentColor" class="ylane 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="oeiai yob35"> <p class="huvyz mwwf4 i6scm dark:text-neutral-200"> No projects </p> <p class="z9z79 ibyb7 daned 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