Open Source
Preline Pro
Sign in
Get all access
Home
Examples
Templates
Pricing
Docs
Preline UI (Open Source)
Back to Examples
All examples
Notification Systems
Table-organized admin notification system.
Table Format List of Checkboxes
Preview
Theme:
Default
Harvest
Retro
Ocean
Autumn
Moon
Bubblegum
Cashmere
Olive
Get the code
Existing accounts: Sign in to your account to access the source code.
<!DOCTYPE html> <html lang="en" dir="" class="relative z469n vaohh"> <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 class="w-full xp9pc mx-auto pc4wy nlr7x dark:bg-neutral-900"><!-- Notifications --> <div class="space-y-5"> <!-- Header --> <div class="hidden md:block"> <!-- Grid --> <div class="gs9zt oiqvf wtu50 g0si1 rnorz eyvn0"> <div class="ephfq gghqq"> <h2 class="eitz2 l2bgt"> Notify me about </h2> </div> <!-- End Col --> <div class="ht3uz jr0cl"> <svg class="f832y ih023 mx-auto q95gx" 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="20" height="16" x="2" y="4" rx="2"/><path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7"/></svg> <h3 class="r7fmq zao2n jet6l l2bgt"> Email </h3> </div> <!-- End Col --> <div class="ht3uz jr0cl"> <svg class="f832y ih023 mx-auto q95gx" 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="20" height="14" x="2" y="3" rx="2"/><line x1="8" x2="16" y1="21" y2="21"/><line x1="12" x2="12" y1="17" y2="21"/></svg> <h3 class="r7fmq zao2n jet6l l2bgt"> Desktop </h3> <p class="uhey0 q95gx"> Push notification </p> </div> <!-- End Col --> <div class="ht3uz jr0cl"> <svg class="f832y ih023 mx-auto q95gx" 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="14" height="20" x="5" y="2" rx="2" ry="2"/><path d="M12 18h.01"/></svg> <h3 class="r7fmq zao2n jet6l l2bgt"> Mobile </h3> <p class="uhey0 q95gx"> Push notification </p> </div> <!-- End Col --> </div> <!-- End Grid --> </div> <!-- End Header --> <!-- List --> <ul class="gs9zt oiqvf g0si1 lu76b tp74o rnorz eyvn0"> <!-- Item --> <li class="a8ofa"> <h3 class="eitz2 l2bgt"> General </h3> </li> <!-- End Item --> <!-- Item --> <li class="hidden md:block bxlso bl50u"> <button type="button" class="uhey0 d8utf q1iu5 tmkca jet6l focus:outline-hidden tcf24"> Toggle all </button> </li> <!-- End Item --> <!-- Item --> <li class="hidden md:block bxlso bl50u"> <button type="button" class="uhey0 d8utf q1iu5 tmkca jet6l focus:outline-hidden tcf24"> Toggle all </button> </li> <!-- End Item --> <!-- Item --> <li class="hidden md:block bxlso bl50u"> <button type="button" class="uhey0 d8utf q1iu5 tmkca jet6l focus:outline-hidden tcf24"> Toggle all </button> </li> <!-- End Item --> </ul> <!-- End List --> <!-- List --> <ul class="gs9zt oiqvf md:items-center ei5wd m7h3u wcr5b g3uah"> <!-- Item --> <li class="a8ofa"> <p class="zao2n jet6l l2bgt"> Mentions </p> <p class="zao2n q95gx"> Receive a notification if a teammate mentions you in a note. </p> </li> <!-- End Item --> <!-- Item --> <li class="ht3uz"> <div class="gs9zt nus97 items-center md:block"> <span class="md:hidden zao2n q95gx"> Email </span> <div class="n33lg bl50u"> <input type="checkbox" class="f832y krmzt okamc asek2 r0l8q y9wzu d8utf uun8o p2c6h checked:bg-primary-checked checked:border-primary-checked disabled:opacity-50 disabled:pointer-events-none" checked> </div> </div> </li> <!-- End Item --> <!-- Item --> <li class="ht3uz"> <div class="gs9zt nus97 items-center md:block"> <span class="md:hidden zao2n q95gx"> Desktop </span> <div class="n33lg bl50u"> <input type="checkbox" class="f832y krmzt okamc asek2 r0l8q y9wzu d8utf uun8o p2c6h checked:bg-primary-checked checked:border-primary-checked disabled:opacity-50 disabled:pointer-events-none"> </div> </div> </li> <!-- End Item --> <!-- Item --> <li class="ht3uz"> <div class="gs9zt nus97 items-center md:block"> <span class="md:hidden zao2n q95gx"> Mobile </span> <div class="n33lg bl50u"> <input type="checkbox" class="f832y krmzt okamc asek2 r0l8q y9wzu d8utf uun8o p2c6h checked:bg-primary-checked checked:border-primary-checked disabled:opacity-50 disabled:pointer-events-none"> </div> </div> </li> <!-- End Item --> </ul> <!-- End List --> <!-- List --> <ul class="gs9zt oiqvf md:items-center ei5wd m7h3u wcr5b g3uah"> <!-- Item --> <li class="a8ofa"> <p class="zao2n jet6l l2bgt"> Service provider updates </p> <p class="zao2n q95gx"> Receive a notification when there are changes to the list of Preline service providers </p> </li> <!-- End Item --> <!-- Item --> <li class="ht3uz"> <div class="gs9zt nus97 items-center md:block"> <span class="md:hidden zao2n q95gx"> Email </span> <div class="n33lg bl50u"> <input type="checkbox" class="f832y krmzt okamc asek2 r0l8q y9wzu d8utf uun8o p2c6h checked:bg-primary-checked checked:border-primary-checked disabled:opacity-50 disabled:pointer-events-none" checked> </div> </div> </li> <!-- End Item --> <!-- Item --> <li class="ht3uz"> <div class="gs9zt nus97 items-center md:block"> <span class="md:hidden zao2n q95gx"> Desktop </span> <div class="n33lg bl50u"> <input type="checkbox" class="f832y krmzt okamc asek2 r0l8q y9wzu d8utf uun8o p2c6h checked:bg-primary-checked checked:border-primary-checked disabled:opacity-50 disabled:pointer-events-none"> </div> </div> </li> <!-- End Item --> <!-- Item --> <li class="ht3uz"> <div class="gs9zt nus97 items-center md:block"> <span class="md:hidden zao2n q95gx"> Mobile </span> <div class="n33lg bl50u"> <input type="checkbox" class="f832y krmzt okamc asek2 r0l8q y9wzu d8utf uun8o p2c6h checked:bg-primary-checked checked:border-primary-checked disabled:opacity-50 disabled:pointer-events-none"> </div> </div> </li> <!-- End Item --> </ul> <!-- End List --> <!-- List --> <ul class="gs9zt oiqvf g0si1 lu76b tp74o rnorz eyvn0"> <!-- Item --> <li class="a8ofa"> <h3 class="eitz2 l2bgt"> API </h3> </li> <!-- End Item --> <!-- Item --> <li class="hidden md:block bxlso bl50u"> <button type="button" class="uhey0 d8utf q1iu5 tmkca jet6l focus:outline-hidden tcf24"> Toggle all </button> </li> <!-- End Item --> <!-- Item --> <li class="hidden md:block bxlso bl50u"> <button type="button" class="uhey0 d8utf q1iu5 tmkca jet6l focus:outline-hidden tcf24"> Toggle all </button> </li> <!-- End Item --> <!-- Item --> <li class="hidden md:block bxlso bl50u"> <button type="button" class="uhey0 d8utf q1iu5 tmkca jet6l focus:outline-hidden tcf24"> Toggle all </button> </li> <!-- End Item --> </ul> <!-- End List --> <!-- List --> <ul class="gs9zt oiqvf md:items-center ei5wd m7h3u wcr5b g3uah"> <!-- Item --> <li class="a8ofa"> <p class="zao2n jet6l l2bgt"> Webhooks </p> <p class="zao2n q95gx"> Receive a notification when webhooks are consistently failing. </p> </li> <!-- End Item --> <!-- Item --> <li class="ht3uz"> <div class="gs9zt nus97 items-center md:block"> <span class="md:hidden zao2n q95gx"> Email </span> <div class="n33lg bl50u"> <input type="checkbox" class="f832y krmzt okamc asek2 r0l8q y9wzu d8utf uun8o p2c6h checked:bg-primary-checked checked:border-primary-checked disabled:opacity-50 disabled:pointer-events-none" checked> </div> </div> </li> <!-- End Item --> <!-- Item --> <li class="ht3uz"> <div class="gs9zt nus97 items-center md:block"> <span class="md:hidden zao2n q95gx"> Desktop </span> <div class="n33lg bl50u"> <input type="checkbox" class="f832y krmzt okamc asek2 r0l8q y9wzu d8utf uun8o p2c6h checked:bg-primary-checked checked:border-primary-checked disabled:opacity-50 disabled:pointer-events-none"> </div> </div> </li> <!-- End Item --> <!-- Item --> <li class="ht3uz"> <div class="gs9zt nus97 items-center md:block"> <span class="md:hidden zao2n q95gx"> Mobile </span> <div class="n33lg bl50u"> <input type="checkbox" class="f832y krmzt okamc asek2 r0l8q y9wzu d8utf uun8o p2c6h checked:bg-primary-checked checked:border-primary-checked disabled:opacity-50 disabled:pointer-events-none"> </div> </div> </li> <!-- End Item --> </ul> <!-- End List --> <!-- List --> <ul class="gs9zt oiqvf g0si1 lu76b tp74o rnorz eyvn0"> <!-- Item --> <li class="a8ofa"> <h3 class="eitz2 l2bgt"> Tasks </h3> </li> <!-- End Item --> <!-- Item --> <li class="hidden md:block bxlso bl50u"> <button type="button" class="uhey0 d8utf q1iu5 tmkca jet6l focus:outline-hidden tcf24"> Toggle all </button> </li> <!-- End Item --> <!-- Item --> <li class="hidden md:block bxlso bl50u"> <button type="button" class="uhey0 d8utf q1iu5 tmkca jet6l focus:outline-hidden tcf24"> Toggle all </button> </li> <!-- End Item --> <!-- Item --> <li class="hidden md:block bxlso bl50u"> <button type="button" class="uhey0 d8utf q1iu5 tmkca jet6l focus:outline-hidden tcf24"> Toggle all </button> </li> <!-- End Item --> </ul> <!-- End List --> <!-- List --> <ul class="gs9zt oiqvf md:items-center ei5wd m7h3u wcr5b g3uah"> <!-- Item --> <li class="a8ofa"> <p class="zao2n jet6l l2bgt"> Task Assignments </p> <p class="zao2n q95gx"> Notify me when I'm assigned a task </p> </li> <!-- End Item --> <!-- Item --> <li class="ht3uz"> <div class="gs9zt nus97 items-center md:block"> <span class="md:hidden zao2n q95gx"> Email </span> <div class="n33lg bl50u"> <input type="checkbox" class="f832y krmzt okamc asek2 r0l8q y9wzu d8utf uun8o p2c6h checked:bg-primary-checked checked:border-primary-checked disabled:opacity-50 disabled:pointer-events-none" checked> </div> </div> </li> <!-- End Item --> <!-- Item --> <li class="ht3uz"> <div class="gs9zt nus97 items-center md:block"> <span class="md:hidden zao2n q95gx"> Desktop </span> <div class="n33lg bl50u"> <input type="checkbox" class="f832y krmzt okamc asek2 r0l8q y9wzu d8utf uun8o p2c6h checked:bg-primary-checked checked:border-primary-checked disabled:opacity-50 disabled:pointer-events-none" checked> </div> </div> </li> <!-- End Item --> <!-- Item --> <li class="ht3uz"> <div class="gs9zt nus97 items-center md:block"> <span class="md:hidden zao2n q95gx"> Mobile </span> <div class="n33lg bl50u"> <input type="checkbox" class="f832y krmzt okamc asek2 r0l8q y9wzu d8utf uun8o p2c6h checked:bg-primary-checked checked:border-primary-checked disabled:opacity-50 disabled:pointer-events-none" checked> </div> </div> </li> <!-- End Item --> </ul> <!-- End List --> <!-- List --> <ul class="gs9zt oiqvf md:items-center ei5wd m7h3u wcr5b g3uah"> <!-- Item --> <li class="a8ofa"> <p class="zao2n jet6l l2bgt"> Tasks sls2a </p> <p class="zao2n q95gx"> Only for tasks youʼve created or assigned </p> </li> <!-- End Item --> <!-- Item --> <li class="ht3uz"> <div class="gs9zt nus97 items-center md:block"> <span class="md:hidden zao2n q95gx"> Email </span> <div class="n33lg bl50u"> <input type="checkbox" class="f832y krmzt okamc asek2 r0l8q y9wzu d8utf uun8o p2c6h checked:bg-primary-checked checked:border-primary-checked disabled:opacity-50 disabled:pointer-events-none" checked> </div> </div> </li> <!-- End Item --> <!-- Item --> <li class="ht3uz"> <div class="gs9zt nus97 items-center md:block"> <span class="md:hidden zao2n q95gx"> Desktop </span> <div class="n33lg bl50u"> <input type="checkbox" class="f832y krmzt okamc asek2 r0l8q y9wzu d8utf uun8o p2c6h checked:bg-primary-checked checked:border-primary-checked disabled:opacity-50 disabled:pointer-events-none" checked> </div> </div> </li> <!-- End Item --> <!-- Item --> <li class="ht3uz"> <div class="gs9zt nus97 items-center md:block"> <span class="md:hidden zao2n q95gx"> Mobile </span> <div class="n33lg bl50u"> <input type="checkbox" class="f832y krmzt okamc asek2 r0l8q y9wzu d8utf uun8o p2c6h checked:bg-primary-checked checked:border-primary-checked disabled:opacity-50 disabled:pointer-events-none" checked> </div> </div> </li> <!-- End Item --> </ul> <!-- End List --> <!-- List --> <ul class="gs9zt oiqvf md:items-center ei5wd m7h3u wcr5b g3uah"> <!-- Item --> <li class="a8ofa"> <p class="zao2n jet6l l2bgt"> Tasks uncompleted </p> <p class="zao2n q95gx"> Only for tasks youʼve created or assigned </p> </li> <!-- End Item --> <!-- Item --> <li class="ht3uz"> <div class="gs9zt nus97 items-center md:block"> <span class="md:hidden zao2n q95gx"> Email </span> <div class="n33lg bl50u"> <input type="checkbox" class="f832y krmzt okamc asek2 r0l8q y9wzu d8utf uun8o p2c6h checked:bg-primary-checked checked:border-primary-checked disabled:opacity-50 disabled:pointer-events-none" checked> </div> </div> </li> <!-- End Item --> <!-- Item --> <li class="ht3uz"> <div class="gs9zt nus97 items-center md:block"> <span class="md:hidden zao2n q95gx"> Desktop </span> <div class="n33lg bl50u"> <input type="checkbox" class="f832y krmzt okamc asek2 r0l8q y9wzu d8utf uun8o p2c6h checked:bg-primary-checked checked:border-primary-checked disabled:opacity-50 disabled:pointer-events-none" checked> </div> </div> </li> <!-- End Item --> <!-- Item --> <li class="ht3uz"> <div class="gs9zt nus97 items-center md:block"> <span class="md:hidden zao2n q95gx"> Mobile </span> <div class="n33lg bl50u"> <input type="checkbox" class="f832y krmzt okamc asek2 r0l8q y9wzu d8utf uun8o p2c6h checked:bg-primary-checked checked:border-primary-checked disabled:opacity-50 disabled:pointer-events-none" checked> </div> </div> </li> <!-- End Item --> </ul> <!-- End List --> </div> <!-- End Notifications --> <script src="../../assets/vendor/preline/dist/index.js?v=4.0.1"></script> </body> </html>
<!-- Notifications --> <div class="space-y-5"> <!-- Header --> <div class="hidden kykkc p68hd y3c38 kqamx md:block"> <!-- Grid --> <div class="gs9zt oiqvf wtu50 g0si1 rnorz eyvn0"> <div class="ephfq gghqq"> <h2 class="eitz2 l2bgt"> Notify me about </h2> </div> <!-- End Col --> <div class="ht3uz jr0cl"> <svg class="f832y ih023 mx-auto q95gx" 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="20" height="16" x="2" y="4" rx="2"/><path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7"/></svg> <h3 class="r7fmq zao2n jet6l l2bgt"> Email </h3> </div> <!-- End Col --> <div class="ht3uz jr0cl"> <svg class="f832y ih023 mx-auto q95gx" 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="20" height="14" x="2" y="3" rx="2"/><line x1="8" x2="16" y1="21" y2="21"/><line x1="12" x2="12" y1="17" y2="21"/></svg> <h3 class="r7fmq zao2n jet6l l2bgt"> Desktop </h3> <p class="uhey0 q95gx"> Push notification </p> </div> <!-- End Col --> <div class="ht3uz jr0cl"> <svg class="f832y ih023 mx-auto q95gx" 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="14" height="20" x="5" y="2" rx="2" ry="2"/><path d="M12 18h.01"/></svg> <h3 class="r7fmq zao2n jet6l l2bgt"> Mobile </h3> <p class="uhey0 q95gx"> Push notification </p> </div> <!-- End Col --> </div> <!-- End Grid --> </div> <!-- End Header --> <!-- List --> <ul class="gs9zt oiqvf g0si1 lu76b tp74o rnorz eyvn0"> <!-- Item --> <li class="a8ofa"> <h3 class="eitz2 l2bgt"> General </h3> </li> <!-- End Item --> <!-- Item --> <li class="hidden md:block bxlso bl50u"> <button type="button" class="uhey0 d8utf q1iu5 tmkca jet6l focus:outline-hidden tcf24"> Toggle all </button> </li> <!-- End Item --> <!-- Item --> <li class="hidden md:block bxlso bl50u"> <button type="button" class="uhey0 d8utf q1iu5 tmkca jet6l focus:outline-hidden tcf24"> Toggle all </button> </li> <!-- End Item --> <!-- Item --> <li class="hidden md:block bxlso bl50u"> <button type="button" class="uhey0 d8utf q1iu5 tmkca jet6l focus:outline-hidden tcf24"> Toggle all </button> </li> <!-- End Item --> </ul> <!-- End List --> <!-- List --> <ul class="gs9zt oiqvf md:items-center ei5wd m7h3u wcr5b g3uah"> <!-- Item --> <li class="a8ofa"> <p class="zao2n jet6l l2bgt"> Mentions </p> <p class="zao2n q95gx"> Receive a notification if a teammate mentions you in a note. </p> </li> <!-- End Item --> <!-- Item --> <li class="ht3uz"> <div class="gs9zt nus97 items-center md:block"> <span class="md:hidden zao2n q95gx"> Email </span> <div class="n33lg bl50u"> <input type="checkbox" class="f832y krmzt okamc asek2 r0l8q y9wzu d8utf uun8o p2c6h checked:bg-primary-checked checked:border-primary-checked disabled:opacity-50 disabled:pointer-events-none" checked> </div> </div> </li> <!-- End Item --> <!-- Item --> <li class="ht3uz"> <div class="gs9zt nus97 items-center md:block"> <span class="md:hidden zao2n q95gx"> Desktop </span> <div class="n33lg bl50u"> <input type="checkbox" class="f832y krmzt okamc asek2 r0l8q y9wzu d8utf uun8o p2c6h checked:bg-primary-checked checked:border-primary-checked disabled:opacity-50 disabled:pointer-events-none"> </div> </div> </li> <!-- End Item --> <!-- Item --> <li class="ht3uz"> <div class="gs9zt nus97 items-center md:block"> <span class="md:hidden zao2n q95gx"> Mobile </span> <div class="n33lg bl50u"> <input type="checkbox" class="f832y krmzt okamc asek2 r0l8q y9wzu d8utf uun8o p2c6h checked:bg-primary-checked checked:border-primary-checked disabled:opacity-50 disabled:pointer-events-none"> </div> </div> </li> <!-- End Item --> </ul> <!-- End List --> <!-- List --> <ul class="gs9zt oiqvf md:items-center ei5wd m7h3u wcr5b g3uah"> <!-- Item --> <li class="a8ofa"> <p class="zao2n jet6l l2bgt"> Service provider updates </p> <p class="zao2n q95gx"> Receive a notification when there are changes to the list of Preline service providers </p> </li> <!-- End Item --> <!-- Item --> <li class="ht3uz"> <div class="gs9zt nus97 items-center md:block"> <span class="md:hidden zao2n q95gx"> Email </span> <div class="n33lg bl50u"> <input type="checkbox" class="f832y krmzt okamc asek2 r0l8q y9wzu d8utf uun8o p2c6h checked:bg-primary-checked checked:border-primary-checked disabled:opacity-50 disabled:pointer-events-none" checked> </div> </div> </li> <!-- End Item --> <!-- Item --> <li class="ht3uz"> <div class="gs9zt nus97 items-center md:block"> <span class="md:hidden zao2n q95gx"> Desktop </span> <div class="n33lg bl50u"> <input type="checkbox" class="f832y krmzt okamc asek2 r0l8q y9wzu d8utf uun8o p2c6h checked:bg-primary-checked checked:border-primary-checked disabled:opacity-50 disabled:pointer-events-none"> </div> </div> </li> <!-- End Item --> <!-- Item --> <li class="ht3uz"> <div class="gs9zt nus97 items-center md:block"> <span class="md:hidden zao2n q95gx"> Mobile </span> <div class="n33lg bl50u"> <input type="checkbox" class="f832y krmzt okamc asek2 r0l8q y9wzu d8utf uun8o p2c6h checked:bg-primary-checked checked:border-primary-checked disabled:opacity-50 disabled:pointer-events-none"> </div> </div> </li> <!-- End Item --> </ul> <!-- End List --> <!-- List --> <ul class="gs9zt oiqvf g0si1 lu76b tp74o rnorz eyvn0"> <!-- Item --> <li class="a8ofa"> <h3 class="eitz2 l2bgt"> API </h3> </li> <!-- End Item --> <!-- Item --> <li class="hidden md:block bxlso bl50u"> <button type="button" class="uhey0 d8utf q1iu5 tmkca jet6l focus:outline-hidden tcf24"> Toggle all </button> </li> <!-- End Item --> <!-- Item --> <li class="hidden md:block bxlso bl50u"> <button type="button" class="uhey0 d8utf q1iu5 tmkca jet6l focus:outline-hidden tcf24"> Toggle all </button> </li> <!-- End Item --> <!-- Item --> <li class="hidden md:block bxlso bl50u"> <button type="button" class="uhey0 d8utf q1iu5 tmkca jet6l focus:outline-hidden tcf24"> Toggle all </button> </li> <!-- End Item --> </ul> <!-- End List --> <!-- List --> <ul class="gs9zt oiqvf md:items-center ei5wd m7h3u wcr5b g3uah"> <!-- Item --> <li class="a8ofa"> <p class="zao2n jet6l l2bgt"> Webhooks </p> <p class="zao2n q95gx"> Receive a notification when webhooks are consistently failing. </p> </li> <!-- End Item --> <!-- Item --> <li class="ht3uz"> <div class="gs9zt nus97 items-center md:block"> <span class="md:hidden zao2n q95gx"> Email </span> <div class="n33lg bl50u"> <input type="checkbox" class="f832y krmzt okamc asek2 r0l8q y9wzu d8utf uun8o p2c6h checked:bg-primary-checked checked:border-primary-checked disabled:opacity-50 disabled:pointer-events-none" checked> </div> </div> </li> <!-- End Item --> <!-- Item --> <li class="ht3uz"> <div class="gs9zt nus97 items-center md:block"> <span class="md:hidden zao2n q95gx"> Desktop </span> <div class="n33lg bl50u"> <input type="checkbox" class="f832y krmzt okamc asek2 r0l8q y9wzu d8utf uun8o p2c6h checked:bg-primary-checked checked:border-primary-checked disabled:opacity-50 disabled:pointer-events-none"> </div> </div> </li> <!-- End Item --> <!-- Item --> <li class="ht3uz"> <div class="gs9zt nus97 items-center md:block"> <span class="md:hidden zao2n q95gx"> Mobile </span> <div class="n33lg bl50u"> <input type="checkbox" class="f832y krmzt okamc asek2 r0l8q y9wzu d8utf uun8o p2c6h checked:bg-primary-checked checked:border-primary-checked disabled:opacity-50 disabled:pointer-events-none"> </div> </div> </li> <!-- End Item --> </ul> <!-- End List --> <!-- List --> <ul class="gs9zt oiqvf g0si1 lu76b tp74o rnorz eyvn0"> <!-- Item --> <li class="a8ofa"> <h3 class="eitz2 l2bgt"> Tasks </h3> </li> <!-- End Item --> <!-- Item --> <li class="hidden md:block bxlso bl50u"> <button type="button" class="uhey0 d8utf q1iu5 tmkca jet6l focus:outline-hidden tcf24"> Toggle all </button> </li> <!-- End Item --> <!-- Item --> <li class="hidden md:block bxlso bl50u"> <button type="button" class="uhey0 d8utf q1iu5 tmkca jet6l focus:outline-hidden tcf24"> Toggle all </button> </li> <!-- End Item --> <!-- Item --> <li class="hidden md:block bxlso bl50u"> <button type="button" class="uhey0 d8utf q1iu5 tmkca jet6l focus:outline-hidden tcf24"> Toggle all </button> </li> <!-- End Item --> </ul> <!-- End List --> <!-- List --> <ul class="gs9zt oiqvf md:items-center ei5wd m7h3u wcr5b g3uah"> <!-- Item --> <li class="a8ofa"> <p class="zao2n jet6l l2bgt"> Task Assignments </p> <p class="zao2n q95gx"> Notify me when I'm assigned a task </p> </li> <!-- End Item --> <!-- Item --> <li class="ht3uz"> <div class="gs9zt nus97 items-center md:block"> <span class="md:hidden zao2n q95gx"> Email </span> <div class="n33lg bl50u"> <input type="checkbox" class="f832y krmzt okamc asek2 r0l8q y9wzu d8utf uun8o p2c6h checked:bg-primary-checked checked:border-primary-checked disabled:opacity-50 disabled:pointer-events-none" checked> </div> </div> </li> <!-- End Item --> <!-- Item --> <li class="ht3uz"> <div class="gs9zt nus97 items-center md:block"> <span class="md:hidden zao2n q95gx"> Desktop </span> <div class="n33lg bl50u"> <input type="checkbox" class="f832y krmzt okamc asek2 r0l8q y9wzu d8utf uun8o p2c6h checked:bg-primary-checked checked:border-primary-checked disabled:opacity-50 disabled:pointer-events-none" checked> </div> </div> </li> <!-- End Item --> <!-- Item --> <li class="ht3uz"> <div class="gs9zt nus97 items-center md:block"> <span class="md:hidden zao2n q95gx"> Mobile </span> <div class="n33lg bl50u"> <input type="checkbox" class="f832y krmzt okamc asek2 r0l8q y9wzu d8utf uun8o p2c6h checked:bg-primary-checked checked:border-primary-checked disabled:opacity-50 disabled:pointer-events-none" checked> </div> </div> </li> <!-- End Item --> </ul> <!-- End List --> <!-- List --> <ul class="gs9zt oiqvf md:items-center ei5wd m7h3u wcr5b g3uah"> <!-- Item --> <li class="a8ofa"> <p class="zao2n jet6l l2bgt"> Tasks sls2a </p> <p class="zao2n q95gx"> Only for tasks youʼve created or assigned </p> </li> <!-- End Item --> <!-- Item --> <li class="ht3uz"> <div class="gs9zt nus97 items-center md:block"> <span class="md:hidden zao2n q95gx"> Email </span> <div class="n33lg bl50u"> <input type="checkbox" class="f832y krmzt okamc asek2 r0l8q y9wzu d8utf uun8o p2c6h checked:bg-primary-checked checked:border-primary-checked disabled:opacity-50 disabled:pointer-events-none" checked> </div> </div> </li> <!-- End Item --> <!-- Item --> <li class="ht3uz"> <div class="gs9zt nus97 items-center md:block"> <span class="md:hidden zao2n q95gx"> Desktop </span> <div class="n33lg bl50u"> <input type="checkbox" class="f832y krmzt okamc asek2 r0l8q y9wzu d8utf uun8o p2c6h checked:bg-primary-checked checked:border-primary-checked disabled:opacity-50 disabled:pointer-events-none" checked> </div> </div> </li> <!-- End Item --> <!-- Item --> <li class="ht3uz"> <div class="gs9zt nus97 items-center md:block"> <span class="md:hidden zao2n q95gx"> Mobile </span> <div class="n33lg bl50u"> <input type="checkbox" class="f832y krmzt okamc asek2 r0l8q y9wzu d8utf uun8o p2c6h checked:bg-primary-checked checked:border-primary-checked disabled:opacity-50 disabled:pointer-events-none" checked> </div> </div> </li> <!-- End Item --> </ul> <!-- End List --> <!-- List --> <ul class="gs9zt oiqvf md:items-center ei5wd m7h3u wcr5b g3uah"> <!-- Item --> <li class="a8ofa"> <p class="zao2n jet6l l2bgt"> Tasks uncompleted </p> <p class="zao2n q95gx"> Only for tasks youʼve created or assigned </p> </li> <!-- End Item --> <!-- Item --> <li class="ht3uz"> <div class="gs9zt nus97 items-center md:block"> <span class="md:hidden zao2n q95gx"> Email </span> <div class="n33lg bl50u"> <input type="checkbox" class="f832y krmzt okamc asek2 r0l8q y9wzu d8utf uun8o p2c6h checked:bg-primary-checked checked:border-primary-checked disabled:opacity-50 disabled:pointer-events-none" checked> </div> </div> </li> <!-- End Item --> <!-- Item --> <li class="ht3uz"> <div class="gs9zt nus97 items-center md:block"> <span class="md:hidden zao2n q95gx"> Desktop </span> <div class="n33lg bl50u"> <input type="checkbox" class="f832y krmzt okamc asek2 r0l8q y9wzu d8utf uun8o p2c6h checked:bg-primary-checked checked:border-primary-checked disabled:opacity-50 disabled:pointer-events-none" checked> </div> </div> </li> <!-- End Item --> <!-- Item --> <li class="ht3uz"> <div class="gs9zt nus97 items-center md:block"> <span class="md:hidden zao2n q95gx"> Mobile </span> <div class="n33lg bl50u"> <input type="checkbox" class="f832y krmzt okamc asek2 r0l8q y9wzu d8utf uun8o p2c6h checked:bg-primary-checked checked:border-primary-checked disabled:opacity-50 disabled:pointer-events-none" checked> </div> </div> </li> <!-- End Item --> </ul> <!-- End List --> </div> <!-- End Notifications -->
Subscribe
Get all the latest Preline updates and news.
All examples
Close
Close