Open Source
Preline Pro
Sign in
Get all access
Home
Examples
Templates
Pricing
Docs
Preline UI (Open Source)
Back to Examples
All examples
Custom Date & Time Modals
Custom Date & Time description goes here.
Custom Recurrence Event
Preview
Get the code
Existing accounts: Sign in to your account to access the source code.
<!DOCTYPE html> <html lang="en" dir="" class="relative kby5p ly3m4"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <title>Preline UI</title> <link rel="shortcut icon" href="../../favicon.ico"> <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet"> <link rel="stylesheet" href="../../assets/css/obfuscated.min.css"> </head> <body> <div class="c1rp7 a3cw8"> <button type="button" class="bdby8 viac4 s2k2k dry15 items-center dsp0o vf6o6 d7vyt efs5t qpl6d hrliy pdak6 f4yq1 awdil ycht7 u0d52 fsq8n r0fp5 plgkh dark:bg-white dark:text-neutral-800 dark:hover:bg-neutral-200 dark:focus:bg-neutral-200" aria-haspopup="dialog" aria-expanded="false" aria-controls="hs-pro-clcre" data-hs-overlay="#hs-pro-clcre"> Open </button> </div><!-- Custom Recurrence Modal --> <div id="hs-pro-clcre" class="hs-overlay hidden ewvyg fixed fopbl x0wu9 slhov v2o4d bgcuw [--close-when-click-inside:true] xt2fk" role="dialog" tabindex="-1" aria-labelledby="hs-pro-clcre-label"> <div class="hs-overlay-open:mt-7 hs-overlay-open:opacity-100 hs-overlay-open:duration-500 ftdwh opacity-0 oviqp g22ra vc7u0 ppfkn crpye ubyl1 h-[calc(100%-3.5rem)] min-h-[calc(100%-3.5rem)] flex items-center"> <div class="qaxp8 f07vg flex pz3xv m9vu4 dxf1r fpj7t 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-800"> <!-- Header --> <div class="pykdd iwwvx flex m0bgt items-center vcvf1 dark:border-neutral-700"> <h3 id="hs-pro-clcre-label" class="f4yq1 p9tun dark:text-neutral-200"> Custom recurrence </h3> <button type="button" class="a0c5w s2k2k dry15 items-center dsp0o lli30 efs5t xk8dv ac0xq p9tun aefqe xwjcj c3i4e r0fp5 joaod dark:bg-neutral-700 dark:hover:bg-neutral-600 dark:text-neutral-400 dark:focus:bg-neutral-600" aria-label="Close" data-hs-overlay="#hs-pro-clcre"> <span class="tliya">Close</span> <svg class="h21yx ufena" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg> </button> </div> <!-- End Header --> <!-- Body --> <div id="hs-modal-custom-recurrence-event" class="bgcuw zq2x8 oasqe c7c11 iz02v dark:[&::-webkit-scrollbar-track]:bg-neutral-700 dark:[&::-webkit-scrollbar-thumb]:bg-neutral-500"> <div class="u3doq cwicw"> <div class="i80r8 enm6b"> <!-- Item --> <div> <label for="hs-pro-ccremre" class="r6z19 block ntb30 pal0s dark:text-neutral-500"> Repeat every: </label> <div class="flex items-center dsp0o"> <input id="hs-pro-ccremre" type="text" class="y027u cr73y block lc69c ac0xq xk8dv ngy7c ntb30 shh18 zuutc aefqe aqt2b xwjcj c3i4e joaod actqw esbqm dark:text-neutral-400 dark:bg-neutral-700 dark:text-neutral-300 dark:placeholder:text-neutral-500 dark:hover:bg-neutral-600 dark:focus:bg-neutral-600" value="1"> <!-- Select --> <div class="relative qaxp8"> <select data-hs-select='{ "placeholder": "Start time", "toggleTag": "<button type=\"button\" aria-expanded=\"false\"></button>", "toggleClasses": "hs-select-disabled:pointer-events-none hs-select-disabled:opacity-50 relative y027u es30u xdltm qaxp8 flex dsp0o ifji7 shh18 cursor-pointer ac0xq efs5t xk8dv ngy7c vf6o6 ntb30 aefqe hover:focus:border-transparent r0fp5 joaod dark:bg-neutral-700 dark:text-neutral-400 dark:focus:outline-none dark:hover:bg-neutral-600 dark:focus:bg-neutral-600", "dropdownClasses": "jglyo le6w0 qaxp8 aumt2 lavrb z4ia7 apqjg bgcuw m9vu4 dxf1r shadow-[0_10px_40px_10px_rgba(0,0,0,0.08)] zq2x8 oasqe c7c11 iz02v dark:[&::-webkit-scrollbar-track]:bg-neutral-700 dark:[&::-webkit-scrollbar-thumb]:bg-neutral-500 dark:bg-neutral-900", "optionClasses": "hs-selected:bg-gray-100 dark:hs-selected:bg-neutral-800 hmhrw viac4 qaxp8 ntb30 p9tun cursor-pointer um5nz ngy7c r0fp5 ip2jr dark:text-neutral-300 dark:hover:bg-neutral-800 dark:focus:bg-neutral-800", "optionTemplate": "<div class=\"flex m0bgt items-center qaxp8 \"><span data-title></span><span class=\"hidden hs-selected:block \"><svg class=\"h21yx vs0hq p9tun dark:text-neutral-200 \" xmlns=\"http:.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"20 6 9 17 4 12\"/></svg></span></div>", "viewport": "#hs-modal-custom-recurrence-event" }' class="hidden"> <option value="">Choose</option> <option>Daily</option> <option selected>Weekly</option> <option>Monthly</option> <option>Yearly</option> </select> <div class="absolute cn1sr rc2yk -translate-y-1/2"> <svg class="h21yx vs0hq pal0s dark:text-neutral-500" 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> </div> </div> <!-- End Select --> </div> </div> <!-- End Item --> <!-- Item --> <div> <label class="r6z19 block ntb30 pal0s dark:text-neutral-500"> Repeats on: </label> <div class="flex zctvj items-center ernqe"> <!-- Checkbox --> <label for="hs-pro-clcreromo" class="group ckjpf flex dry15 items-center ngy7c cursor-pointer ntb30 p9tun ac0xq aefqe joaod has-[:checked]:bg-blue-600 has-[:checked]:text-white dark:text-neutral-300 dark:bg-neutral-700 dark:hover:bg-neutral-600 dark:focus:bg-neutral-600 dark:has-[:checked]:bg-blue-500 dark:has-[:checked]:text-white"> <input type="radio" class="hidden" id="hs-pro-clcreromo" name="hs-pro-cremd" checked> Mo </label> <!-- End Checkbox --> <!-- Checkbox --> <label for="hs-pro-clcrerotu" class="group ckjpf flex dry15 items-center ngy7c cursor-pointer ntb30 p9tun ac0xq aefqe joaod has-[:checked]:bg-blue-600 has-[:checked]:text-white dark:text-neutral-300 dark:bg-neutral-700 dark:hover:bg-neutral-600 dark:focus:bg-neutral-600 dark:has-[:checked]:bg-blue-500 dark:has-[:checked]:text-white"> <input type="radio" class="hidden" id="hs-pro-clcrerotu" name="hs-pro-cremd"> Tu </label> <!-- End Checkbox --> <!-- Checkbox --> <label for="hs-pro-clcrerowe" class="group ckjpf flex dry15 items-center ngy7c cursor-pointer ntb30 p9tun ac0xq aefqe joaod has-[:checked]:bg-blue-600 has-[:checked]:text-white dark:text-neutral-300 dark:bg-neutral-700 dark:hover:bg-neutral-600 dark:focus:bg-neutral-600 dark:has-[:checked]:bg-blue-500 dark:has-[:checked]:text-white"> <input type="radio" class="hidden" id="hs-pro-clcrerowe" name="hs-pro-cremd"> We </label> <!-- End Checkbox --> <!-- Checkbox --> <label for="hs-pro-clcreroth" class="group ckjpf flex dry15 items-center ngy7c cursor-pointer ntb30 p9tun ac0xq aefqe joaod has-[:checked]:bg-blue-600 has-[:checked]:text-white dark:text-neutral-300 dark:bg-neutral-700 dark:hover:bg-neutral-600 dark:focus:bg-neutral-600 dark:has-[:checked]:bg-blue-500 dark:has-[:checked]:text-white"> <input type="radio" class="hidden" id="hs-pro-clcreroth" name="hs-pro-cremd"> Th </label> <!-- End Checkbox --> <!-- Checkbox --> <label for="hs-pro-clcrerofr" class="group ckjpf flex dry15 items-center ngy7c cursor-pointer ntb30 p9tun ac0xq aefqe joaod has-[:checked]:bg-blue-600 has-[:checked]:text-white dark:text-neutral-300 dark:bg-neutral-700 dark:hover:bg-neutral-600 dark:focus:bg-neutral-600 dark:has-[:checked]:bg-blue-500 dark:has-[:checked]:text-white"> <input type="radio" class="hidden" id="hs-pro-clcrerofr" name="hs-pro-cremd"> Fr </label> <!-- End Checkbox --> <!-- Checkbox --> <label for="hs-pro-clcrerosa" class="group ckjpf flex dry15 items-center ngy7c cursor-pointer ntb30 p9tun ac0xq aefqe joaod has-[:checked]:bg-blue-600 has-[:checked]:text-white dark:text-neutral-300 dark:bg-neutral-700 dark:hover:bg-neutral-600 dark:focus:bg-neutral-600 dark:has-[:checked]:bg-blue-500 dark:has-[:checked]:text-white"> <input type="radio" class="hidden" id="hs-pro-clcrerosa" name="hs-pro-cremd"> Sa </label> <!-- End Checkbox --> <!-- Checkbox --> <label for="hs-pro-clcrerosu" class="group ckjpf flex dry15 items-center ngy7c cursor-pointer ntb30 p9tun ac0xq aefqe joaod has-[:checked]:bg-blue-600 has-[:checked]:text-white dark:text-neutral-300 dark:bg-neutral-700 dark:hover:bg-neutral-600 dark:focus:bg-neutral-600 dark:has-[:checked]:bg-blue-500 dark:has-[:checked]:text-white"> <input type="radio" class="hidden" id="hs-pro-clcrerosu" name="hs-pro-cremd"> Su </label> <!-- End Checkbox --> </div> </div> <!-- End Item --> <!-- Item --> <div> <label class="r6z19 block ntb30 pal0s dark:text-neutral-500"> Ends: </label> <!-- Radio --> <div class="flex"> <input type="radio" name="hs-pro-clcree" class="h21yx kq7zk lli30 oqj39 o7vfi di1ey xwjcj c3i4e dark:bg-neutral-800 dark:border-neutral-700 dark:checked:bg-blue-500 dark:checked:border-blue-500 dark:focus:ring-offset-neutral-800" id="hs-pro-clcreen" checked> <label for="hs-pro-clcreen" class="bqo3s z1v6e vzx5m dark:text-neutral-400">Never</label> </div> <!-- End Radio --> <div class="njekq flex items-center dsp0o"> <!-- Radio --> <div class="f2107 flex"> <input type="radio" name="hs-pro-clcree" class="h21yx kq7zk lli30 oqj39 o7vfi di1ey xwjcj c3i4e dark:bg-neutral-800 dark:border-neutral-700 dark:checked:bg-blue-500 dark:checked:border-blue-500 dark:focus:ring-offset-neutral-800" id="hs-pro-clcreeo"> <label for="hs-pro-clcreeo" class="bqo3s z1v6e vzx5m dark:text-neutral-400">On</label> </div> <!-- End Radio --> <div class="qaxp8"> <!-- Input --> <input type="text" class="hmhrw cr73y block qaxp8 ac0xq xk8dv ngy7c ntb30 shh18 zuutc aefqe aqt2b xwjcj c3i4e joaod actqw esbqm dark:text-neutral-400 dark:bg-neutral-700 dark:text-neutral-300 dark:placeholder:text-neutral-500 dark:hover:bg-neutral-600 dark:focus:bg-neutral-600" value="Jan 7, 2024"> <!-- End Input --> </div> </div> <div class="nc0x2 flex items-center dsp0o"> <!-- Radio --> <div class="f2107 flex"> <input type="radio" name="hs-pro-clcree" class="h21yx kq7zk lli30 oqj39 o7vfi di1ey xwjcj c3i4e dark:bg-neutral-800 dark:border-neutral-700 dark:checked:bg-blue-500 dark:checked:border-blue-500 dark:focus:ring-offset-neutral-800" id="hs-pro-clcreea"> <label for="hs-pro-clcreea" class="bqo3s z1v6e vzx5m dark:text-neutral-400">After</label> </div> <!-- End Radio --> <div class="qaxp8 flex items-center dsp0o"> <!-- Input --> <input type="text" class="hmhrw cr73y block lc69c ac0xq xk8dv ngy7c ntb30 shh18 zuutc aefqe aqt2b xwjcj c3i4e joaod actqw esbqm dark:text-neutral-400 dark:bg-neutral-700 dark:text-neutral-300 dark:placeholder:text-neutral-500 dark:hover:bg-neutral-600 dark:focus:bg-neutral-600" value="7"> <!-- End Input --> <span class="bqo3s pal0s dark:text-neutral-500">Times</span> </div> </div> </div> <!-- End Item --> </div> </div> </div> <!-- End Body --> <!-- Footer --> <div class="bdby8 iwwvx batcw kq7zk dark:border-neutral-700"> <div class="i6awo flex tiner items-center wn51l"> <button type="button" class="bdby8 viac4 ifji7 s2k2k dry15 items-center vf6o6 m9vu4 efs5t kq7zk p9tun bqo3s f4yq1 awdil ycht7 u0d52 r73cx xwjcj c3i4e dark:bg-neutral-800 dark:border-neutral-700 dark:text-neutral-300 dark:hover:bg-neutral-700 dark:focus:bg-neutral-700" data-hs-overlay="#hs-pro-clcre"> Cancel </button> <button type="button" class="bdby8 viac4 ifji7 s2k2k dry15 items-center dsp0o vf6o6 uylzq efs5t mwycc hrliy bqo3s f4yq1 awdil ycht7 u0d52 wa7ya xwjcj c3i4e r0fp5 sl5v4 kglp6 dark:focus:ring-blue-500" data-hs-overlay="#hs-pro-clcre"> Save </button> </div> </div> <!-- End Footer --> </div> </div> </div> <!-- End Custom Recurrence Modal --> <script src="../../assets/vendor/preline/dist/index.js?v=2.5.0"></script> </body> </html> <script src="../../scripts/js/open-modals-on-init.js"></script>
<!-- Custom Recurrence Modal --> <div id="hs-pro-clcre" class="hs-overlay hidden ewvyg fixed fopbl x0wu9 slhov v2o4d bgcuw [--close-when-click-inside:true] xt2fk" role="dialog" tabindex="-1" aria-labelledby="hs-pro-clcre-label"> <div class="hs-overlay-open:mt-7 hs-overlay-open:opacity-100 hs-overlay-open:duration-500 ftdwh opacity-0 oviqp g22ra vc7u0 ppfkn crpye ubyl1 h-[calc(100%-3.5rem)] min-h-[calc(100%-3.5rem)] flex items-center"> <div class="qaxp8 f07vg flex pz3xv m9vu4 dxf1r fpj7t 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-800"> <!-- Header --> <div class="pykdd iwwvx flex m0bgt items-center vcvf1 dark:border-neutral-700"> <h3 id="hs-pro-clcre-label" class="f4yq1 p9tun dark:text-neutral-200"> Custom recurrence </h3> <button type="button" class="a0c5w s2k2k dry15 items-center dsp0o lli30 efs5t xk8dv ac0xq p9tun aefqe xwjcj c3i4e r0fp5 joaod dark:bg-neutral-700 dark:hover:bg-neutral-600 dark:text-neutral-400 dark:focus:bg-neutral-600" aria-label="Close" data-hs-overlay="#hs-pro-clcre"> <span class="tliya">Close</span> <svg class="h21yx ufena" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg> </button> </div> <!-- End Header --> <!-- Body --> <div id="hs-modal-custom-recurrence-event" class="bgcuw zq2x8 oasqe c7c11 iz02v dark:[&::-webkit-scrollbar-track]:bg-neutral-700 dark:[&::-webkit-scrollbar-thumb]:bg-neutral-500"> <div class="u3doq cwicw"> <div class="i80r8 enm6b"> <!-- Item --> <div> <label for="hs-pro-ccremre" class="r6z19 block ntb30 pal0s dark:text-neutral-500"> Repeat every: </label> <div class="flex items-center dsp0o"> <input id="hs-pro-ccremre" type="text" class="y027u cr73y block lc69c ac0xq xk8dv ngy7c ntb30 shh18 zuutc aefqe aqt2b xwjcj c3i4e joaod actqw esbqm dark:text-neutral-400 dark:bg-neutral-700 dark:text-neutral-300 dark:placeholder:text-neutral-500 dark:hover:bg-neutral-600 dark:focus:bg-neutral-600" value="1"> <!-- Select --> <div class="relative qaxp8"> <select data-hs-select='{ "placeholder": "Start time", "toggleTag": "<button type=\"button\" aria-expanded=\"false\"></button>", "toggleClasses": "hs-select-disabled:pointer-events-none hs-select-disabled:opacity-50 relative y027u es30u xdltm qaxp8 flex dsp0o ifji7 shh18 cursor-pointer ac0xq efs5t xk8dv ngy7c vf6o6 ntb30 aefqe hover:focus:border-transparent r0fp5 joaod dark:bg-neutral-700 dark:text-neutral-400 dark:focus:outline-none dark:hover:bg-neutral-600 dark:focus:bg-neutral-600", "dropdownClasses": "jglyo le6w0 qaxp8 aumt2 lavrb z4ia7 apqjg bgcuw m9vu4 dxf1r shadow-[0_10px_40px_10px_rgba(0,0,0,0.08)] zq2x8 oasqe c7c11 iz02v dark:[&::-webkit-scrollbar-track]:bg-neutral-700 dark:[&::-webkit-scrollbar-thumb]:bg-neutral-500 dark:bg-neutral-900", "optionClasses": "hs-selected:bg-gray-100 dark:hs-selected:bg-neutral-800 hmhrw viac4 qaxp8 ntb30 p9tun cursor-pointer um5nz ngy7c r0fp5 ip2jr dark:text-neutral-300 dark:hover:bg-neutral-800 dark:focus:bg-neutral-800", "optionTemplate": "<div class=\"flex m0bgt items-center qaxp8 \"><span data-title></span><span class=\"hidden hs-selected:block \"><svg class=\"h21yx vs0hq p9tun dark:text-neutral-200 \" xmlns=\"http:.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"20 6 9 17 4 12\"/></svg></span></div>", "viewport": "#hs-modal-custom-recurrence-event" }' class="hidden"> <option value="">Choose</option> <option>Daily</option> <option selected>Weekly</option> <option>Monthly</option> <option>Yearly</option> </select> <div class="absolute cn1sr rc2yk -translate-y-1/2"> <svg class="h21yx vs0hq pal0s dark:text-neutral-500" 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> </div> </div> <!-- End Select --> </div> </div> <!-- End Item --> <!-- Item --> <div> <label class="r6z19 block ntb30 pal0s dark:text-neutral-500"> Repeats on: </label> <div class="flex zctvj items-center ernqe"> <!-- Checkbox --> <label for="hs-pro-clcreromo" class="group ckjpf flex dry15 items-center ngy7c cursor-pointer ntb30 p9tun ac0xq aefqe joaod has-[:checked]:bg-blue-600 has-[:checked]:text-white dark:text-neutral-300 dark:bg-neutral-700 dark:hover:bg-neutral-600 dark:focus:bg-neutral-600 dark:has-[:checked]:bg-blue-500 dark:has-[:checked]:text-white"> <input type="radio" class="hidden" id="hs-pro-clcreromo" name="hs-pro-cremd" checked> Mo </label> <!-- End Checkbox --> <!-- Checkbox --> <label for="hs-pro-clcrerotu" class="group ckjpf flex dry15 items-center ngy7c cursor-pointer ntb30 p9tun ac0xq aefqe joaod has-[:checked]:bg-blue-600 has-[:checked]:text-white dark:text-neutral-300 dark:bg-neutral-700 dark:hover:bg-neutral-600 dark:focus:bg-neutral-600 dark:has-[:checked]:bg-blue-500 dark:has-[:checked]:text-white"> <input type="radio" class="hidden" id="hs-pro-clcrerotu" name="hs-pro-cremd"> Tu </label> <!-- End Checkbox --> <!-- Checkbox --> <label for="hs-pro-clcrerowe" class="group ckjpf flex dry15 items-center ngy7c cursor-pointer ntb30 p9tun ac0xq aefqe joaod has-[:checked]:bg-blue-600 has-[:checked]:text-white dark:text-neutral-300 dark:bg-neutral-700 dark:hover:bg-neutral-600 dark:focus:bg-neutral-600 dark:has-[:checked]:bg-blue-500 dark:has-[:checked]:text-white"> <input type="radio" class="hidden" id="hs-pro-clcrerowe" name="hs-pro-cremd"> We </label> <!-- End Checkbox --> <!-- Checkbox --> <label for="hs-pro-clcreroth" class="group ckjpf flex dry15 items-center ngy7c cursor-pointer ntb30 p9tun ac0xq aefqe joaod has-[:checked]:bg-blue-600 has-[:checked]:text-white dark:text-neutral-300 dark:bg-neutral-700 dark:hover:bg-neutral-600 dark:focus:bg-neutral-600 dark:has-[:checked]:bg-blue-500 dark:has-[:checked]:text-white"> <input type="radio" class="hidden" id="hs-pro-clcreroth" name="hs-pro-cremd"> Th </label> <!-- End Checkbox --> <!-- Checkbox --> <label for="hs-pro-clcrerofr" class="group ckjpf flex dry15 items-center ngy7c cursor-pointer ntb30 p9tun ac0xq aefqe joaod has-[:checked]:bg-blue-600 has-[:checked]:text-white dark:text-neutral-300 dark:bg-neutral-700 dark:hover:bg-neutral-600 dark:focus:bg-neutral-600 dark:has-[:checked]:bg-blue-500 dark:has-[:checked]:text-white"> <input type="radio" class="hidden" id="hs-pro-clcrerofr" name="hs-pro-cremd"> Fr </label> <!-- End Checkbox --> <!-- Checkbox --> <label for="hs-pro-clcrerosa" class="group ckjpf flex dry15 items-center ngy7c cursor-pointer ntb30 p9tun ac0xq aefqe joaod has-[:checked]:bg-blue-600 has-[:checked]:text-white dark:text-neutral-300 dark:bg-neutral-700 dark:hover:bg-neutral-600 dark:focus:bg-neutral-600 dark:has-[:checked]:bg-blue-500 dark:has-[:checked]:text-white"> <input type="radio" class="hidden" id="hs-pro-clcrerosa" name="hs-pro-cremd"> Sa </label> <!-- End Checkbox --> <!-- Checkbox --> <label for="hs-pro-clcrerosu" class="group ckjpf flex dry15 items-center ngy7c cursor-pointer ntb30 p9tun ac0xq aefqe joaod has-[:checked]:bg-blue-600 has-[:checked]:text-white dark:text-neutral-300 dark:bg-neutral-700 dark:hover:bg-neutral-600 dark:focus:bg-neutral-600 dark:has-[:checked]:bg-blue-500 dark:has-[:checked]:text-white"> <input type="radio" class="hidden" id="hs-pro-clcrerosu" name="hs-pro-cremd"> Su </label> <!-- End Checkbox --> </div> </div> <!-- End Item --> <!-- Item --> <div> <label class="r6z19 block ntb30 pal0s dark:text-neutral-500"> Ends: </label> <!-- Radio --> <div class="flex"> <input type="radio" name="hs-pro-clcree" class="h21yx kq7zk lli30 oqj39 o7vfi di1ey xwjcj c3i4e dark:bg-neutral-800 dark:border-neutral-700 dark:checked:bg-blue-500 dark:checked:border-blue-500 dark:focus:ring-offset-neutral-800" id="hs-pro-clcreen" checked> <label for="hs-pro-clcreen" class="bqo3s z1v6e vzx5m dark:text-neutral-400">Never</label> </div> <!-- End Radio --> <div class="njekq flex items-center dsp0o"> <!-- Radio --> <div class="f2107 flex"> <input type="radio" name="hs-pro-clcree" class="h21yx kq7zk lli30 oqj39 o7vfi di1ey xwjcj c3i4e dark:bg-neutral-800 dark:border-neutral-700 dark:checked:bg-blue-500 dark:checked:border-blue-500 dark:focus:ring-offset-neutral-800" id="hs-pro-clcreeo"> <label for="hs-pro-clcreeo" class="bqo3s z1v6e vzx5m dark:text-neutral-400">On</label> </div> <!-- End Radio --> <div class="qaxp8"> <!-- Input --> <input type="text" class="hmhrw cr73y block qaxp8 ac0xq xk8dv ngy7c ntb30 shh18 zuutc aefqe aqt2b xwjcj c3i4e joaod actqw esbqm dark:text-neutral-400 dark:bg-neutral-700 dark:text-neutral-300 dark:placeholder:text-neutral-500 dark:hover:bg-neutral-600 dark:focus:bg-neutral-600" value="Jan 7, 2024"> <!-- End Input --> </div> </div> <div class="nc0x2 flex items-center dsp0o"> <!-- Radio --> <div class="f2107 flex"> <input type="radio" name="hs-pro-clcree" class="h21yx kq7zk lli30 oqj39 o7vfi di1ey xwjcj c3i4e dark:bg-neutral-800 dark:border-neutral-700 dark:checked:bg-blue-500 dark:checked:border-blue-500 dark:focus:ring-offset-neutral-800" id="hs-pro-clcreea"> <label for="hs-pro-clcreea" class="bqo3s z1v6e vzx5m dark:text-neutral-400">After</label> </div> <!-- End Radio --> <div class="qaxp8 flex items-center dsp0o"> <!-- Input --> <input type="text" class="hmhrw cr73y block lc69c ac0xq xk8dv ngy7c ntb30 shh18 zuutc aefqe aqt2b xwjcj c3i4e joaod actqw esbqm dark:text-neutral-400 dark:bg-neutral-700 dark:text-neutral-300 dark:placeholder:text-neutral-500 dark:hover:bg-neutral-600 dark:focus:bg-neutral-600" value="7"> <!-- End Input --> <span class="bqo3s pal0s dark:text-neutral-500">Times</span> </div> </div> </div> <!-- End Item --> </div> </div> </div> <!-- End Body --> <!-- Footer --> <div class="bdby8 iwwvx batcw kq7zk dark:border-neutral-700"> <div class="i6awo flex tiner items-center wn51l"> <button type="button" class="bdby8 viac4 ifji7 s2k2k dry15 items-center vf6o6 m9vu4 efs5t kq7zk p9tun bqo3s f4yq1 awdil ycht7 u0d52 r73cx xwjcj c3i4e dark:bg-neutral-800 dark:border-neutral-700 dark:text-neutral-300 dark:hover:bg-neutral-700 dark:focus:bg-neutral-700" data-hs-overlay="#hs-pro-clcre"> Cancel </button> <button type="button" class="bdby8 viac4 ifji7 s2k2k dry15 items-center dsp0o vf6o6 uylzq efs5t mwycc hrliy bqo3s f4yq1 awdil ycht7 u0d52 wa7ya xwjcj c3i4e r0fp5 sl5v4 kglp6 dark:focus:ring-blue-500" data-hs-overlay="#hs-pro-clcre"> Save </button> </div> </div> <!-- End Footer --> </div> </div> </div> <!-- End Custom Recurrence Modal -->
Snooze
Preview
Get the code
Existing accounts: Sign in to your account to access the source code.
<!DOCTYPE html> <html lang="en" dir="" class="relative kby5p ly3m4"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <title>Preline UI</title> <link rel="shortcut icon" href="../../favicon.ico"> <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet"> <link rel="stylesheet" href="../../assets/css/obfuscated.min.css"> </head> <body><!-- Archive Message Modal --> <div id="hs-pro-chhsn" class="hs-overlay hidden ewvyg fixed fopbl x0wu9 rpylz v2o4d bgcuw [--close-when-click-inside:true] xt2fk" role="dialog" tabindex="-1" aria-labelledby="hs-pro-chhsn-label"> <div class="hs-overlay-open:mt-7 hs-overlay-open:opacity-100 hs-overlay-open:duration-500 ftdwh opacity-0 oviqp g22ra nnamf ppfkn crpye ubyl1 h-[calc(100%-3.5rem)] min-h-[calc(100%-3.5rem)] flex items-center"> <div class="qaxp8 f07vg apqjg flex pz3xv m9vu4 dxf1r fpj7t 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-800"> <!-- Header --> <div class="pykdd iwwvx flex m0bgt items-center vcvf1 dark:border-neutral-700"> <h3 id="hs-pro-chhsn-label" class="f4yq1 p9tun dark:text-neutral-200"> Snooze </h3> <button type="button" class="a0c5w s2k2k dry15 items-center dsp0o lli30 efs5t xk8dv ac0xq p9tun aefqe xwjcj c3i4e r0fp5 joaod dark:bg-neutral-700 dark:hover:bg-neutral-600 dark:text-neutral-400 dark:focus:bg-neutral-600" aria-label="Close" data-hs-overlay="#hs-pro-chhsn"> <span class="tliya">Close</span> <svg class="h21yx ufena" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg> </button> </div> <!-- End Header --> <!-- Body --> <div class="lavrb bgcuw zq2x8 oasqe c7c11 iz02v dark:[&::-webkit-scrollbar-track]:bg-neutral-700 dark:[&::-webkit-scrollbar-thumb]:bg-neutral-500"> <fieldset class="i80r8 yjors"> <legend class="tliya"> Snooze </legend> <!-- Checkbox --> <label for="hs-pro-chhsnrt1" class="bdby8 viac4 flex items-center m9vu4 awdil cursor-pointer ngy7c aefqe has-[:checked]:bg-gray-200 kothk hl3q4 dark:bg-neutral-800 dark:hover:bg-neutral-700 dark:has-[:checked]:bg-neutral-700"> <input type="radio" id="hs-pro-chhsnrt1" class="hidden" value="Today" name="hs-pro-chhsnrt" checked> <span class="ce341"> <span class="block f4yq1 pdak6 p9tun dark:text-neutral-200"> Today </span> </span> <span class="block y33fp bqo3s cy6rq z1v6e dark:text-neutral-500"> 5:05 PM </span> </label> <!-- End Checkbox --> <!-- Checkbox --> <label for="hs-pro-chhsnrt2" class="bdby8 viac4 flex items-center m9vu4 awdil cursor-pointer ngy7c aefqe has-[:checked]:bg-gray-200 kothk hl3q4 dark:bg-neutral-800 dark:hover:bg-neutral-700 dark:has-[:checked]:bg-neutral-700"> <input type="radio" id="hs-pro-chhsnrt2" class="hidden" value="Tomorrow" name="hs-pro-chhsnrt" > <span class="ce341"> <span class="block f4yq1 pdak6 p9tun dark:text-neutral-200"> Tomorrow </span> </span> <span class="block y33fp bqo3s cy6rq z1v6e dark:text-neutral-500"> Wed 9:00 AM </span> </label> <!-- End Checkbox --> <!-- Checkbox --> <label for="hs-pro-chhsnrt3" class="bdby8 viac4 flex items-center m9vu4 awdil cursor-pointer ngy7c aefqe has-[:checked]:bg-gray-200 kothk hl3q4 dark:bg-neutral-800 dark:hover:bg-neutral-700 dark:has-[:checked]:bg-neutral-700"> <input type="radio" id="hs-pro-chhsnrt3" class="hidden" value="This week" name="hs-pro-chhsnrt" > <span class="ce341"> <span class="block f4yq1 pdak6 p9tun dark:text-neutral-200"> This week </span> </span> <span class="block y33fp bqo3s cy6rq z1v6e dark:text-neutral-500"> Thu, May 8, 9:00 AM </span> </label> <!-- End Checkbox --> <!-- Checkbox --> <label for="hs-pro-chhsnrt4" class="bdby8 viac4 flex items-center m9vu4 awdil cursor-pointer ngy7c aefqe has-[:checked]:bg-gray-200 kothk hl3q4 dark:bg-neutral-800 dark:hover:bg-neutral-700 dark:has-[:checked]:bg-neutral-700"> <input type="radio" id="hs-pro-chhsnrt4" class="hidden" value="Next week" name="hs-pro-chhsnrt" > <span class="ce341"> <span class="block f4yq1 pdak6 p9tun dark:text-neutral-200"> Next week </span> </span> <span class="block y33fp bqo3s cy6rq z1v6e dark:text-neutral-500"> Mon, May 13, 9:00 AM </span> </label> <!-- End Checkbox --> </fieldset> <div class="jatgu"> <!-- Button --> <button type="button" class="qaxp8 flex m0bgt items-center u96nv bdby8 viac4 vf6o6 f4yq1 pdak6 p9tun aefqe ngy7c xwjcj c3i4e r0fp5 ip2jr dark:text-neutral-200 dark:hover:bg-neutral-700 dark:focus:bg-neutral-700 dark:hover:text-neutral-200 dark:focus:text-neutral-200" data-hs-overlay="#hs-pro-chhsncs"> Custom <svg class="h21yx ufena" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></svg> </button> <!-- End Button --> </div> </div> <!-- End Body --> </div> </div> </div> <!-- End Archive Message Modal --> <script src="../../assets/vendor/preline/dist/index.js?v=2.5.0"></script> </body> </html> <script src="../../scripts/js/open-modals-on-init.js"></script>
<!-- Archive Message Modal --> <div id="hs-pro-chhsn" class="hs-overlay hidden ewvyg fixed fopbl x0wu9 rpylz v2o4d bgcuw [--close-when-click-inside:true] xt2fk" role="dialog" tabindex="-1" aria-labelledby="hs-pro-chhsn-label"> <div class="hs-overlay-open:mt-7 hs-overlay-open:opacity-100 hs-overlay-open:duration-500 ftdwh opacity-0 oviqp g22ra nnamf ppfkn crpye ubyl1 h-[calc(100%-3.5rem)] min-h-[calc(100%-3.5rem)] flex items-center"> <div class="qaxp8 f07vg apqjg flex pz3xv m9vu4 dxf1r fpj7t 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-800"> <!-- Header --> <div class="pykdd iwwvx flex m0bgt items-center vcvf1 dark:border-neutral-700"> <h3 id="hs-pro-chhsn-label" class="f4yq1 p9tun dark:text-neutral-200"> Snooze </h3> <button type="button" class="a0c5w s2k2k dry15 items-center dsp0o lli30 efs5t xk8dv ac0xq p9tun aefqe xwjcj c3i4e r0fp5 joaod dark:bg-neutral-700 dark:hover:bg-neutral-600 dark:text-neutral-400 dark:focus:bg-neutral-600" aria-label="Close" data-hs-overlay="#hs-pro-chhsn"> <span class="tliya">Close</span> <svg class="h21yx ufena" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg> </button> </div> <!-- End Header --> <!-- Body --> <div class="lavrb bgcuw zq2x8 oasqe c7c11 iz02v dark:[&::-webkit-scrollbar-track]:bg-neutral-700 dark:[&::-webkit-scrollbar-thumb]:bg-neutral-500"> <fieldset class="i80r8 yjors"> <legend class="tliya"> Snooze </legend> <!-- Checkbox --> <label for="hs-pro-chhsnrt1" class="bdby8 viac4 flex items-center m9vu4 awdil cursor-pointer ngy7c aefqe has-[:checked]:bg-gray-200 kothk hl3q4 dark:bg-neutral-800 dark:hover:bg-neutral-700 dark:has-[:checked]:bg-neutral-700"> <input type="radio" id="hs-pro-chhsnrt1" class="hidden" value="Today" name="hs-pro-chhsnrt" checked> <span class="ce341"> <span class="block f4yq1 pdak6 p9tun dark:text-neutral-200"> Today </span> </span> <span class="block y33fp bqo3s cy6rq z1v6e dark:text-neutral-500"> 5:05 PM </span> </label> <!-- End Checkbox --> <!-- Checkbox --> <label for="hs-pro-chhsnrt2" class="bdby8 viac4 flex items-center m9vu4 awdil cursor-pointer ngy7c aefqe has-[:checked]:bg-gray-200 kothk hl3q4 dark:bg-neutral-800 dark:hover:bg-neutral-700 dark:has-[:checked]:bg-neutral-700"> <input type="radio" id="hs-pro-chhsnrt2" class="hidden" value="Tomorrow" name="hs-pro-chhsnrt" > <span class="ce341"> <span class="block f4yq1 pdak6 p9tun dark:text-neutral-200"> Tomorrow </span> </span> <span class="block y33fp bqo3s cy6rq z1v6e dark:text-neutral-500"> Wed 9:00 AM </span> </label> <!-- End Checkbox --> <!-- Checkbox --> <label for="hs-pro-chhsnrt3" class="bdby8 viac4 flex items-center m9vu4 awdil cursor-pointer ngy7c aefqe has-[:checked]:bg-gray-200 kothk hl3q4 dark:bg-neutral-800 dark:hover:bg-neutral-700 dark:has-[:checked]:bg-neutral-700"> <input type="radio" id="hs-pro-chhsnrt3" class="hidden" value="This week" name="hs-pro-chhsnrt" > <span class="ce341"> <span class="block f4yq1 pdak6 p9tun dark:text-neutral-200"> This week </span> </span> <span class="block y33fp bqo3s cy6rq z1v6e dark:text-neutral-500"> Thu, May 8, 9:00 AM </span> </label> <!-- End Checkbox --> <!-- Checkbox --> <label for="hs-pro-chhsnrt4" class="bdby8 viac4 flex items-center m9vu4 awdil cursor-pointer ngy7c aefqe has-[:checked]:bg-gray-200 kothk hl3q4 dark:bg-neutral-800 dark:hover:bg-neutral-700 dark:has-[:checked]:bg-neutral-700"> <input type="radio" id="hs-pro-chhsnrt4" class="hidden" value="Next week" name="hs-pro-chhsnrt" > <span class="ce341"> <span class="block f4yq1 pdak6 p9tun dark:text-neutral-200"> Next week </span> </span> <span class="block y33fp bqo3s cy6rq z1v6e dark:text-neutral-500"> Mon, May 13, 9:00 AM </span> </label> <!-- End Checkbox --> </fieldset> <div class="jatgu"> <!-- Button --> <button type="button" class="qaxp8 flex m0bgt items-center u96nv bdby8 viac4 vf6o6 f4yq1 pdak6 p9tun aefqe ngy7c xwjcj c3i4e r0fp5 ip2jr dark:text-neutral-200 dark:hover:bg-neutral-700 dark:focus:bg-neutral-700 dark:hover:text-neutral-200 dark:focus:text-neutral-200" data-hs-overlay="#hs-pro-chhsncs"> Custom <svg class="h21yx ufena" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></svg> </button> <!-- End Button --> </div> </div> <!-- End Body --> </div> </div> </div> <!-- End Archive Message Modal -->
Custom Snooze Date & Time
Preview
Get the code
Existing accounts: Sign in to your account to access the source code.
<!DOCTYPE html> <html lang="en" dir="" class="relative kby5p ly3m4"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <title>Preline UI</title> <link rel="shortcut icon" href="../../favicon.ico"> <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet"> <link rel="stylesheet" href="../../assets/css/obfuscated.min.css"> </head> <body><!-- Archive Message Modal --> <div id="hs-pro-chhsncs" class="hs-overlay hidden ewvyg fixed fopbl x0wu9 rpylz v2o4d bgcuw [--close-when-click-inside:true] xt2fk" role="dialog" tabindex="-1" aria-labelledby="hs-pro-chhsncs-label"> <div class="hs-overlay-open:mt-7 hs-overlay-open:opacity-100 hs-overlay-open:duration-500 ftdwh opacity-0 oviqp g22ra nnamf ppfkn crpye ubyl1 h-[calc(100%-3.5rem)] min-h-[calc(100%-3.5rem)] flex items-center"> <div class="qaxp8 f07vg apqjg flex pz3xv m9vu4 dxf1r fpj7t 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-800"> <!-- Header --> <div class="l3ebx iwwvx flex m0bgt items-center vcvf1 kq7zk dark:border-neutral-700"> <button type="button" class="a0c5w s2k2k dry15 items-center dsp0o lli30 efs5t xk8dv m9vu4 p9tun um5nz r0fp5 ip2jr xwjcj c3i4e dark:bg-neutral-800 dark:hover:bg-neutral-700 dark:text-neutral-400 dark:focus:bg-neutral-700" data-hs-overlay="#hs-pro-chhsn"> <span class="tliya">Back</span> <svg class="h21yx ufena" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m15 18-6-6 6-6"/></svg> </button> <h3 id="hs-pro-chhsncs-label" class="rozsb p9tun dark:text-neutral-200"> Custom date & time </h3> <button type="button" class="a0c5w s2k2k dry15 items-center dsp0o lli30 efs5t xk8dv ac0xq p9tun aefqe r0fp5 joaod xwjcj c3i4e dark:bg-neutral-700 dark:hover:bg-neutral-600 dark:text-neutral-400 dark:focus:bg-neutral-600" aria-label="Close" data-hs-overlay="#hs-pro-chhsncs"> <svg class="h21yx ufena" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg> <span class="tliya">Close</span> </button> </div> <!-- End Header --> <!-- Body --> <div class="lavrb k9xq1 bgcuw zq2x8 oasqe c7c11 iz02v dark:[&::-webkit-scrollbar-track]:bg-neutral-700 dark:[&::-webkit-scrollbar-thumb]:bg-neutral-500"> <div class="flex m0bgt ernqe"> <fieldset class="qaxp8 i80r8 yjors"> <legend class="tliya"> Custom date & time </legend> <!-- Checkbox --> <label for="hs-pro-chhsncsramt1" class="bdby8 viac4 flex dry15 items-center m9vu4 awdil cursor-pointer ngy7c aefqe has-[:checked]:bg-gray-200 kothk hl3q4 dark:bg-neutral-800 dark:hover:bg-neutral-700 dark:has-[:checked]:bg-neutral-700"> <input type="radio" id="hs-pro-chhsncsramt1" class="hidden" value="01:00 AM" name="hs-pro-chhsncsramt" checked> <span class="block ntb30 p9tun dark:text-neutral-200"> 01:00 AM </span> </label> <!-- End Checkbox --> <!-- Checkbox --> <label for="hs-pro-chhsncsramt2" class="bdby8 viac4 flex dry15 items-center m9vu4 awdil cursor-pointer ngy7c aefqe has-[:checked]:bg-gray-200 kothk hl3q4 dark:bg-neutral-800 dark:hover:bg-neutral-700 dark:has-[:checked]:bg-neutral-700"> <input type="radio" id="hs-pro-chhsncsramt2" class="hidden" value="02:00 AM" name="hs-pro-chhsncsramt" > <span class="block ntb30 p9tun dark:text-neutral-200"> 02:00 AM </span> </label> <!-- End Checkbox --> <!-- Checkbox --> <label for="hs-pro-chhsncsramt3" class="bdby8 viac4 flex dry15 items-center m9vu4 awdil cursor-pointer ngy7c aefqe has-[:checked]:bg-gray-200 kothk hl3q4 dark:bg-neutral-800 dark:hover:bg-neutral-700 dark:has-[:checked]:bg-neutral-700"> <input type="radio" id="hs-pro-chhsncsramt3" class="hidden" value="03:00 AM" name="hs-pro-chhsncsramt" > <span class="block ntb30 p9tun dark:text-neutral-200"> 03:00 AM </span> </label> <!-- End Checkbox --> <!-- Checkbox --> <label for="hs-pro-chhsncsramt4" class="bdby8 viac4 flex dry15 items-center m9vu4 awdil cursor-pointer ngy7c aefqe has-[:checked]:bg-gray-200 kothk hl3q4 dark:bg-neutral-800 dark:hover:bg-neutral-700 dark:has-[:checked]:bg-neutral-700"> <input type="radio" id="hs-pro-chhsncsramt4" class="hidden" value="04:00 AM" name="hs-pro-chhsncsramt" > <span class="block ntb30 p9tun dark:text-neutral-200"> 04:00 AM </span> </label> <!-- End Checkbox --> <!-- Checkbox --> <label for="hs-pro-chhsncsramt5" class="bdby8 viac4 flex dry15 items-center m9vu4 awdil cursor-pointer ngy7c aefqe has-[:checked]:bg-gray-200 kothk hl3q4 dark:bg-neutral-800 dark:hover:bg-neutral-700 dark:has-[:checked]:bg-neutral-700"> <input type="radio" id="hs-pro-chhsncsramt5" class="hidden" value="05:00 AM" name="hs-pro-chhsncsramt" > <span class="block ntb30 p9tun dark:text-neutral-200"> 05:00 AM </span> </label> <!-- End Checkbox --> <!-- Checkbox --> <label for="hs-pro-chhsncsramt6" class="bdby8 viac4 flex dry15 items-center m9vu4 awdil cursor-pointer ngy7c aefqe has-[:checked]:bg-gray-200 kothk hl3q4 dark:bg-neutral-800 dark:hover:bg-neutral-700 dark:has-[:checked]:bg-neutral-700"> <input type="radio" id="hs-pro-chhsncsramt6" class="hidden" value="06:00 AM" name="hs-pro-chhsncsramt" > <span class="block ntb30 p9tun dark:text-neutral-200"> 06:00 AM </span> </label> <!-- End Checkbox --> <!-- Checkbox --> <label for="hs-pro-chhsncsramt7" class="bdby8 viac4 flex dry15 items-center m9vu4 awdil cursor-pointer ngy7c aefqe has-[:checked]:bg-gray-200 kothk hl3q4 dark:bg-neutral-800 dark:hover:bg-neutral-700 dark:has-[:checked]:bg-neutral-700"> <input type="radio" id="hs-pro-chhsncsramt7" class="hidden" value="07:00 AM" name="hs-pro-chhsncsramt" > <span class="block ntb30 p9tun dark:text-neutral-200"> 07:00 AM </span> </label> <!-- End Checkbox --> <!-- Checkbox --> <label for="hs-pro-chhsncsramt8" class="bdby8 viac4 flex dry15 items-center m9vu4 awdil cursor-pointer ngy7c aefqe has-[:checked]:bg-gray-200 kothk hl3q4 dark:bg-neutral-800 dark:hover:bg-neutral-700 dark:has-[:checked]:bg-neutral-700"> <input type="radio" id="hs-pro-chhsncsramt8" class="hidden" value="08:00 AM" name="hs-pro-chhsncsramt" > <span class="block ntb30 p9tun dark:text-neutral-200"> 08:00 AM </span> </label> <!-- End Checkbox --> <!-- Checkbox --> <label for="hs-pro-chhsncsramt9" class="bdby8 viac4 flex dry15 items-center m9vu4 awdil cursor-pointer ngy7c aefqe has-[:checked]:bg-gray-200 kothk hl3q4 dark:bg-neutral-800 dark:hover:bg-neutral-700 dark:has-[:checked]:bg-neutral-700"> <input type="radio" id="hs-pro-chhsncsramt9" class="hidden" value="09:00 AM" name="hs-pro-chhsncsramt" > <span class="block ntb30 p9tun dark:text-neutral-200"> 09:00 AM </span> </label> <!-- End Checkbox --> <!-- Checkbox --> <label for="hs-pro-chhsncsramt10" class="bdby8 viac4 flex dry15 items-center m9vu4 awdil cursor-pointer ngy7c aefqe has-[:checked]:bg-gray-200 kothk hl3q4 dark:bg-neutral-800 dark:hover:bg-neutral-700 dark:has-[:checked]:bg-neutral-700"> <input type="radio" id="hs-pro-chhsncsramt10" class="hidden" value="010:00 AM" name="hs-pro-chhsncsramt" > <span class="block ntb30 p9tun dark:text-neutral-200"> 010:00 AM </span> </label> <!-- End Checkbox --> <!-- Checkbox --> <label for="hs-pro-chhsncsramt11" class="bdby8 viac4 flex dry15 items-center m9vu4 awdil cursor-pointer ngy7c aefqe has-[:checked]:bg-gray-200 kothk hl3q4 dark:bg-neutral-800 dark:hover:bg-neutral-700 dark:has-[:checked]:bg-neutral-700"> <input type="radio" id="hs-pro-chhsncsramt11" class="hidden" value="011:00 AM" name="hs-pro-chhsncsramt" > <span class="block ntb30 p9tun dark:text-neutral-200"> 011:00 AM </span> </label> <!-- End Checkbox --> <!-- Checkbox --> <label for="hs-pro-chhsncsramt12" class="bdby8 viac4 flex dry15 items-center m9vu4 awdil cursor-pointer ngy7c aefqe has-[:checked]:bg-gray-200 kothk hl3q4 dark:bg-neutral-800 dark:hover:bg-neutral-700 dark:has-[:checked]:bg-neutral-700"> <input type="radio" id="hs-pro-chhsncsramt12" class="hidden" value="012:00 AM" name="hs-pro-chhsncsramt" > <span class="block ntb30 p9tun dark:text-neutral-200"> 012:00 AM </span> </label> <!-- End Checkbox --> </fieldset> <fieldset class="qaxp8 i80r8 yjors"> <legend class="tliya"> Custom date & time </legend> <!-- Checkbox --> <label for="hs-pro-chhsncsramt13" class="bdby8 viac4 flex dry15 items-center m9vu4 awdil cursor-pointer ngy7c aefqe has-[:checked]:bg-gray-200 kothk hl3q4 dark:bg-neutral-800 dark:hover:bg-neutral-700 dark:has-[:checked]:bg-neutral-700"> <input type="radio" id="hs-pro-chhsncsramt13" class="hidden" value="01:00 PM" name="hs-pro-chhsncsramt" > <span class="block ntb30 p9tun dark:text-neutral-200"> 01:00 PM </span> </label> <!-- End Checkbox --> <!-- Checkbox --> <label for="hs-pro-chhsncsramt14" class="bdby8 viac4 flex dry15 items-center m9vu4 awdil cursor-pointer ngy7c aefqe has-[:checked]:bg-gray-200 kothk hl3q4 dark:bg-neutral-800 dark:hover:bg-neutral-700 dark:has-[:checked]:bg-neutral-700"> <input type="radio" id="hs-pro-chhsncsramt14" class="hidden" value="02:00 PM" name="hs-pro-chhsncsramt" > <span class="block ntb30 p9tun dark:text-neutral-200"> 02:00 PM </span> </label> <!-- End Checkbox --> <!-- Checkbox --> <label for="hs-pro-chhsncsramt15" class="bdby8 viac4 flex dry15 items-center m9vu4 awdil cursor-pointer ngy7c aefqe has-[:checked]:bg-gray-200 kothk hl3q4 dark:bg-neutral-800 dark:hover:bg-neutral-700 dark:has-[:checked]:bg-neutral-700"> <input type="radio" id="hs-pro-chhsncsramt15" class="hidden" value="03:00 PM" name="hs-pro-chhsncsramt" > <span class="block ntb30 p9tun dark:text-neutral-200"> 03:00 PM </span> </label> <!-- End Checkbox --> <!-- Checkbox --> <label for="hs-pro-chhsncsramt16" class="bdby8 viac4 flex dry15 items-center m9vu4 awdil cursor-pointer ngy7c aefqe has-[:checked]:bg-gray-200 kothk hl3q4 dark:bg-neutral-800 dark:hover:bg-neutral-700 dark:has-[:checked]:bg-neutral-700"> <input type="radio" id="hs-pro-chhsncsramt16" class="hidden" value="04:00 PM" name="hs-pro-chhsncsramt" > <span class="block ntb30 p9tun dark:text-neutral-200"> 04:00 PM </span> </label> <!-- End Checkbox --> <!-- Checkbox --> <label for="hs-pro-chhsncsramt17" class="bdby8 viac4 flex dry15 items-center m9vu4 awdil cursor-pointer ngy7c aefqe has-[:checked]:bg-gray-200 kothk hl3q4 dark:bg-neutral-800 dark:hover:bg-neutral-700 dark:has-[:checked]:bg-neutral-700"> <input type="radio" id="hs-pro-chhsncsramt17" class="hidden" value="05:00 PM" name="hs-pro-chhsncsramt" > <span class="block ntb30 p9tun dark:text-neutral-200"> 05:00 PM </span> </label> <!-- End Checkbox --> <!-- Checkbox --> <label for="hs-pro-chhsncsramt18" class="bdby8 viac4 flex dry15 items-center m9vu4 awdil cursor-pointer ngy7c aefqe has-[:checked]:bg-gray-200 kothk hl3q4 dark:bg-neutral-800 dark:hover:bg-neutral-700 dark:has-[:checked]:bg-neutral-700"> <input type="radio" id="hs-pro-chhsncsramt18" class="hidden" value="06:00 PM" name="hs-pro-chhsncsramt" > <span class="block ntb30 p9tun dark:text-neutral-200"> 06:00 PM </span> </label> <!-- End Checkbox --> <!-- Checkbox --> <label for="hs-pro-chhsncsramt19" class="bdby8 viac4 flex dry15 items-center m9vu4 awdil cursor-pointer ngy7c aefqe has-[:checked]:bg-gray-200 kothk hl3q4 dark:bg-neutral-800 dark:hover:bg-neutral-700 dark:has-[:checked]:bg-neutral-700"> <input type="radio" id="hs-pro-chhsncsramt19" class="hidden" value="07:00 PM" name="hs-pro-chhsncsramt" > <span class="block ntb30 p9tun dark:text-neutral-200"> 07:00 PM </span> </label> <!-- End Checkbox --> <!-- Checkbox --> <label for="hs-pro-chhsncsramt20" class="bdby8 viac4 flex dry15 items-center m9vu4 awdil cursor-pointer ngy7c aefqe has-[:checked]:bg-gray-200 kothk hl3q4 dark:bg-neutral-800 dark:hover:bg-neutral-700 dark:has-[:checked]:bg-neutral-700"> <input type="radio" id="hs-pro-chhsncsramt20" class="hidden" value="08:00 PM" name="hs-pro-chhsncsramt" > <span class="block ntb30 p9tun dark:text-neutral-200"> 08:00 PM </span> </label> <!-- End Checkbox --> <!-- Checkbox --> <label for="hs-pro-chhsncsramt21" class="bdby8 viac4 flex dry15 items-center m9vu4 awdil cursor-pointer ngy7c aefqe has-[:checked]:bg-gray-200 kothk hl3q4 dark:bg-neutral-800 dark:hover:bg-neutral-700 dark:has-[:checked]:bg-neutral-700"> <input type="radio" id="hs-pro-chhsncsramt21" class="hidden" value="09:00 PM" name="hs-pro-chhsncsramt" > <span class="block ntb30 p9tun dark:text-neutral-200"> 09:00 PM </span> </label> <!-- End Checkbox --> <!-- Checkbox --> <label for="hs-pro-chhsncsramt22" class="bdby8 viac4 flex dry15 items-center m9vu4 awdil cursor-pointer ngy7c aefqe has-[:checked]:bg-gray-200 kothk hl3q4 dark:bg-neutral-800 dark:hover:bg-neutral-700 dark:has-[:checked]:bg-neutral-700"> <input type="radio" id="hs-pro-chhsncsramt22" class="hidden" value="010:00 PM" name="hs-pro-chhsncsramt" > <span class="block ntb30 p9tun dark:text-neutral-200"> 010:00 PM </span> </label> <!-- End Checkbox --> <!-- Checkbox --> <label for="hs-pro-chhsncsramt23" class="bdby8 viac4 flex dry15 items-center m9vu4 awdil cursor-pointer ngy7c aefqe has-[:checked]:bg-gray-200 kothk hl3q4 dark:bg-neutral-800 dark:hover:bg-neutral-700 dark:has-[:checked]:bg-neutral-700"> <input type="radio" id="hs-pro-chhsncsramt23" class="hidden" value="011:00 PM" name="hs-pro-chhsncsramt" > <span class="block ntb30 p9tun dark:text-neutral-200"> 011:00 PM </span> </label> <!-- End Checkbox --> <!-- Checkbox --> <label for="hs-pro-chhsncsramt24" class="bdby8 viac4 flex dry15 items-center m9vu4 awdil cursor-pointer ngy7c aefqe has-[:checked]:bg-gray-200 kothk hl3q4 dark:bg-neutral-800 dark:hover:bg-neutral-700 dark:has-[:checked]:bg-neutral-700"> <input type="radio" id="hs-pro-chhsncsramt24" class="hidden" value="012:00 PM" name="hs-pro-chhsncsramt" > <span class="block ntb30 p9tun dark:text-neutral-200"> 012:00 PM </span> </label> <!-- End Checkbox --> </fieldset> </div> </div> <!-- End Body --> <!-- Footer --> <div class="wdbkl"> <div class="l3ebx iwwvx dsir7 flex m0bgt items-center dsp0o fj3j7 kq7zk dark:border-neutral-700"> <div class="qaxp8"> <span class="vzx5m r6z19 block bqo3s tqixq dark:text-neutral-400"> Date </span> <!-- Calendar Dropdown --> <div class="hs-dropdown [--auto-close:inside] s2k2k qaxp8"> <button id="hs-pro-dnic" type="button" class="g0aw2 qaxp8 s2k2k items-center bqo3s f4yq1 awdil efs5t xk8dv ac0xq p9tun aefqe xwjcj c3i4e r0fp5 joaod dark:bg-neutral-700 dark:border-transparent dark:text-neutral-300 dark:hover:bg-neutral-600 dark:focus:bg-neutral-600" aria-haspopup="menu" aria-expanded="false" aria-label="Dropdown"> <svg class="h21yx uvg3z vs0hq" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="18" height="18" x="3" y="4" rx="2" ry="2"/><line x1="16" x2="16" y1="2" y2="6"/><line x1="8" x2="8" y1="2" y2="6"/><line x1="3" x2="21" y1="10" y2="10"/><path d="M8 14h.01"/><path d="M12 14h.01"/><path d="M16 14h.01"/><path d="M8 18h.01"/><path d="M12 18h.01"/><path d="M16 18h.01"/></svg> 07/05/2024 </button> <div class="hs-dropdown-menu hs-dropdown-open:opacity-100 u3v2m transition-[opacity,margin] duration opacity-0 hidden le6w0 m9vu4 dxf1r shadow-[0_10px_40px_10px_rgba(0,0,0,0.08)] dark:shadow-[0_10px_40px_10px_rgba(0,0,0,0.2)] dark:bg-neutral-900" role="menu" aria-orientation="vertical" aria-labelledby="hs-pro-dnic"> <!-- Calendar --> <div class="e5zms z4ia7"> <!-- Months --> <div class="i80r8 tdmf2 items-center u96nv z2x3v wdbkl"> <!-- Prev Button --> <div class="lf2i4"> <button type="button" class="a0c5w flex dry15 items-center p9tun um5nz lli30 xwjcj c3i4e r0fp5 ip2jr dark:text-neutral-400 dark:hover:bg-neutral-800 dark:focus:bg-neutral-800" aria-label="Previous"> <svg class="h21yx ufena" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m15 18-6-6 6-6"/></svg> </button> </div> <!-- End Prev Button --> <!-- Month / Year --> <div class="ckb3b flex dry15 items-center ernqe"> <div class="relative"> <select data-hs-select='{ "placeholder": "Select month", "toggleTag": "<button type=\"button\" aria-expanded=\"false\"></button>", "toggleClasses": "hs-select-disabled:pointer-events-none hs-select-disabled:opacity-50 relative flex ifji7 qaxp8 cursor-pointer vf6o6 f4yq1 p9tun mwt7d r0fp5 oh1at vwcz4 cqqxl ycc3s dark:text-neutral-200 dark:hover:text-blue-500 dark:focus:text-blue-500", "dropdownClasses": "jglyo le6w0 n0c4a dgfr2 lavrb z4ia7 m9vu4 efs5t kq7zk awdil cxteb apqjg bgcuw zq2x8 oasqe c7c11 iz02v dark:[&::-webkit-scrollbar-track]:bg-neutral-700 dark:[&::-webkit-scrollbar-thumb]:bg-neutral-500 dark:bg-neutral-900 dark:border-neutral-700", "optionClasses": "g0aw2 qaxp8 pdak6 p9tun cursor-pointer um5nz awdil r0fp5 ip2jr dark:bg-neutral-900 dark:hover:bg-neutral-800 dark:text-neutral-200 dark:focus:bg-neutral-800", "optionTemplate": "<div class=\"flex m0bgt items-center qaxp8 \"><span data-title></span><span class=\"hidden hs-selected:block \"><svg class=\"h21yx vs0hq p9tun dark:text-neutral-200 \" xmlns=\"http:.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"20 6 9 17 4 12\"/></svg></span></div>" }' class="hidden"> <option value="0">January</option> <option value="1">February</option> <option value="2">March</option> <option value="3">April</option> <option value="4">May</option> <option value="5">June</option> <option value="6" selected>July</option> <option value="7">August</option> <option value="8">September</option> <option value="9">October</option> <option value="10">November</option> <option value="11">December</option> </select> </div> <span class="p9tun dark:text-neutral-200">/</span> <div class="relative"> <select data-hs-select='{ "placeholder": "Select year", "toggleTag": "<button type=\"button\" aria-expanded=\"false\"></button>", "toggleClasses": "hs-select-disabled:pointer-events-none hs-select-disabled:opacity-50 relative flex ifji7 qaxp8 cursor-pointer vf6o6 f4yq1 p9tun mwt7d r0fp5 oh1at vwcz4 cqqxl ycc3s dark:text-neutral-200 dark:hover:text-blue-500 dark:focus:text-blue-500", "dropdownClasses": "jglyo le6w0 f2107 dgfr2 lavrb z4ia7 m9vu4 efs5t kq7zk awdil cxteb apqjg bgcuw zq2x8 oasqe c7c11 iz02v dark:[&::-webkit-scrollbar-track]:bg-neutral-700 dark:[&::-webkit-scrollbar-thumb]:bg-neutral-500 dark:bg-neutral-900 dark:border-neutral-700", "optionClasses": "g0aw2 qaxp8 pdak6 p9tun cursor-pointer um5nz awdil r0fp5 ip2jr dark:bg-neutral-900 dark:hover:bg-neutral-800 dark:text-neutral-200 dark:focus:bg-neutral-800", "optionTemplate": "<div class=\"flex m0bgt items-center qaxp8 \"><span data-title></span><span class=\"hidden hs-selected:block \"><svg class=\"h21yx vs0hq p9tun dark:text-neutral-200 \" xmlns=\"http:.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"20 6 9 17 4 12\"/></svg></span></div>" }' class="hidden"> <option selected>2023</option> <option>2024</option> <option>2025</option> <option>2026</option> <option>2027</option> </select> </div> </div> <!-- End Month / Year --> <!-- Next Button --> <div class="lf2i4 flex tiner"> <button type="button" class=" a0c5w flex dry15 items-center p9tun um5nz lli30 xwjcj c3i4e r0fp5 ip2jr dark:text-neutral-400 dark:hover:bg-neutral-800 dark:focus:bg-neutral-800" aria-label="Next"> <svg class="h21yx ufena" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></svg> </button> </div> <!-- End Next Button --> </div> <!-- Months --> <!-- Weeks --> <div class="flex e8ho2"> <span class="cu201 vldo9 block a3cw8 pdak6 z1v6e dark:text-neutral-500"> Mo </span> <span class="cu201 vldo9 block a3cw8 pdak6 z1v6e dark:text-neutral-500"> Tu </span> <span class="cu201 vldo9 block a3cw8 pdak6 z1v6e dark:text-neutral-500"> We </span> <span class="cu201 vldo9 block a3cw8 pdak6 z1v6e dark:text-neutral-500"> Th </span> <span class="cu201 vldo9 block a3cw8 pdak6 z1v6e dark:text-neutral-500"> Fr </span> <span class="cu201 vldo9 block a3cw8 pdak6 z1v6e dark:text-neutral-500"> Sa </span> <span class="cu201 vldo9 block a3cw8 pdak6 z1v6e dark:text-neutral-500"> Su </span> </div> <!-- Weeks --> <!-- Days --> <div class="flex"> <div> <button type="button" class="cu201 yxnrf flex dry15 items-center efs5t xk8dv pdak6 p9tun lli30 n81bt mwt7d xwjcj c3i4e r0fp5 q0mvo oh1at dark:text-neutral-200" disabled> 26 </button> </div> <div> <button type="button" class="cu201 yxnrf flex dry15 items-center efs5t xk8dv pdak6 p9tun lli30 n81bt mwt7d xwjcj c3i4e r0fp5 q0mvo oh1at dark:text-neutral-200" disabled> 27 </button> </div> <div> <button type="button" class="cu201 yxnrf flex dry15 items-center efs5t xk8dv pdak6 p9tun lli30 n81bt mwt7d xwjcj c3i4e r0fp5 q0mvo oh1at dark:text-neutral-200" disabled> 28 </button> </div> <div> <button type="button" class="cu201 yxnrf flex dry15 items-center efs5t xk8dv pdak6 p9tun lli30 n81bt mwt7d xwjcj c3i4e r0fp5 q0mvo oh1at dark:text-neutral-200" disabled> 29 </button> </div> <div> <button type="button" class="cu201 yxnrf flex dry15 items-center efs5t xk8dv pdak6 p9tun lli30 n81bt mwt7d xwjcj c3i4e r0fp5 q0mvo oh1at dark:text-neutral-200" disabled> 30 </button> </div> <div> <button type="button" class="cu201 yxnrf flex dry15 items-center efs5t xk8dv pdak6 p9tun lli30 n81bt mwt7d xwjcj c3i4e r0fp5 q0mvo oh1at dark:text-neutral-200"> 1 </button> </div> <div> <button type="button" class="cu201 yxnrf flex dry15 items-center efs5t xk8dv pdak6 p9tun lli30 n81bt mwt7d xwjcj c3i4e r0fp5 q0mvo oh1at dark:text-neutral-200"> 2 </button> </div> </div> <!-- Days --> <!-- Days --> <div class="flex"> <div> <button type="button" class="cu201 yxnrf flex dry15 items-center efs5t xk8dv pdak6 p9tun lli30 n81bt mwt7d xwjcj c3i4e r0fp5 q0mvo oh1at dark:text-neutral-200"> 3 </button> </div> <div> <button type="button" class="cu201 yxnrf flex dry15 items-center efs5t xk8dv pdak6 p9tun lli30 n81bt mwt7d xwjcj c3i4e r0fp5 q0mvo oh1at dark:text-neutral-200"> 4 </button> </div> <div > <button type="button" class="cu201 yxnrf flex dry15 items-center efs5t xk8dv pdak6 p9tun lli30 n81bt mwt7d xwjcj c3i4e r0fp5 q0mvo oh1at dark:text-neutral-200"> 5 </button> </div> <div > <button type="button" class="cu201 yxnrf flex dry15 items-center efs5t xk8dv pdak6 p9tun lli30 n81bt mwt7d xwjcj c3i4e r0fp5 q0mvo oh1at dark:text-neutral-200"> 6 </button> </div> <div > <button type="button" class="cu201 yxnrf flex dry15 items-center efs5t xk8dv pdak6 p9tun lli30 n81bt mwt7d xwjcj c3i4e r0fp5 q0mvo oh1at dark:text-neutral-200"> 7 </button> </div> <div > <button type="button" class="cu201 yxnrf flex dry15 items-center efs5t xk8dv pdak6 p9tun lli30 n81bt mwt7d xwjcj c3i4e r0fp5 q0mvo oh1at dark:text-neutral-200"> 8 </button> </div> <div > <button type="button" class="cu201 yxnrf flex dry15 items-center efs5t xk8dv pdak6 p9tun lli30 n81bt mwt7d xwjcj c3i4e r0fp5 q0mvo oh1at dark:text-neutral-200"> 9 </button> </div> </div> <!-- Days --> <!-- Days --> <div class="flex"> <div > <button type="button" class="cu201 yxnrf flex dry15 items-center efs5t xk8dv pdak6 p9tun lli30 n81bt mwt7d xwjcj c3i4e r0fp5 q0mvo oh1at dark:text-neutral-200"> 10 </button> </div> <div > <button type="button" class="cu201 yxnrf flex dry15 items-center efs5t xk8dv pdak6 p9tun lli30 n81bt mwt7d xwjcj c3i4e r0fp5 q0mvo oh1at dark:text-neutral-200"> 11 </button> </div> <div > <button type="button" class="cu201 yxnrf flex dry15 items-center efs5t xk8dv pdak6 p9tun lli30 n81bt mwt7d xwjcj c3i4e r0fp5 q0mvo oh1at dark:text-neutral-200"> 12 </button> </div> <div> <button type="button" class="cu201 yxnrf flex dry15 items-center efs5t xk8dv pdak6 p9tun lli30 n81bt mwt7d xwjcj c3i4e r0fp5 q0mvo oh1at dark:text-neutral-200"> 13 </button> </div> <div> <button type="button" class="cu201 yxnrf flex dry15 items-center efs5t xk8dv pdak6 p9tun lli30 n81bt mwt7d xwjcj c3i4e r0fp5 q0mvo oh1at dark:text-neutral-200"> 14 </button> </div> <div> <button type="button" class="cu201 yxnrf flex dry15 items-center efs5t xk8dv pdak6 p9tun lli30 n81bt mwt7d xwjcj c3i4e r0fp5 q0mvo oh1at dark:text-neutral-200"> 15 </button> </div> <div> <button type="button" class="cu201 yxnrf flex dry15 items-center efs5t xk8dv pdak6 p9tun lli30 n81bt mwt7d xwjcj c3i4e r0fp5 q0mvo oh1at dark:text-neutral-200"> 16 </button> </div> </div> <!-- Days --> <!-- Days --> <div class="flex"> <div> <button type="button" class="cu201 yxnrf flex dry15 items-center efs5t xk8dv pdak6 p9tun lli30 n81bt mwt7d xwjcj c3i4e r0fp5 q0mvo oh1at dark:text-neutral-200"> 17 </button> </div> <div> <button type="button" class="cu201 yxnrf flex dry15 items-center efs5t xk8dv pdak6 p9tun lli30 n81bt mwt7d xwjcj c3i4e r0fp5 q0mvo oh1at dark:text-neutral-200"> 18 </button> </div> <div> <button type="button" class="cu201 yxnrf flex dry15 items-center efs5t xk8dv pdak6 p9tun lli30 n81bt mwt7d xwjcj c3i4e r0fp5 q0mvo oh1at dark:text-neutral-200"> 19 </button> </div> <div> <button type="button" class="cu201 yxnrf flex dry15 items-center uylzq efs5t xk8dv pdak6 f4yq1 hrliy n81bt lli30 dark:bg-blue-500 xwjcj c3i4e r0fp5 ip2jr dark:hover:border-neutral-700"> 20 </button> </div> <div> <button type="button" class="cu201 yxnrf flex dry15 items-center efs5t xk8dv pdak6 p9tun lli30 n81bt mwt7d xwjcj c3i4e r0fp5 q0mvo oh1at dark:text-neutral-200"> 21 </button> </div> <div> <button type="button" class="cu201 yxnrf flex dry15 items-center efs5t xk8dv pdak6 p9tun lli30 n81bt mwt7d xwjcj c3i4e r0fp5 q0mvo oh1at dark:text-neutral-200"> 22 </button> </div> <div> <button type="button" class="cu201 yxnrf flex dry15 items-center efs5t xk8dv pdak6 p9tun lli30 n81bt mwt7d xwjcj c3i4e r0fp5 q0mvo oh1at dark:text-neutral-200"> 23 </button> </div> </div> <!-- Days --> <!-- Days --> <div class="flex"> <div> <button type="button" class="cu201 yxnrf flex dry15 items-center efs5t xk8dv pdak6 p9tun lli30 n81bt mwt7d xwjcj c3i4e r0fp5 q0mvo oh1at dark:text-neutral-200"> 24 </button> </div> <div > <button type="button" class="cu201 yxnrf flex dry15 items-center efs5t xk8dv pdak6 p9tun lli30 n81bt mwt7d xwjcj c3i4e r0fp5 q0mvo oh1at dark:text-neutral-200"> 25 </button> </div> <div > <button type="button" class="cu201 yxnrf flex dry15 items-center efs5t xk8dv pdak6 p9tun lli30 n81bt mwt7d xwjcj c3i4e r0fp5 q0mvo oh1at dark:text-neutral-200"> 26 </button> </div> <div > <button type="button" class="cu201 yxnrf flex dry15 items-center efs5t xk8dv pdak6 p9tun lli30 n81bt mwt7d xwjcj c3i4e r0fp5 q0mvo oh1at dark:text-neutral-200"> 27 </button> </div> <div > <button type="button" class="cu201 yxnrf flex dry15 items-center efs5t xk8dv pdak6 p9tun lli30 n81bt mwt7d xwjcj c3i4e r0fp5 q0mvo oh1at dark:text-neutral-200"> 28 </button> </div> <div > <button type="button" class="cu201 yxnrf flex dry15 items-center efs5t xk8dv pdak6 p9tun lli30 n81bt mwt7d xwjcj c3i4e r0fp5 q0mvo oh1at dark:text-neutral-200"> 29 </button> </div> <div > <button type="button" class="cu201 yxnrf flex dry15 items-center efs5t xk8dv pdak6 p9tun lli30 n81bt mwt7d xwjcj c3i4e r0fp5 q0mvo oh1at dark:text-neutral-200"> 30 </button> </div> </div> <!-- Days --> <!-- Days --> <div class="flex"> <div > <button type="button" class="cu201 yxnrf flex dry15 items-center efs5t xk8dv pdak6 p9tun lli30 n81bt mwt7d xwjcj c3i4e r0fp5 q0mvo oh1at dark:text-neutral-200"> 31 </button> </div> <div > <button type="button" class="cu201 yxnrf flex dry15 items-center efs5t xk8dv pdak6 p9tun n81bt mwt7d lli30 xwjcj c3i4e r0fp5 ip2jr dark:text-neutral-200 dark:hover:border-neutral-500 dark:focus:bg-neutral-700" disabled> 1 </button> </div> <div> <button type="button" class="cu201 yxnrf flex dry15 items-center efs5t xk8dv pdak6 p9tun n81bt mwt7d lli30 xwjcj c3i4e r0fp5 ip2jr dark:text-neutral-200 dark:hover:border-neutral-500 dark:focus:bg-neutral-700" disabled> 2 </button> </div> <div> <button type="button" class="cu201 yxnrf flex dry15 items-center efs5t xk8dv pdak6 p9tun n81bt mwt7d lli30 xwjcj c3i4e r0fp5 ip2jr dark:text-neutral-200 dark:hover:border-neutral-500 dark:focus:bg-neutral-700" disabled> 3 </button> </div> <div> <button type="button" class="cu201 yxnrf flex dry15 items-center efs5t xk8dv pdak6 p9tun n81bt mwt7d lli30 xwjcj c3i4e r0fp5 ip2jr dark:text-neutral-200 dark:hover:border-neutral-500 dark:focus:bg-neutral-700" disabled> 4 </button> </div> <div> <button type="button" class="cu201 yxnrf flex dry15 items-center efs5t xk8dv pdak6 p9tun n81bt mwt7d lli30 xwjcj c3i4e r0fp5 ip2jr dark:text-neutral-200 dark:hover:border-neutral-500 dark:focus:bg-neutral-700" disabled> 5 </button> </div> <div> <button type="button" class="cu201 yxnrf flex dry15 items-center efs5t xk8dv pdak6 p9tun n81bt mwt7d lli30 xwjcj c3i4e r0fp5 ip2jr dark:text-neutral-200 dark:hover:border-neutral-500 dark:focus:bg-neutral-700" disabled> 6 </button> </div> </div> <!-- Days --> </div> </div> </div> </div> <!-- End Calendar Dropdown --> <!-- Input --> <div class="qaxp8"> <label for="hs-pro-chhsncstm" class="vzx5m r6z19 block bqo3s tqixq dark:text-neutral-400"> Time </label> <input type="text" class="y027u cr73y block qaxp8 ac0xq xk8dv ngy7c bqo3s shh18 zuutc aefqe aqt2b xwjcj c3i4e joaod actqw esbqm dark:text-neutral-400 dark:bg-neutral-700 dark:text-neutral-300 dark:placeholder:text-neutral-500 dark:hover:bg-neutral-600 dark:focus:bg-neutral-600" id="hs-pro-chhsncstm" value="9:00 AM"> </div> <!-- End Input --> </div> <div class="zvrs6 iwwvx"> <div class="i6awo flex tiner items-center wn51l"> <button type="button" class="bdby8 viac4 ifji7 s2k2k dry15 items-center vf6o6 m9vu4 efs5t kq7zk p9tun bqo3s f4yq1 awdil ycht7 u0d52 r73cx xwjcj c3i4e dark:bg-neutral-800 dark:border-neutral-700 dark:text-neutral-300 dark:hover:bg-neutral-700 dark:focus:bg-neutral-700" data-hs-overlay="#hs-pro-chhsncs"> Cancel </button> <button type="button" class="bdby8 viac4 ifji7 s2k2k dry15 items-center dsp0o vf6o6 uylzq efs5t mwycc hrliy bqo3s f4yq1 awdil ycht7 u0d52 wa7ya xwjcj c3i4e r0fp5 sl5v4 kglp6 dark:focus:ring-blue-500" data-hs-overlay="#hs-pro-chhsncs"> Snooze </button> </div> </div> </div> <!-- End Footer --> </div> </div> </div> <!-- End Archive Message Modal --> <script src="../../assets/vendor/preline/dist/index.js?v=2.5.0"></script> </body> </html> <script src="../../scripts/js/open-modals-on-init.js"></script>
<!-- Archive Message Modal --> <div id="hs-pro-chhsncs" class="hs-overlay hidden ewvyg fixed fopbl x0wu9 rpylz v2o4d bgcuw [--close-when-click-inside:true] xt2fk" role="dialog" tabindex="-1" aria-labelledby="hs-pro-chhsncs-label"> <div class="hs-overlay-open:mt-7 hs-overlay-open:opacity-100 hs-overlay-open:duration-500 ftdwh opacity-0 oviqp g22ra nnamf ppfkn crpye ubyl1 h-[calc(100%-3.5rem)] min-h-[calc(100%-3.5rem)] flex items-center"> <div class="qaxp8 f07vg apqjg flex pz3xv m9vu4 dxf1r fpj7t 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-800"> <!-- Header --> <div class="l3ebx iwwvx flex m0bgt items-center vcvf1 kq7zk dark:border-neutral-700"> <button type="button" class="a0c5w s2k2k dry15 items-center dsp0o lli30 efs5t xk8dv m9vu4 p9tun um5nz r0fp5 ip2jr xwjcj c3i4e dark:bg-neutral-800 dark:hover:bg-neutral-700 dark:text-neutral-400 dark:focus:bg-neutral-700" data-hs-overlay="#hs-pro-chhsn"> <span class="tliya">Back</span> <svg class="h21yx ufena" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m15 18-6-6 6-6"/></svg> </button> <h3 id="hs-pro-chhsncs-label" class="rozsb p9tun dark:text-neutral-200"> Custom date & time </h3> <button type="button" class="a0c5w s2k2k dry15 items-center dsp0o lli30 efs5t xk8dv ac0xq p9tun aefqe r0fp5 joaod xwjcj c3i4e dark:bg-neutral-700 dark:hover:bg-neutral-600 dark:text-neutral-400 dark:focus:bg-neutral-600" aria-label="Close" data-hs-overlay="#hs-pro-chhsncs"> <svg class="h21yx ufena" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg> <span class="tliya">Close</span> </button> </div> <!-- End Header --> <!-- Body --> <div class="lavrb k9xq1 bgcuw zq2x8 oasqe c7c11 iz02v dark:[&::-webkit-scrollbar-track]:bg-neutral-700 dark:[&::-webkit-scrollbar-thumb]:bg-neutral-500"> <div class="flex m0bgt ernqe"> <fieldset class="qaxp8 i80r8 yjors"> <legend class="tliya"> Custom date & time </legend> <!-- Checkbox --> <label for="hs-pro-chhsncsramt1" class="bdby8 viac4 flex dry15 items-center m9vu4 awdil cursor-pointer ngy7c aefqe has-[:checked]:bg-gray-200 kothk hl3q4 dark:bg-neutral-800 dark:hover:bg-neutral-700 dark:has-[:checked]:bg-neutral-700"> <input type="radio" id="hs-pro-chhsncsramt1" class="hidden" value="01:00 AM" name="hs-pro-chhsncsramt" checked> <span class="block ntb30 p9tun dark:text-neutral-200"> 01:00 AM </span> </label> <!-- End Checkbox --> <!-- Checkbox --> <label for="hs-pro-chhsncsramt2" class="bdby8 viac4 flex dry15 items-center m9vu4 awdil cursor-pointer ngy7c aefqe has-[:checked]:bg-gray-200 kothk hl3q4 dark:bg-neutral-800 dark:hover:bg-neutral-700 dark:has-[:checked]:bg-neutral-700"> <input type="radio" id="hs-pro-chhsncsramt2" class="hidden" value="02:00 AM" name="hs-pro-chhsncsramt" > <span class="block ntb30 p9tun dark:text-neutral-200"> 02:00 AM </span> </label> <!-- End Checkbox --> <!-- Checkbox --> <label for="hs-pro-chhsncsramt3" class="bdby8 viac4 flex dry15 items-center m9vu4 awdil cursor-pointer ngy7c aefqe has-[:checked]:bg-gray-200 kothk hl3q4 dark:bg-neutral-800 dark:hover:bg-neutral-700 dark:has-[:checked]:bg-neutral-700"> <input type="radio" id="hs-pro-chhsncsramt3" class="hidden" value="03:00 AM" name="hs-pro-chhsncsramt" > <span class="block ntb30 p9tun dark:text-neutral-200"> 03:00 AM </span> </label> <!-- End Checkbox --> <!-- Checkbox --> <label for="hs-pro-chhsncsramt4" class="bdby8 viac4 flex dry15 items-center m9vu4 awdil cursor-pointer ngy7c aefqe has-[:checked]:bg-gray-200 kothk hl3q4 dark:bg-neutral-800 dark:hover:bg-neutral-700 dark:has-[:checked]:bg-neutral-700"> <input type="radio" id="hs-pro-chhsncsramt4" class="hidden" value="04:00 AM" name="hs-pro-chhsncsramt" > <span class="block ntb30 p9tun dark:text-neutral-200"> 04:00 AM </span> </label> <!-- End Checkbox --> <!-- Checkbox --> <label for="hs-pro-chhsncsramt5" class="bdby8 viac4 flex dry15 items-center m9vu4 awdil cursor-pointer ngy7c aefqe has-[:checked]:bg-gray-200 kothk hl3q4 dark:bg-neutral-800 dark:hover:bg-neutral-700 dark:has-[:checked]:bg-neutral-700"> <input type="radio" id="hs-pro-chhsncsramt5" class="hidden" value="05:00 AM" name="hs-pro-chhsncsramt" > <span class="block ntb30 p9tun dark:text-neutral-200"> 05:00 AM </span> </label> <!-- End Checkbox --> <!-- Checkbox --> <label for="hs-pro-chhsncsramt6" class="bdby8 viac4 flex dry15 items-center m9vu4 awdil cursor-pointer ngy7c aefqe has-[:checked]:bg-gray-200 kothk hl3q4 dark:bg-neutral-800 dark:hover:bg-neutral-700 dark:has-[:checked]:bg-neutral-700"> <input type="radio" id="hs-pro-chhsncsramt6" class="hidden" value="06:00 AM" name="hs-pro-chhsncsramt" > <span class="block ntb30 p9tun dark:text-neutral-200"> 06:00 AM </span> </label> <!-- End Checkbox --> <!-- Checkbox --> <label for="hs-pro-chhsncsramt7" class="bdby8 viac4 flex dry15 items-center m9vu4 awdil cursor-pointer ngy7c aefqe has-[:checked]:bg-gray-200 kothk hl3q4 dark:bg-neutral-800 dark:hover:bg-neutral-700 dark:has-[:checked]:bg-neutral-700"> <input type="radio" id="hs-pro-chhsncsramt7" class="hidden" value="07:00 AM" name="hs-pro-chhsncsramt" > <span class="block ntb30 p9tun dark:text-neutral-200"> 07:00 AM </span> </label> <!-- End Checkbox --> <!-- Checkbox --> <label for="hs-pro-chhsncsramt8" class="bdby8 viac4 flex dry15 items-center m9vu4 awdil cursor-pointer ngy7c aefqe has-[:checked]:bg-gray-200 kothk hl3q4 dark:bg-neutral-800 dark:hover:bg-neutral-700 dark:has-[:checked]:bg-neutral-700"> <input type="radio" id="hs-pro-chhsncsramt8" class="hidden" value="08:00 AM" name="hs-pro-chhsncsramt" > <span class="block ntb30 p9tun dark:text-neutral-200"> 08:00 AM </span> </label> <!-- End Checkbox --> <!-- Checkbox --> <label for="hs-pro-chhsncsramt9" class="bdby8 viac4 flex dry15 items-center m9vu4 awdil cursor-pointer ngy7c aefqe has-[:checked]:bg-gray-200 kothk hl3q4 dark:bg-neutral-800 dark:hover:bg-neutral-700 dark:has-[:checked]:bg-neutral-700"> <input type="radio" id="hs-pro-chhsncsramt9" class="hidden" value="09:00 AM" name="hs-pro-chhsncsramt" > <span class="block ntb30 p9tun dark:text-neutral-200"> 09:00 AM </span> </label> <!-- End Checkbox --> <!-- Checkbox --> <label for="hs-pro-chhsncsramt10" class="bdby8 viac4 flex dry15 items-center m9vu4 awdil cursor-pointer ngy7c aefqe has-[:checked]:bg-gray-200 kothk hl3q4 dark:bg-neutral-800 dark:hover:bg-neutral-700 dark:has-[:checked]:bg-neutral-700"> <input type="radio" id="hs-pro-chhsncsramt10" class="hidden" value="010:00 AM" name="hs-pro-chhsncsramt" > <span class="block ntb30 p9tun dark:text-neutral-200"> 010:00 AM </span> </label> <!-- End Checkbox --> <!-- Checkbox --> <label for="hs-pro-chhsncsramt11" class="bdby8 viac4 flex dry15 items-center m9vu4 awdil cursor-pointer ngy7c aefqe has-[:checked]:bg-gray-200 kothk hl3q4 dark:bg-neutral-800 dark:hover:bg-neutral-700 dark:has-[:checked]:bg-neutral-700"> <input type="radio" id="hs-pro-chhsncsramt11" class="hidden" value="011:00 AM" name="hs-pro-chhsncsramt" > <span class="block ntb30 p9tun dark:text-neutral-200"> 011:00 AM </span> </label> <!-- End Checkbox --> <!-- Checkbox --> <label for="hs-pro-chhsncsramt12" class="bdby8 viac4 flex dry15 items-center m9vu4 awdil cursor-pointer ngy7c aefqe has-[:checked]:bg-gray-200 kothk hl3q4 dark:bg-neutral-800 dark:hover:bg-neutral-700 dark:has-[:checked]:bg-neutral-700"> <input type="radio" id="hs-pro-chhsncsramt12" class="hidden" value="012:00 AM" name="hs-pro-chhsncsramt" > <span class="block ntb30 p9tun dark:text-neutral-200"> 012:00 AM </span> </label> <!-- End Checkbox --> </fieldset> <fieldset class="qaxp8 i80r8 yjors"> <legend class="tliya"> Custom date & time </legend> <!-- Checkbox --> <label for="hs-pro-chhsncsramt13" class="bdby8 viac4 flex dry15 items-center m9vu4 awdil cursor-pointer ngy7c aefqe has-[:checked]:bg-gray-200 kothk hl3q4 dark:bg-neutral-800 dark:hover:bg-neutral-700 dark:has-[:checked]:bg-neutral-700"> <input type="radio" id="hs-pro-chhsncsramt13" class="hidden" value="01:00 PM" name="hs-pro-chhsncsramt" > <span class="block ntb30 p9tun dark:text-neutral-200"> 01:00 PM </span> </label> <!-- End Checkbox --> <!-- Checkbox --> <label for="hs-pro-chhsncsramt14" class="bdby8 viac4 flex dry15 items-center m9vu4 awdil cursor-pointer ngy7c aefqe has-[:checked]:bg-gray-200 kothk hl3q4 dark:bg-neutral-800 dark:hover:bg-neutral-700 dark:has-[:checked]:bg-neutral-700"> <input type="radio" id="hs-pro-chhsncsramt14" class="hidden" value="02:00 PM" name="hs-pro-chhsncsramt" > <span class="block ntb30 p9tun dark:text-neutral-200"> 02:00 PM </span> </label> <!-- End Checkbox --> <!-- Checkbox --> <label for="hs-pro-chhsncsramt15" class="bdby8 viac4 flex dry15 items-center m9vu4 awdil cursor-pointer ngy7c aefqe has-[:checked]:bg-gray-200 kothk hl3q4 dark:bg-neutral-800 dark:hover:bg-neutral-700 dark:has-[:checked]:bg-neutral-700"> <input type="radio" id="hs-pro-chhsncsramt15" class="hidden" value="03:00 PM" name="hs-pro-chhsncsramt" > <span class="block ntb30 p9tun dark:text-neutral-200"> 03:00 PM </span> </label> <!-- End Checkbox --> <!-- Checkbox --> <label for="hs-pro-chhsncsramt16" class="bdby8 viac4 flex dry15 items-center m9vu4 awdil cursor-pointer ngy7c aefqe has-[:checked]:bg-gray-200 kothk hl3q4 dark:bg-neutral-800 dark:hover:bg-neutral-700 dark:has-[:checked]:bg-neutral-700"> <input type="radio" id="hs-pro-chhsncsramt16" class="hidden" value="04:00 PM" name="hs-pro-chhsncsramt" > <span class="block ntb30 p9tun dark:text-neutral-200"> 04:00 PM </span> </label> <!-- End Checkbox --> <!-- Checkbox --> <label for="hs-pro-chhsncsramt17" class="bdby8 viac4 flex dry15 items-center m9vu4 awdil cursor-pointer ngy7c aefqe has-[:checked]:bg-gray-200 kothk hl3q4 dark:bg-neutral-800 dark:hover:bg-neutral-700 dark:has-[:checked]:bg-neutral-700"> <input type="radio" id="hs-pro-chhsncsramt17" class="hidden" value="05:00 PM" name="hs-pro-chhsncsramt" > <span class="block ntb30 p9tun dark:text-neutral-200"> 05:00 PM </span> </label> <!-- End Checkbox --> <!-- Checkbox --> <label for="hs-pro-chhsncsramt18" class="bdby8 viac4 flex dry15 items-center m9vu4 awdil cursor-pointer ngy7c aefqe has-[:checked]:bg-gray-200 kothk hl3q4 dark:bg-neutral-800 dark:hover:bg-neutral-700 dark:has-[:checked]:bg-neutral-700"> <input type="radio" id="hs-pro-chhsncsramt18" class="hidden" value="06:00 PM" name="hs-pro-chhsncsramt" > <span class="block ntb30 p9tun dark:text-neutral-200"> 06:00 PM </span> </label> <!-- End Checkbox --> <!-- Checkbox --> <label for="hs-pro-chhsncsramt19" class="bdby8 viac4 flex dry15 items-center m9vu4 awdil cursor-pointer ngy7c aefqe has-[:checked]:bg-gray-200 kothk hl3q4 dark:bg-neutral-800 dark:hover:bg-neutral-700 dark:has-[:checked]:bg-neutral-700"> <input type="radio" id="hs-pro-chhsncsramt19" class="hidden" value="07:00 PM" name="hs-pro-chhsncsramt" > <span class="block ntb30 p9tun dark:text-neutral-200"> 07:00 PM </span> </label> <!-- End Checkbox --> <!-- Checkbox --> <label for="hs-pro-chhsncsramt20" class="bdby8 viac4 flex dry15 items-center m9vu4 awdil cursor-pointer ngy7c aefqe has-[:checked]:bg-gray-200 kothk hl3q4 dark:bg-neutral-800 dark:hover:bg-neutral-700 dark:has-[:checked]:bg-neutral-700"> <input type="radio" id="hs-pro-chhsncsramt20" class="hidden" value="08:00 PM" name="hs-pro-chhsncsramt" > <span class="block ntb30 p9tun dark:text-neutral-200"> 08:00 PM </span> </label> <!-- End Checkbox --> <!-- Checkbox --> <label for="hs-pro-chhsncsramt21" class="bdby8 viac4 flex dry15 items-center m9vu4 awdil cursor-pointer ngy7c aefqe has-[:checked]:bg-gray-200 kothk hl3q4 dark:bg-neutral-800 dark:hover:bg-neutral-700 dark:has-[:checked]:bg-neutral-700"> <input type="radio" id="hs-pro-chhsncsramt21" class="hidden" value="09:00 PM" name="hs-pro-chhsncsramt" > <span class="block ntb30 p9tun dark:text-neutral-200"> 09:00 PM </span> </label> <!-- End Checkbox --> <!-- Checkbox --> <label for="hs-pro-chhsncsramt22" class="bdby8 viac4 flex dry15 items-center m9vu4 awdil cursor-pointer ngy7c aefqe has-[:checked]:bg-gray-200 kothk hl3q4 dark:bg-neutral-800 dark:hover:bg-neutral-700 dark:has-[:checked]:bg-neutral-700"> <input type="radio" id="hs-pro-chhsncsramt22" class="hidden" value="010:00 PM" name="hs-pro-chhsncsramt" > <span class="block ntb30 p9tun dark:text-neutral-200"> 010:00 PM </span> </label> <!-- End Checkbox --> <!-- Checkbox --> <label for="hs-pro-chhsncsramt23" class="bdby8 viac4 flex dry15 items-center m9vu4 awdil cursor-pointer ngy7c aefqe has-[:checked]:bg-gray-200 kothk hl3q4 dark:bg-neutral-800 dark:hover:bg-neutral-700 dark:has-[:checked]:bg-neutral-700"> <input type="radio" id="hs-pro-chhsncsramt23" class="hidden" value="011:00 PM" name="hs-pro-chhsncsramt" > <span class="block ntb30 p9tun dark:text-neutral-200"> 011:00 PM </span> </label> <!-- End Checkbox --> <!-- Checkbox --> <label for="hs-pro-chhsncsramt24" class="bdby8 viac4 flex dry15 items-center m9vu4 awdil cursor-pointer ngy7c aefqe has-[:checked]:bg-gray-200 kothk hl3q4 dark:bg-neutral-800 dark:hover:bg-neutral-700 dark:has-[:checked]:bg-neutral-700"> <input type="radio" id="hs-pro-chhsncsramt24" class="hidden" value="012:00 PM" name="hs-pro-chhsncsramt" > <span class="block ntb30 p9tun dark:text-neutral-200"> 012:00 PM </span> </label> <!-- End Checkbox --> </fieldset> </div> </div> <!-- End Body --> <!-- Footer --> <div class="wdbkl"> <div class="l3ebx iwwvx dsir7 flex m0bgt items-center dsp0o fj3j7 kq7zk dark:border-neutral-700"> <div class="qaxp8"> <span class="vzx5m r6z19 block bqo3s tqixq dark:text-neutral-400"> Date </span> <!-- Calendar Dropdown --> <div class="hs-dropdown [--auto-close:inside] s2k2k qaxp8"> <button id="hs-pro-dnic" type="button" class="g0aw2 qaxp8 s2k2k items-center bqo3s f4yq1 awdil efs5t xk8dv ac0xq p9tun aefqe xwjcj c3i4e r0fp5 joaod dark:bg-neutral-700 dark:border-transparent dark:text-neutral-300 dark:hover:bg-neutral-600 dark:focus:bg-neutral-600" aria-haspopup="menu" aria-expanded="false" aria-label="Dropdown"> <svg class="h21yx uvg3z vs0hq" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="18" height="18" x="3" y="4" rx="2" ry="2"/><line x1="16" x2="16" y1="2" y2="6"/><line x1="8" x2="8" y1="2" y2="6"/><line x1="3" x2="21" y1="10" y2="10"/><path d="M8 14h.01"/><path d="M12 14h.01"/><path d="M16 14h.01"/><path d="M8 18h.01"/><path d="M12 18h.01"/><path d="M16 18h.01"/></svg> 07/05/2024 </button> <div class="hs-dropdown-menu hs-dropdown-open:opacity-100 u3v2m transition-[opacity,margin] duration opacity-0 hidden le6w0 m9vu4 dxf1r shadow-[0_10px_40px_10px_rgba(0,0,0,0.08)] dark:shadow-[0_10px_40px_10px_rgba(0,0,0,0.2)] dark:bg-neutral-900" role="menu" aria-orientation="vertical" aria-labelledby="hs-pro-dnic"> <!-- Calendar --> <div class="e5zms z4ia7"> <!-- Months --> <div class="i80r8 tdmf2 items-center u96nv z2x3v wdbkl"> <!-- Prev Button --> <div class="lf2i4"> <button type="button" class="a0c5w flex dry15 items-center p9tun um5nz lli30 xwjcj c3i4e r0fp5 ip2jr dark:text-neutral-400 dark:hover:bg-neutral-800 dark:focus:bg-neutral-800" aria-label="Previous"> <svg class="h21yx ufena" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m15 18-6-6 6-6"/></svg> </button> </div> <!-- End Prev Button --> <!-- Month / Year --> <div class="ckb3b flex dry15 items-center ernqe"> <div class="relative"> <select data-hs-select='{ "placeholder": "Select month", "toggleTag": "<button type=\"button\" aria-expanded=\"false\"></button>", "toggleClasses": "hs-select-disabled:pointer-events-none hs-select-disabled:opacity-50 relative flex ifji7 qaxp8 cursor-pointer vf6o6 f4yq1 p9tun mwt7d r0fp5 oh1at vwcz4 cqqxl ycc3s dark:text-neutral-200 dark:hover:text-blue-500 dark:focus:text-blue-500", "dropdownClasses": "jglyo le6w0 n0c4a dgfr2 lavrb z4ia7 m9vu4 efs5t kq7zk awdil cxteb apqjg bgcuw zq2x8 oasqe c7c11 iz02v dark:[&::-webkit-scrollbar-track]:bg-neutral-700 dark:[&::-webkit-scrollbar-thumb]:bg-neutral-500 dark:bg-neutral-900 dark:border-neutral-700", "optionClasses": "g0aw2 qaxp8 pdak6 p9tun cursor-pointer um5nz awdil r0fp5 ip2jr dark:bg-neutral-900 dark:hover:bg-neutral-800 dark:text-neutral-200 dark:focus:bg-neutral-800", "optionTemplate": "<div class=\"flex m0bgt items-center qaxp8 \"><span data-title></span><span class=\"hidden hs-selected:block \"><svg class=\"h21yx vs0hq p9tun dark:text-neutral-200 \" xmlns=\"http:.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"20 6 9 17 4 12\"/></svg></span></div>" }' class="hidden"> <option value="0">January</option> <option value="1">February</option> <option value="2">March</option> <option value="3">April</option> <option value="4">May</option> <option value="5">June</option> <option value="6" selected>July</option> <option value="7">August</option> <option value="8">September</option> <option value="9">October</option> <option value="10">November</option> <option value="11">December</option> </select> </div> <span class="p9tun dark:text-neutral-200">/</span> <div class="relative"> <select data-hs-select='{ "placeholder": "Select year", "toggleTag": "<button type=\"button\" aria-expanded=\"false\"></button>", "toggleClasses": "hs-select-disabled:pointer-events-none hs-select-disabled:opacity-50 relative flex ifji7 qaxp8 cursor-pointer vf6o6 f4yq1 p9tun mwt7d r0fp5 oh1at vwcz4 cqqxl ycc3s dark:text-neutral-200 dark:hover:text-blue-500 dark:focus:text-blue-500", "dropdownClasses": "jglyo le6w0 f2107 dgfr2 lavrb z4ia7 m9vu4 efs5t kq7zk awdil cxteb apqjg bgcuw zq2x8 oasqe c7c11 iz02v dark:[&::-webkit-scrollbar-track]:bg-neutral-700 dark:[&::-webkit-scrollbar-thumb]:bg-neutral-500 dark:bg-neutral-900 dark:border-neutral-700", "optionClasses": "g0aw2 qaxp8 pdak6 p9tun cursor-pointer um5nz awdil r0fp5 ip2jr dark:bg-neutral-900 dark:hover:bg-neutral-800 dark:text-neutral-200 dark:focus:bg-neutral-800", "optionTemplate": "<div class=\"flex m0bgt items-center qaxp8 \"><span data-title></span><span class=\"hidden hs-selected:block \"><svg class=\"h21yx vs0hq p9tun dark:text-neutral-200 \" xmlns=\"http:.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"20 6 9 17 4 12\"/></svg></span></div>" }' class="hidden"> <option selected>2023</option> <option>2024</option> <option>2025</option> <option>2026</option> <option>2027</option> </select> </div> </div> <!-- End Month / Year --> <!-- Next Button --> <div class="lf2i4 flex tiner"> <button type="button" class=" a0c5w flex dry15 items-center p9tun um5nz lli30 xwjcj c3i4e r0fp5 ip2jr dark:text-neutral-400 dark:hover:bg-neutral-800 dark:focus:bg-neutral-800" aria-label="Next"> <svg class="h21yx ufena" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></svg> </button> </div> <!-- End Next Button --> </div> <!-- Months --> <!-- Weeks --> <div class="flex e8ho2"> <span class="cu201 vldo9 block a3cw8 pdak6 z1v6e dark:text-neutral-500"> Mo </span> <span class="cu201 vldo9 block a3cw8 pdak6 z1v6e dark:text-neutral-500"> Tu </span> <span class="cu201 vldo9 block a3cw8 pdak6 z1v6e dark:text-neutral-500"> We </span> <span class="cu201 vldo9 block a3cw8 pdak6 z1v6e dark:text-neutral-500"> Th </span> <span class="cu201 vldo9 block a3cw8 pdak6 z1v6e dark:text-neutral-500"> Fr </span> <span class="cu201 vldo9 block a3cw8 pdak6 z1v6e dark:text-neutral-500"> Sa </span> <span class="cu201 vldo9 block a3cw8 pdak6 z1v6e dark:text-neutral-500"> Su </span> </div> <!-- Weeks --> <!-- Days --> <div class="flex"> <div> <button type="button" class="cu201 yxnrf flex dry15 items-center efs5t xk8dv pdak6 p9tun lli30 n81bt mwt7d xwjcj c3i4e r0fp5 q0mvo oh1at dark:text-neutral-200" disabled> 26 </button> </div> <div> <button type="button" class="cu201 yxnrf flex dry15 items-center efs5t xk8dv pdak6 p9tun lli30 n81bt mwt7d xwjcj c3i4e r0fp5 q0mvo oh1at dark:text-neutral-200" disabled> 27 </button> </div> <div> <button type="button" class="cu201 yxnrf flex dry15 items-center efs5t xk8dv pdak6 p9tun lli30 n81bt mwt7d xwjcj c3i4e r0fp5 q0mvo oh1at dark:text-neutral-200" disabled> 28 </button> </div> <div> <button type="button" class="cu201 yxnrf flex dry15 items-center efs5t xk8dv pdak6 p9tun lli30 n81bt mwt7d xwjcj c3i4e r0fp5 q0mvo oh1at dark:text-neutral-200" disabled> 29 </button> </div> <div> <button type="button" class="cu201 yxnrf flex dry15 items-center efs5t xk8dv pdak6 p9tun lli30 n81bt mwt7d xwjcj c3i4e r0fp5 q0mvo oh1at dark:text-neutral-200" disabled> 30 </button> </div> <div> <button type="button" class="cu201 yxnrf flex dry15 items-center efs5t xk8dv pdak6 p9tun lli30 n81bt mwt7d xwjcj c3i4e r0fp5 q0mvo oh1at dark:text-neutral-200"> 1 </button> </div> <div> <button type="button" class="cu201 yxnrf flex dry15 items-center efs5t xk8dv pdak6 p9tun lli30 n81bt mwt7d xwjcj c3i4e r0fp5 q0mvo oh1at dark:text-neutral-200"> 2 </button> </div> </div> <!-- Days --> <!-- Days --> <div class="flex"> <div> <button type="button" class="cu201 yxnrf flex dry15 items-center efs5t xk8dv pdak6 p9tun lli30 n81bt mwt7d xwjcj c3i4e r0fp5 q0mvo oh1at dark:text-neutral-200"> 3 </button> </div> <div> <button type="button" class="cu201 yxnrf flex dry15 items-center efs5t xk8dv pdak6 p9tun lli30 n81bt mwt7d xwjcj c3i4e r0fp5 q0mvo oh1at dark:text-neutral-200"> 4 </button> </div> <div > <button type="button" class="cu201 yxnrf flex dry15 items-center efs5t xk8dv pdak6 p9tun lli30 n81bt mwt7d xwjcj c3i4e r0fp5 q0mvo oh1at dark:text-neutral-200"> 5 </button> </div> <div > <button type="button" class="cu201 yxnrf flex dry15 items-center efs5t xk8dv pdak6 p9tun lli30 n81bt mwt7d xwjcj c3i4e r0fp5 q0mvo oh1at dark:text-neutral-200"> 6 </button> </div> <div > <button type="button" class="cu201 yxnrf flex dry15 items-center efs5t xk8dv pdak6 p9tun lli30 n81bt mwt7d xwjcj c3i4e r0fp5 q0mvo oh1at dark:text-neutral-200"> 7 </button> </div> <div > <button type="button" class="cu201 yxnrf flex dry15 items-center efs5t xk8dv pdak6 p9tun lli30 n81bt mwt7d xwjcj c3i4e r0fp5 q0mvo oh1at dark:text-neutral-200"> 8 </button> </div> <div > <button type="button" class="cu201 yxnrf flex dry15 items-center efs5t xk8dv pdak6 p9tun lli30 n81bt mwt7d xwjcj c3i4e r0fp5 q0mvo oh1at dark:text-neutral-200"> 9 </button> </div> </div> <!-- Days --> <!-- Days --> <div class="flex"> <div > <button type="button" class="cu201 yxnrf flex dry15 items-center efs5t xk8dv pdak6 p9tun lli30 n81bt mwt7d xwjcj c3i4e r0fp5 q0mvo oh1at dark:text-neutral-200"> 10 </button> </div> <div > <button type="button" class="cu201 yxnrf flex dry15 items-center efs5t xk8dv pdak6 p9tun lli30 n81bt mwt7d xwjcj c3i4e r0fp5 q0mvo oh1at dark:text-neutral-200"> 11 </button> </div> <div > <button type="button" class="cu201 yxnrf flex dry15 items-center efs5t xk8dv pdak6 p9tun lli30 n81bt mwt7d xwjcj c3i4e r0fp5 q0mvo oh1at dark:text-neutral-200"> 12 </button> </div> <div> <button type="button" class="cu201 yxnrf flex dry15 items-center efs5t xk8dv pdak6 p9tun lli30 n81bt mwt7d xwjcj c3i4e r0fp5 q0mvo oh1at dark:text-neutral-200"> 13 </button> </div> <div> <button type="button" class="cu201 yxnrf flex dry15 items-center efs5t xk8dv pdak6 p9tun lli30 n81bt mwt7d xwjcj c3i4e r0fp5 q0mvo oh1at dark:text-neutral-200"> 14 </button> </div> <div> <button type="button" class="cu201 yxnrf flex dry15 items-center efs5t xk8dv pdak6 p9tun lli30 n81bt mwt7d xwjcj c3i4e r0fp5 q0mvo oh1at dark:text-neutral-200"> 15 </button> </div> <div> <button type="button" class="cu201 yxnrf flex dry15 items-center efs5t xk8dv pdak6 p9tun lli30 n81bt mwt7d xwjcj c3i4e r0fp5 q0mvo oh1at dark:text-neutral-200"> 16 </button> </div> </div> <!-- Days --> <!-- Days --> <div class="flex"> <div> <button type="button" class="cu201 yxnrf flex dry15 items-center efs5t xk8dv pdak6 p9tun lli30 n81bt mwt7d xwjcj c3i4e r0fp5 q0mvo oh1at dark:text-neutral-200"> 17 </button> </div> <div> <button type="button" class="cu201 yxnrf flex dry15 items-center efs5t xk8dv pdak6 p9tun lli30 n81bt mwt7d xwjcj c3i4e r0fp5 q0mvo oh1at dark:text-neutral-200"> 18 </button> </div> <div> <button type="button" class="cu201 yxnrf flex dry15 items-center efs5t xk8dv pdak6 p9tun lli30 n81bt mwt7d xwjcj c3i4e r0fp5 q0mvo oh1at dark:text-neutral-200"> 19 </button> </div> <div> <button type="button" class="cu201 yxnrf flex dry15 items-center uylzq efs5t xk8dv pdak6 f4yq1 hrliy n81bt lli30 dark:bg-blue-500 xwjcj c3i4e r0fp5 ip2jr dark:hover:border-neutral-700"> 20 </button> </div> <div> <button type="button" class="cu201 yxnrf flex dry15 items-center efs5t xk8dv pdak6 p9tun lli30 n81bt mwt7d xwjcj c3i4e r0fp5 q0mvo oh1at dark:text-neutral-200"> 21 </button> </div> <div> <button type="button" class="cu201 yxnrf flex dry15 items-center efs5t xk8dv pdak6 p9tun lli30 n81bt mwt7d xwjcj c3i4e r0fp5 q0mvo oh1at dark:text-neutral-200"> 22 </button> </div> <div> <button type="button" class="cu201 yxnrf flex dry15 items-center efs5t xk8dv pdak6 p9tun lli30 n81bt mwt7d xwjcj c3i4e r0fp5 q0mvo oh1at dark:text-neutral-200"> 23 </button> </div> </div> <!-- Days --> <!-- Days --> <div class="flex"> <div> <button type="button" class="cu201 yxnrf flex dry15 items-center efs5t xk8dv pdak6 p9tun lli30 n81bt mwt7d xwjcj c3i4e r0fp5 q0mvo oh1at dark:text-neutral-200"> 24 </button> </div> <div > <button type="button" class="cu201 yxnrf flex dry15 items-center efs5t xk8dv pdak6 p9tun lli30 n81bt mwt7d xwjcj c3i4e r0fp5 q0mvo oh1at dark:text-neutral-200"> 25 </button> </div> <div > <button type="button" class="cu201 yxnrf flex dry15 items-center efs5t xk8dv pdak6 p9tun lli30 n81bt mwt7d xwjcj c3i4e r0fp5 q0mvo oh1at dark:text-neutral-200"> 26 </button> </div> <div > <button type="button" class="cu201 yxnrf flex dry15 items-center efs5t xk8dv pdak6 p9tun lli30 n81bt mwt7d xwjcj c3i4e r0fp5 q0mvo oh1at dark:text-neutral-200"> 27 </button> </div> <div > <button type="button" class="cu201 yxnrf flex dry15 items-center efs5t xk8dv pdak6 p9tun lli30 n81bt mwt7d xwjcj c3i4e r0fp5 q0mvo oh1at dark:text-neutral-200"> 28 </button> </div> <div > <button type="button" class="cu201 yxnrf flex dry15 items-center efs5t xk8dv pdak6 p9tun lli30 n81bt mwt7d xwjcj c3i4e r0fp5 q0mvo oh1at dark:text-neutral-200"> 29 </button> </div> <div > <button type="button" class="cu201 yxnrf flex dry15 items-center efs5t xk8dv pdak6 p9tun lli30 n81bt mwt7d xwjcj c3i4e r0fp5 q0mvo oh1at dark:text-neutral-200"> 30 </button> </div> </div> <!-- Days --> <!-- Days --> <div class="flex"> <div > <button type="button" class="cu201 yxnrf flex dry15 items-center efs5t xk8dv pdak6 p9tun lli30 n81bt mwt7d xwjcj c3i4e r0fp5 q0mvo oh1at dark:text-neutral-200"> 31 </button> </div> <div > <button type="button" class="cu201 yxnrf flex dry15 items-center efs5t xk8dv pdak6 p9tun n81bt mwt7d lli30 xwjcj c3i4e r0fp5 ip2jr dark:text-neutral-200 dark:hover:border-neutral-500 dark:focus:bg-neutral-700" disabled> 1 </button> </div> <div> <button type="button" class="cu201 yxnrf flex dry15 items-center efs5t xk8dv pdak6 p9tun n81bt mwt7d lli30 xwjcj c3i4e r0fp5 ip2jr dark:text-neutral-200 dark:hover:border-neutral-500 dark:focus:bg-neutral-700" disabled> 2 </button> </div> <div> <button type="button" class="cu201 yxnrf flex dry15 items-center efs5t xk8dv pdak6 p9tun n81bt mwt7d lli30 xwjcj c3i4e r0fp5 ip2jr dark:text-neutral-200 dark:hover:border-neutral-500 dark:focus:bg-neutral-700" disabled> 3 </button> </div> <div> <button type="button" class="cu201 yxnrf flex dry15 items-center efs5t xk8dv pdak6 p9tun n81bt mwt7d lli30 xwjcj c3i4e r0fp5 ip2jr dark:text-neutral-200 dark:hover:border-neutral-500 dark:focus:bg-neutral-700" disabled> 4 </button> </div> <div> <button type="button" class="cu201 yxnrf flex dry15 items-center efs5t xk8dv pdak6 p9tun n81bt mwt7d lli30 xwjcj c3i4e r0fp5 ip2jr dark:text-neutral-200 dark:hover:border-neutral-500 dark:focus:bg-neutral-700" disabled> 5 </button> </div> <div> <button type="button" class="cu201 yxnrf flex dry15 items-center efs5t xk8dv pdak6 p9tun n81bt mwt7d lli30 xwjcj c3i4e r0fp5 ip2jr dark:text-neutral-200 dark:hover:border-neutral-500 dark:focus:bg-neutral-700" disabled> 6 </button> </div> </div> <!-- Days --> </div> </div> </div> </div> <!-- End Calendar Dropdown --> <!-- Input --> <div class="qaxp8"> <label for="hs-pro-chhsncstm" class="vzx5m r6z19 block bqo3s tqixq dark:text-neutral-400"> Time </label> <input type="text" class="y027u cr73y block qaxp8 ac0xq xk8dv ngy7c bqo3s shh18 zuutc aefqe aqt2b xwjcj c3i4e joaod actqw esbqm dark:text-neutral-400 dark:bg-neutral-700 dark:text-neutral-300 dark:placeholder:text-neutral-500 dark:hover:bg-neutral-600 dark:focus:bg-neutral-600" id="hs-pro-chhsncstm" value="9:00 AM"> </div> <!-- End Input --> </div> <div class="zvrs6 iwwvx"> <div class="i6awo flex tiner items-center wn51l"> <button type="button" class="bdby8 viac4 ifji7 s2k2k dry15 items-center vf6o6 m9vu4 efs5t kq7zk p9tun bqo3s f4yq1 awdil ycht7 u0d52 r73cx xwjcj c3i4e dark:bg-neutral-800 dark:border-neutral-700 dark:text-neutral-300 dark:hover:bg-neutral-700 dark:focus:bg-neutral-700" data-hs-overlay="#hs-pro-chhsncs"> Cancel </button> <button type="button" class="bdby8 viac4 ifji7 s2k2k dry15 items-center dsp0o vf6o6 uylzq efs5t mwycc hrliy bqo3s f4yq1 awdil ycht7 u0d52 wa7ya xwjcj c3i4e r0fp5 sl5v4 kglp6 dark:focus:ring-blue-500" data-hs-overlay="#hs-pro-chhsncs"> Snooze </button> </div> </div> </div> <!-- End Footer --> </div> </div> </div> <!-- End Archive Message Modal -->
Subscribe
Get all the latest Preline updates and news.
All examples
Close
Close