Valex - Laravel Tailwind Admin Template

Live demo


    <button type="button" class="ti-btn ti-btn-primary-full" data-hs-overlay="#hs-overlay-example">
    Button
    </button>
    <div id="hs-overlay-example" class="hs-overlay hidden ti-offcanvas ti-offcanvas-left !z-[105]" tabindex="-1">
    <div class="ti-offcanvas-header">
    <h6 class="ti-offcanvas-title">
    Notifications
    </h6>
    <button type="button" class="ti-btn flex-shrink-0 p-0 transition-none text-gray-500 hover:text-gray-700 focus:ring-gray-400 focus:ring-offset-white dark:text-textmuted dark:hover:text-white/80 dark:focus:ring-white/10 dark:focus:ring-offset-white/10" data-hs-overlay="#hs-overlay-example">
    <span class="sr-only">Close modal</span>
    <svg class="w-3.5 h-3.5" width="8" height="8" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
    <path d="M0.258206 1.00652C0.351976 0.912791 0.479126 0.860131 0.611706 0.860131C0.744296 0.860131 0.871447 0.912791 0.965207 1.00652L3.61171 3.65302L6.25822 1.00652C6.30432 0.958771 6.35952 0.920671 6.42052 0.894471C6.48152 0.868271 6.54712 0.854471 6.61352 0.853901C6.67992 0.853321 6.74572 0.865971 6.80722 0.891111C6.86862 0.916251 6.92442 0.953381 6.97142 1.00032C7.01832 1.04727 7.05552 1.1031 7.08062 1.16454C7.10572 1.22599 7.11842 1.29183 7.11782 1.35822C7.11722 1.42461 7.10342 1.49022 7.07722 1.55122C7.05102 1.61222 7.01292 1.6674 6.96522 1.71352L4.31871 4.36002L6.96522 7.00648C7.05632 7.10078 7.10672 7.22708 7.10552 7.35818C7.10442 7.48928 7.05182 7.61468 6.95912 7.70738C6.86642 7.80018 6.74102 7.85268 6.60992 7.85388C6.47882 7.85498 6.35252 7.80458 6.25822 7.71348L3.61171 5.06702L0.965207 7.71348C0.870907 7.80458 0.744606 7.85498 0.613506 7.85388C0.482406 7.85268 0.357007 7.80018 0.264297 7.70738C0.171597 7.61468 0.119017 7.48928 0.117877 7.35818C0.116737 7.22708 0.167126 7.10078 0.258206 7.00648L2.90471 4.36002L0.258206 1.71352C0.164476 1.61976 0.111816 1.4926 0.111816 1.36002C0.111816 1.22744 0.164476 1.10028 0.258206 1.00652Z" fill="currentColor"></path>
    </svg>
    </button>
    </div>
    <div class="ti-offcanvas-body !h-[90%] !p-0">
    <div>
    <ul class="ti-list-group ti-list-group-flush mb-0">
    <li class="ti-list-group-item !border-t-0">
    <div class="flex items-center">
    <div class="me-2">
    <span class="avatar avatar-md bg-primary !rounded-full">
    NW
    </span>
    </div>
    <div class="flex-grow">
    <p class="font-semibold mb-0">New Website Created<span class="badge bg-light text-textmuted ltr:float-right rtl:float-left">20 Nov 2022</span></p>
    <span class="text-[0.75rem] text-textmuted"><i class="ri-time-line align-middle me-1 inline-block"></i>30 mins ago</span>
    </div>
    </div>
    </li>
    <li class="ti-list-group-item">
    <div class="flex items-center">
    <div class="me-2">
    <span class="avatar avatar-md bg-danger !rounded-full">
    CH
    </span>
    </div>
    <div class="flex-grow">
    <p class="font-semibold mb-0">Prepare for the new project<span class="badge bg-light text-textmuted ltr:float-right rtl:float-left">3 Jan 2024</span></p>
    <span class="text-[0.75rem] text-textmuted"><i class="ri-time-line align-middle me-1 inline-block"></i>2 hrs ago</span>
    </div>
    </div>
    </li>
    <li class="ti-list-group-item">
    <div class="flex items-center">
    <div class="me-2">
    <span class="avatar avatar-md bg-info !rounded-full">
    S
    </span>
    </div>
    <div class="flex-grow">
    <p class="font-semibold mb-0">Decide the live discussion<span class="badge bg-light text-textmuted ltr:float-right rtl:float-left">17 Feb 2024</span></p>
    <span class="text-[0.75rem] text-textmuted"><i class="ri-time-line align-middle me-1 inline-block"></i>3 hrs ago</span>
    </div>
    </div>
    </li>
    <li class="ti-list-group-item">
    <div class="flex items-center">
    <div class="me-2">
    <span class="avatar avatar-md !rounded-full">
    <img src="https://laravelui.spruko.com/tailwind/valex/build/assets/images/faces/12.jpg" alt="" class="!rounded-full">
    </span>
    </div>
    <div class="flex-grow">
    <p class="font-semibold mb-0">Meeting at 3:00 pm<span class="badge bg-light text-textmuted ltr:float-right rtl:float-left">29 Dec 2022</span></p>
    <span class="text-[0.75rem] text-textmuted"><i class="ri-time-line align-middle me-1 inline-block"></i>4 hrs ago</span>
    </div>
    </div>
    </li>
    <li class="ti-list-group-item">
    <div class="flex items-center">
    <div class="me-2">
    <span class="avatar avatar-md bg-success !rounded-full">
    RC
    </span>
    </div>
    <div class="flex-grow">
    <p class="font-semibold mb-0">Prepare for presentation<span class="badge bg-light text-textmuted ltr:float-right rtl:float-left">31 Dec 2022</span></p>
    <span class="text-[0.75rem] text-textmuted"><i class="ri-time-line align-middle me-1 inline-block"></i>4 hrs ago</span>
    </div>
    </div>
    </li>
    <li class="ti-list-group-item">
    <div class="flex items-center">
    <div class="me-2">
    <span class="avatar avatar-md !rounded-full">
    <img src="https://laravelui.spruko.com/tailwind/valex/build/assets/images/faces/1.jpg" alt="" class="!rounded-full">
    </span>
    </div>
    <div class="flex-grow">
    <p class="font-semibold mb-0">Brenda New product launching<span class="badge bg-light text-textmuted ltr:float-right rtl:float-left">1 Jan 2024</span></p>
    <span class="text-[0.75rem] text-textmuted"><i class="ri-time-line align-middle me-1 inline-block"></i>7 hrs ago</span>
    </div>
    </div>
    </li>
    <li class="ti-list-group-item">
    <div class="flex items-center">
    <div class="me-2">
    <span class="avatar avatar-md bg-secondary !rounded-full">
    M
    </span>
    </div>
    <div class="flex-grow">
    <p class="font-semibold mb-0">Medeleine Hey! there i'm available<span class="badge bg-light text-textmuted ltr:float-right rtl:float-left">5 Jan 2024</span></p>
    <span class="text-[0.75rem] text-textmuted"><i class="ri-time-line align-middle me-1 inline-block"></i>3 hrs ago</span>
    </div>
    </div>
    </li>
    <li class="ti-list-group-item">
    <div class="flex items-center">
    <div class="me-2">
    <span class="avatar avatar-md bg-info !rounded-full">
    OL
    </span>
    </div>
    <div class="flex-grow">
    <p class="font-semibold mb-0">Olivia New schedule release<span class="badge bg-light text-textmuted ltr:float-right rtl:float-left">6 Jan 2024</span></p>
    <span class="text-[0.75rem] text-textmuted"><i class="ri-time-line align-middle me-1 inline-block"></i>45 mins ago</span>
    </div>
    </div>
    </li>
    <li class="ti-list-group-item">
    <div class="flex items-center">
    <div class="me-2">
    <span class="avatar avatar-md bg-warning !rounded-full">
    A
    </span>
    </div>
    <div class="flex-grow">
    <p class="font-semibold mb-0">Kamala Preparing for new admin launch<span class="badge bg-light text-textmuted ltr:float-right rtl:float-left">7 Jan 2024</span></p>
    <span class="text-[0.75rem] text-textmuted"><i class="ri-time-line align-middle me-1 inline-block"></i>28 mins ago</span>
    </div>
    </div>
    </li>
    <li class="ti-list-group-item">
    <div class="flex items-center">
    <div class="me-2">
    <span class="avatar avatar-md !rounded-full">
    <img src="https://laravelui.spruko.com/tailwind/valex/build/assets/images/faces/6.jpg" alt="" class="!rounded-full">
    </span>
    </div>
    <div class="flex-grow">
    <p class="font-semibold mb-0">Oisha Meeting with clinet for dinner<span class="badge bg-light text-textmuted ltr:float-right rtl:float-left">10 Jan 2024</span></p>
    <span class="text-[0.75rem] text-textmuted"><i class="ri-time-line align-middle me-1 inline-block"></i>14 hrs ago</span>
    </div>
    </div>
    </li>
    <li class="ti-list-group-item">
    <div class="flex items-center">
    <div class="me-2">
    <span class="avatar avatar-md bg-danger !rounded-full">
    CH
    </span>
    </div>
    <div class="flex-grow">
    <p class="font-semibold mb-0">Prepare for the new project<span class="badge bg-light text-textmuted ltr:float-right rtl:float-left">3 Jan 2024</span></p>
    <span class="text-[0.75rem] text-textmuted"><i class="ri-time-line align-middle me-1 inline-block"></i>2 hrs ago</span>
    </div>
    </div>
    </li>
    <li class="ti-list-group-item">
    <div class="flex items-center">
    <div class="me-2">
    <span class="avatar avatar-md bg-info !rounded-full">
    S
    </span>
    </div>
    <div class="flex-grow">
    <p class="font-semibold mb-0">Decide the live discussion<span class="badge bg-light text-textmuted ltr:float-right rtl:float-left">17 Feb 2024</span></p>
    <span class="text-[0.75rem] text-textmuted"><i class="ri-time-line align-middle me-1 inline-block"></i>3 hrs ago</span>
    </div>
    </div>
    </li>
    <li class="ti-list-group-item">
    <div class="flex items-center">
    <div class="me-2">
    <span class="avatar avatar-md !rounded-full">
    <img src="https://laravelui.spruko.com/tailwind/valex/build/assets/images/faces/14.jpg" alt="" class="!rounded-full">
    </span>
    </div>
    <div class="flex-grow">
    <p class="font-semibold mb-0">Meeting at 3:00 pm<span class="badge bg-light text-textmuted ltr:float-right rtl:float-left">29 Dec 2022</span></p>
    <span class="text-[0.75rem] text-textmuted"><i class="ri-time-line align-middle me-1 inline-block"></i>4 hrs ago</span>
    </div>
    </div>
    </li>
    <li class="ti-list-group-item">
    <div class="flex items-center">
    <div class="me-2">
    <span class="avatar avatar-md bg-success !rounded-full">
    RC
    </span>
    </div>
    <div class="flex-grow">
    <p class="font-semibold mb-0">Prepare for presentation<span class="badge bg-light text-textmuted ltr:float-right rtl:float-left">31 Dec 2022</span></p>
    <span class="text-[0.75rem] text-textmuted"><i class="ri-time-line align-middle me-1 inline-block"></i>4 hrs ago</span>
    </div>
    </div>
    </li>
    </ul>
    </div>
    </div>
    </div>

Body scrolling


    <button type="button" class="m-1 ms-0 ti-btn ti-btn-primary-full" data-hs-overlay="#hs-overlay-body-scrolling">
    Enable body scrolling
    </button>
    <div id="hs-overlay-body-scrolling" class="hs-overlay ti-offcanvas ti-offcanvas-left hidden [--body-scroll:true] [--overlay-backdrop:false] !z-[105]" aria-overlay="true" tabindex="-1">
    <div class="ti-offcanvas-header">
    <h6 class="ti-offcanvas-title">
    Notifications
    </h6>
    <button type="button" class="ti-btn flex-shrink-0 p-0 transition-none text-gray-500 hover:text-gray-700 focus:ring-gray-400 focus:ring-offset-white dark:text-textmuted dark:hover:text-white/80 dark:focus:ring-white/10 dark:focus:ring-offset-white/10" data-hs-overlay="#hs-overlay-body-scrolling">
    <span class="sr-only">Close modal</span>
    <svg class="w-3.5 h-3.5" width="8" height="8" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
    <path d="M0.258206 1.00652C0.351976 0.912791 0.479126 0.860131 0.611706 0.860131C0.744296 0.860131 0.871447 0.912791 0.965207 1.00652L3.61171 3.65302L6.25822 1.00652C6.30432 0.958771 6.35952 0.920671 6.42052 0.894471C6.48152 0.868271 6.54712 0.854471 6.61352 0.853901C6.67992 0.853321 6.74572 0.865971 6.80722 0.891111C6.86862 0.916251 6.92442 0.953381 6.97142 1.00032C7.01832 1.04727 7.05552 1.1031 7.08062 1.16454C7.10572 1.22599 7.11842 1.29183 7.11782 1.35822C7.11722 1.42461 7.10342 1.49022 7.07722 1.55122C7.05102 1.61222 7.01292 1.6674 6.96522 1.71352L4.31871 4.36002L6.96522 7.00648C7.05632 7.10078 7.10672 7.22708 7.10552 7.35818C7.10442 7.48928 7.05182 7.61468 6.95912 7.70738C6.86642 7.80018 6.74102 7.85268 6.60992 7.85388C6.47882 7.85498 6.35252 7.80458 6.25822 7.71348L3.61171 5.06702L0.965207 7.71348C0.870907 7.80458 0.744606 7.85498 0.613506 7.85388C0.482406 7.85268 0.357007 7.80018 0.264297 7.70738C0.171597 7.61468 0.119017 7.48928 0.117877 7.35818C0.116737 7.22708 0.167126 7.10078 0.258206 7.00648L2.90471 4.36002L0.258206 1.71352C0.164476 1.61976 0.111816 1.4926 0.111816 1.36002C0.111816 1.22744 0.164476 1.10028 0.258206 1.00652Z" fill="currentColor"></path>
    </svg>
    </button>
    </div>
    <div class="ti-offcanvas-body !h-[90%] !p-0">
    <div>
    <ul class="ti-list-group ti-list-group-flush mb-0">
    <li class="ti-list-group-item !border-t-0">
    <div class="flex items-center">
    <div class="me-2">
    <span class="avatar avatar-md bg-primary !rounded-full">
    NW
    </span>
    </div>
    <div class="flex-grow">
    <p class="font-semibold mb-0">New Website Created<span class="badge bg-light text-textmuted ltr:float-right rtl:float-left">20 Nov 2022</span></p>
    <span class="text-[0.75rem] text-textmuted"><i class="ri-time-line align-middle me-1 inline-block"></i>30 mins ago</span>
    </div>
    </div>
    </li>
    <li class="ti-list-group-item">
    <div class="flex items-center">
    <div class="me-2">
    <span class="avatar avatar-md bg-danger !rounded-full">
    CH
    </span>
    </div>
    <div class="flex-grow">
    <p class="font-semibold mb-0">Prepare for the new project<span class="badge bg-light text-textmuted ltr:float-right rtl:float-left">3 Jan 2024</span></p>
    <span class="text-[0.75rem] text-textmuted"><i class="ri-time-line align-middle me-1 inline-block"></i>2 hrs ago</span>
    </div>
    </div>
    </li>
    <li class="ti-list-group-item">
    <div class="flex items-center">
    <div class="me-2">
    <span class="avatar avatar-md bg-info !rounded-full">
    S
    </span>
    </div>
    <div class="flex-grow">
    <p class="font-semibold mb-0">Decide the live discussion<span class="badge bg-light text-textmuted ltr:float-right rtl:float-left">17 Feb 2024</span></p>
    <span class="text-[0.75rem] text-textmuted"><i class="ri-time-line align-middle me-1 inline-block"></i>3 hrs ago</span>
    </div>
    </div>
    </li>
    <li class="ti-list-group-item">
    <div class="flex items-center">
    <div class="me-2">
    <span class="avatar avatar-md !rounded-full">
    <img src="https://laravelui.spruko.com/tailwind/valex/build/assets/images/faces/12.jpg" alt="" class="!rounded-full">
    </span>
    </div>
    <div class="flex-grow">
    <p class="font-semibold mb-0">Meeting at 3:00 pm<span class="badge bg-light text-textmuted ltr:float-right rtl:float-left">29 Dec 2022</span></p>
    <span class="text-[0.75rem] text-textmuted"><i class="ri-time-line align-middle me-1 inline-block"></i>4 hrs ago</span>
    </div>
    </div>
    </li>
    <li class="ti-list-group-item">
    <div class="flex items-center">
    <div class="me-2">
    <span class="avatar avatar-md bg-success !rounded-full">
    RC
    </span>
    </div>
    <div class="flex-grow">
    <p class="font-semibold mb-0">Prepare for presentation<span class="badge bg-light text-textmuted ltr:float-right rtl:float-left">31 Dec 2022</span></p>
    <span class="text-[0.75rem] text-textmuted"><i class="ri-time-line align-middle me-1 inline-block"></i>4 hrs ago</span>
    </div>
    </div>
    </li>
    <li class="ti-list-group-item">
    <div class="flex items-center">
    <div class="me-2">
    <span class="avatar avatar-md !rounded-full">
    <img src="https://laravelui.spruko.com/tailwind/valex/build/assets/images/faces/1.jpg" alt="" class="!rounded-full">
    </span>
    </div>
    <div class="flex-grow">
    <p class="font-semibold mb-0">Brenda New product launching<span class="badge bg-light text-textmuted ltr:float-right rtl:float-left">1 Jan 2024</span></p>
    <span class="text-[0.75rem] text-textmuted"><i class="ri-time-line align-middle me-1 inline-block"></i>7 hrs ago</span>
    </div>
    </div>
    </li>
    <li class="ti-list-group-item">
    <div class="flex items-center">
    <div class="me-2">
    <span class="avatar avatar-md bg-secondary !rounded-full">
    M
    </span>
    </div>
    <div class="flex-grow">
    <p class="font-semibold mb-0">Medeleine Hey! there i'm available<span class="badge bg-light text-textmuted ltr:float-right rtl:float-left">5 Jan 2024</span></p>
    <span class="text-[0.75rem] text-textmuted"><i class="ri-time-line align-middle me-1 inline-block"></i>3 hrs ago</span>
    </div>
    </div>
    </li>
    <li class="ti-list-group-item">
    <div class="flex items-center">
    <div class="me-2">
    <span class="avatar avatar-md bg-info !rounded-full">
    OL
    </span>
    </div>
    <div class="flex-grow">
    <p class="font-semibold mb-0">Olivia New schedule release<span class="badge bg-light text-textmuted ltr:float-right rtl:float-left">6 Jan 2024</span></p>
    <span class="text-[0.75rem] text-textmuted"><i class="ri-time-line align-middle me-1 inline-block"></i>45 mins ago</span>
    </div>
    </div>
    </li>
    <li class="ti-list-group-item">
    <div class="flex items-center">
    <div class="me-2">
    <span class="avatar avatar-md bg-warning !rounded-full">
    A
    </span>
    </div>
    <div class="flex-grow">
    <p class="font-semibold mb-0">Kamala Preparing for new admin launch<span class="badge bg-light text-textmuted ltr:float-right rtl:float-left">7 Jan 2024</span></p>
    <span class="text-[0.75rem] text-textmuted"><i class="ri-time-line align-middle me-1 inline-block"></i>28 mins ago</span>
    </div>
    </div>
    </li>
    <li class="ti-list-group-item">
    <div class="flex items-center">
    <div class="me-2">
    <span class="avatar avatar-md !rounded-full">
    <img src="https://laravelui.spruko.com/tailwind/valex/build/assets/images/faces/6.jpg" alt="" class="!rounded-full">
    </span>
    </div>
    <div class="flex-grow">
    <p class="font-semibold mb-0">Oisha Meeting with clinet for dinner<span class="badge bg-light text-textmuted ltr:float-right rtl:float-left">10 Jan 2024</span></p>
    <span class="text-[0.75rem] text-textmuted"><i class="ri-time-line align-middle me-1 inline-block"></i>14 hrs ago</span>
    </div>
    </div>
    </li>
    <li class="ti-list-group-item">
    <div class="flex items-center">
    <div class="me-2">
    <span class="avatar avatar-md bg-danger !rounded-full">
    CH
    </span>
    </div>
    <div class="flex-grow">
    <p class="font-semibold mb-0">Prepare for the new project<span class="badge bg-light text-textmuted ltr:float-right rtl:float-left">3 Jan 2024</span></p>
    <span class="text-[0.75rem] text-textmuted"><i class="ri-time-line align-middle me-1 inline-block"></i>2 hrs ago</span>
    </div>
    </div>
    </li>
    <li class="ti-list-group-item">
    <div class="flex items-center">
    <div class="me-2">
    <span class="avatar avatar-md bg-info !rounded-full">
    S
    </span>
    </div>
    <div class="flex-grow">
    <p class="font-semibold mb-0">Decide the live discussion<span class="badge bg-light text-textmuted ltr:float-right rtl:float-left">17 Feb 2024</span></p>
    <span class="text-[0.75rem] text-textmuted"><i class="ri-time-line align-middle me-1 inline-block"></i>3 hrs ago</span>
    </div>
    </div>
    </li>
    <li class="ti-list-group-item">
    <div class="flex items-center">
    <div class="me-2">
    <span class="avatar avatar-md !rounded-full">
    <img src="https://laravelui.spruko.com/tailwind/valex/build/assets/images/faces/14.jpg" alt="" class="!rounded-full">
    </span>
    </div>
    <div class="flex-grow">
    <p class="font-semibold mb-0">Meeting at 3:00 pm<span class="badge bg-light text-textmuted ltr:float-right rtl:float-left">29 Dec 2022</span></p>
    <span class="text-[0.75rem] text-textmuted"><i class="ri-time-line align-middle me-1 inline-block"></i>4 hrs ago</span>
    </div>
    </div>
    </li>
    <li class="ti-list-group-item">
    <div class="flex items-center">
    <div class="me-2">
    <span class="avatar avatar-md bg-success !rounded-full">
    RC
    </span>
    </div>
    <div class="flex-grow">
    <p class="font-semibold mb-0">Prepare for presentation<span class="badge bg-light text-textmuted ltr:float-right rtl:float-left">31 Dec 2022</span></p>
    <span class="text-[0.75rem] text-textmuted"><i class="ri-time-line align-middle me-1 inline-block"></i>4 hrs ago</span>
    </div>
    </div>
    </li>
    </ul>
    </div>
    </div>
    </div>

Enable backdrop


    <button type="button" class="m-1 ms-0 ti-btn ti-btn-primary-full" data-hs-overlay="#hs-overlay-backdrop-default">
    Enable backdrop
    </button>

    <div id="hs-overlay-backdrop-default" class="hs-overlay ti-offcanvas ti-offcanvas-left hidden !z-[105]" tabindex="-1">
    <div class="ti-offcanvas-header">
    <h6 class="ti-offcanvas-title">
    Notifications
    </h6>
    <button type="button" class="ti-btn flex-shrink-0 p-0 transition-none text-gray-500 hover:text-gray-700 focus:ring-gray-400 focus:ring-offset-white dark:text-textmuted dark:hover:text-white/80 dark:focus:ring-white/10 dark:focus:ring-offset-white/10" data-hs-overlay="#hs-overlay-backdrop-default">
    <span class="sr-only">Close modal</span>
    <svg class="w-3.5 h-3.5" width="8" height="8" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
    <path d="M0.258206 1.00652C0.351976 0.912791 0.479126 0.860131 0.611706 0.860131C0.744296 0.860131 0.871447 0.912791 0.965207 1.00652L3.61171 3.65302L6.25822 1.00652C6.30432 0.958771 6.35952 0.920671 6.42052 0.894471C6.48152 0.868271 6.54712 0.854471 6.61352 0.853901C6.67992 0.853321 6.74572 0.865971 6.80722 0.891111C6.86862 0.916251 6.92442 0.953381 6.97142 1.00032C7.01832 1.04727 7.05552 1.1031 7.08062 1.16454C7.10572 1.22599 7.11842 1.29183 7.11782 1.35822C7.11722 1.42461 7.10342 1.49022 7.07722 1.55122C7.05102 1.61222 7.01292 1.6674 6.96522 1.71352L4.31871 4.36002L6.96522 7.00648C7.05632 7.10078 7.10672 7.22708 7.10552 7.35818C7.10442 7.48928 7.05182 7.61468 6.95912 7.70738C6.86642 7.80018 6.74102 7.85268 6.60992 7.85388C6.47882 7.85498 6.35252 7.80458 6.25822 7.71348L3.61171 5.06702L0.965207 7.71348C0.870907 7.80458 0.744606 7.85498 0.613506 7.85388C0.482406 7.85268 0.357007 7.80018 0.264297 7.70738C0.171597 7.61468 0.119017 7.48928 0.117877 7.35818C0.116737 7.22708 0.167126 7.10078 0.258206 7.00648L2.90471 4.36002L0.258206 1.71352C0.164476 1.61976 0.111816 1.4926 0.111816 1.36002C0.111816 1.22744 0.164476 1.10028 0.258206 1.00652Z" fill="currentColor"></path>
    </svg>
    </button>
    </div>
    <div class="ti-offcanvas-body !h-[90%] !p-0">
    <div>
    <ul class="ti-list-group ti-list-group-flush mb-0">
    <li class="ti-list-group-item !border-t-0">
    <div class="flex items-center">
    <div class="me-2">
    <span class="avatar avatar-md bg-primary !rounded-full">
    NW
    </span>
    </div>
    <div class="flex-grow">
    <p class="font-semibold mb-0">New Website Created<span class="badge bg-light text-textmuted ltr:float-right rtl:float-left">20 Nov 2022</span></p>
    <span class="text-[0.75rem] text-textmuted"><i class="ri-time-line align-middle me-1 inline-block"></i>30 mins ago</span>
    </div>
    </div>
    </li>
    <li class="ti-list-group-item">
    <div class="flex items-center">
    <div class="me-2">
    <span class="avatar avatar-md bg-danger !rounded-full">
    CH
    </span>
    </div>
    <div class="flex-grow">
    <p class="font-semibold mb-0">Prepare for the new project<span class="badge bg-light text-textmuted ltr:float-right rtl:float-left">3 Jan 2024</span></p>
    <span class="text-[0.75rem] text-textmuted"><i class="ri-time-line align-middle me-1 inline-block"></i>2 hrs ago</span>
    </div>
    </div>
    </li>
    <li class="ti-list-group-item">
    <div class="flex items-center">
    <div class="me-2">
    <span class="avatar avatar-md bg-info !rounded-full">
    S
    </span>
    </div>
    <div class="flex-grow">
    <p class="font-semibold mb-0">Decide the live discussion<span class="badge bg-light text-textmuted ltr:float-right rtl:float-left">17 Feb 2024</span></p>
    <span class="text-[0.75rem] text-textmuted"><i class="ri-time-line align-middle me-1 inline-block"></i>3 hrs ago</span>
    </div>
    </div>
    </li>
    <li class="ti-list-group-item">
    <div class="flex items-center">
    <div class="me-2">
    <span class="avatar avatar-md !rounded-full">
    <img src="https://laravelui.spruko.com/tailwind/valex/build/assets/images/faces/12.jpg" alt="" class="!rounded-full">
    </span>
    </div>
    <div class="flex-grow">
    <p class="font-semibold mb-0">Meeting at 3:00 pm<span class="badge bg-light text-textmuted ltr:float-right rtl:float-left">29 Dec 2022</span></p>
    <span class="text-[0.75rem] text-textmuted"><i class="ri-time-line align-middle me-1 inline-block"></i>4 hrs ago</span>
    </div>
    </div>
    </li>
    <li class="ti-list-group-item">
    <div class="flex items-center">
    <div class="me-2">
    <span class="avatar avatar-md bg-success !rounded-full">
    RC
    </span>
    </div>
    <div class="flex-grow">
    <p class="font-semibold mb-0">Prepare for presentation<span class="badge bg-light text-textmuted ltr:float-right rtl:float-left">31 Dec 2022</span></p>
    <span class="text-[0.75rem] text-textmuted"><i class="ri-time-line align-middle me-1 inline-block"></i>4 hrs ago</span>
    </div>
    </div>
    </li>
    <li class="ti-list-group-item">
    <div class="flex items-center">
    <div class="me-2">
    <span class="avatar avatar-md !rounded-full">
    <img src="https://laravelui.spruko.com/tailwind/valex/build/assets/images/faces/1.jpg" alt="" class="!rounded-full">
    </span>
    </div>
    <div class="flex-grow">
    <p class="font-semibold mb-0">Brenda New product launching<span class="badge bg-light text-textmuted ltr:float-right rtl:float-left">1 Jan 2024</span></p>
    <span class="text-[0.75rem] text-textmuted"><i class="ri-time-line align-middle me-1 inline-block"></i>7 hrs ago</span>
    </div>
    </div>
    </li>
    <li class="ti-list-group-item">
    <div class="flex items-center">
    <div class="me-2">
    <span class="avatar avatar-md bg-secondary !rounded-full">
    M
    </span>
    </div>
    <div class="flex-grow">
    <p class="font-semibold mb-0">Medeleine Hey! there i'm available<span class="badge bg-light text-textmuted ltr:float-right rtl:float-left">5 Jan 2024</span></p>
    <span class="text-[0.75rem] text-textmuted"><i class="ri-time-line align-middle me-1 inline-block"></i>3 hrs ago</span>
    </div>
    </div>
    </li>
    <li class="ti-list-group-item">
    <div class="flex items-center">
    <div class="me-2">
    <span class="avatar avatar-md bg-info !rounded-full">
    OL
    </span>
    </div>
    <div class="flex-grow">
    <p class="font-semibold mb-0">Olivia New schedule release<span class="badge bg-light text-textmuted ltr:float-right rtl:float-left">6 Jan 2024</span></p>
    <span class="text-[0.75rem] text-textmuted"><i class="ri-time-line align-middle me-1 inline-block"></i>45 mins ago</span>
    </div>
    </div>
    </li>
    <li class="ti-list-group-item">
    <div class="flex items-center">
    <div class="me-2">
    <span class="avatar avatar-md bg-warning !rounded-full">
    A
    </span>
    </div>
    <div class="flex-grow">
    <p class="font-semibold mb-0">Kamala Preparing for new admin launch<span class="badge bg-light text-textmuted ltr:float-right rtl:float-left">7 Jan 2024</span></p>
    <span class="text-[0.75rem] text-textmuted"><i class="ri-time-line align-middle me-1 inline-block"></i>28 mins ago</span>
    </div>
    </div>
    </li>
    <li class="ti-list-group-item">
    <div class="flex items-center">
    <div class="me-2">
    <span class="avatar avatar-md !rounded-full">
    <img src="https://laravelui.spruko.com/tailwind/valex/build/assets/images/faces/6.jpg" alt="" class="!rounded-full">
    </span>
    </div>
    <div class="flex-grow">
    <p class="font-semibold mb-0">Oisha Meeting with clinet for dinner<span class="badge bg-light text-textmuted ltr:float-right rtl:float-left">10 Jan 2024</span></p>
    <span class="text-[0.75rem] text-textmuted"><i class="ri-time-line align-middle me-1 inline-block"></i>14 hrs ago</span>
    </div>
    </div>
    </li>
    <li class="ti-list-group-item">
    <div class="flex items-center">
    <div class="me-2">
    <span class="avatar avatar-md bg-danger !rounded-full">
    CH
    </span>
    </div>
    <div class="flex-grow">
    <p class="font-semibold mb-0">Prepare for the new project<span class="badge bg-light text-textmuted ltr:float-right rtl:float-left">3 Jan 2024</span></p>
    <span class="text-[0.75rem] text-textmuted"><i class="ri-time-line align-middle me-1 inline-block"></i>2 hrs ago</span>
    </div>
    </div>
    </li>
    <li class="ti-list-group-item">
    <div class="flex items-center">
    <div class="me-2">
    <span class="avatar avatar-md bg-info !rounded-full">
    S
    </span>
    </div>
    <div class="flex-grow">
    <p class="font-semibold mb-0">Decide the live discussion<span class="badge bg-light text-textmuted ltr:float-right rtl:float-left">17 Feb 2024</span></p>
    <span class="text-[0.75rem] text-textmuted"><i class="ri-time-line align-middle me-1 inline-block"></i>3 hrs ago</span>
    </div>
    </div>
    </li>
    <li class="ti-list-group-item">
    <div class="flex items-center">
    <div class="me-2">
    <span class="avatar avatar-md !rounded-full">
    <img src="https://laravelui.spruko.com/tailwind/valex/build/assets/images/faces/14.jpg" alt="" class="!rounded-full">
    </span>
    </div>
    <div class="flex-grow">
    <p class="font-semibold mb-0">Meeting at 3:00 pm<span class="badge bg-light text-textmuted ltr:float-right rtl:float-left">29 Dec 2022</span></p>
    <span class="text-[0.75rem] text-textmuted"><i class="ri-time-line align-middle me-1 inline-block"></i>4 hrs ago</span>
    </div>
    </div>
    </li>
    <li class="ti-list-group-item">
    <div class="flex items-center">
    <div class="me-2">
    <span class="avatar avatar-md bg-success !rounded-full">
    RC
    </span>
    </div>
    <div class="flex-grow">
    <p class="font-semibold mb-0">Prepare for presentation<span class="badge bg-light text-textmuted ltr:float-right rtl:float-left">31 Dec 2022</span></p>
    <span class="text-[0.75rem] text-textmuted"><i class="ri-time-line align-middle me-1 inline-block"></i>4 hrs ago</span>
    </div>
    </div>
    </li>
    </ul>
    </div>
    </div>
    </div>

Enable Body scrolling and backdrop


    <button type="button" class="m-1 ms-0 ti-btn ti-btn-primary-full" data-hs-overlay="#hs-overlay-backdrop-with-scrolling">
    Enable both scrolling & backdrop
    </button>

    <div id="hs-overlay-backdrop-with-scrolling" class="hs-overlay ti-offcanvas ti-offcanvas-left hidden !z-[105] [--body-scroll:true]" tabindex="-1" data-hs-overlay-scroll="true">
    <div class="ti-offcanvas-header">
    <h6 class="ti-offcanvas-title">
    Notifications
    </h6>
    <button type="button" class="ti-btn flex-shrink-0 p-0 transition-none text-gray-500 hover:text-gray-700 focus:ring-gray-400 focus:ring-offset-white dark:text-textmuted dark:hover:text-white/80 dark:focus:ring-white/10 dark:focus:ring-offset-white/10" data-hs-overlay="#hs-overlay-backdrop-with-scrolling">
    <span class="sr-only">Close modal</span>
    <svg class="w-3.5 h-3.5" width="8" height="8" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
    <path d="M0.258206 1.00652C0.351976 0.912791 0.479126 0.860131 0.611706 0.860131C0.744296 0.860131 0.871447 0.912791 0.965207 1.00652L3.61171 3.65302L6.25822 1.00652C6.30432 0.958771 6.35952 0.920671 6.42052 0.894471C6.48152 0.868271 6.54712 0.854471 6.61352 0.853901C6.67992 0.853321 6.74572 0.865971 6.80722 0.891111C6.86862 0.916251 6.92442 0.953381 6.97142 1.00032C7.01832 1.04727 7.05552 1.1031 7.08062 1.16454C7.10572 1.22599 7.11842 1.29183 7.11782 1.35822C7.11722 1.42461 7.10342 1.49022 7.07722 1.55122C7.05102 1.61222 7.01292 1.6674 6.96522 1.71352L4.31871 4.36002L6.96522 7.00648C7.05632 7.10078 7.10672 7.22708 7.10552 7.35818C7.10442 7.48928 7.05182 7.61468 6.95912 7.70738C6.86642 7.80018 6.74102 7.85268 6.60992 7.85388C6.47882 7.85498 6.35252 7.80458 6.25822 7.71348L3.61171 5.06702L0.965207 7.71348C0.870907 7.80458 0.744606 7.85498 0.613506 7.85388C0.482406 7.85268 0.357007 7.80018 0.264297 7.70738C0.171597 7.61468 0.119017 7.48928 0.117877 7.35818C0.116737 7.22708 0.167126 7.10078 0.258206 7.00648L2.90471 4.36002L0.258206 1.71352C0.164476 1.61976 0.111816 1.4926 0.111816 1.36002C0.111816 1.22744 0.164476 1.10028 0.258206 1.00652Z" fill="currentColor"></path>
    </svg>
    </button>
    </div>
    <div class="ti-offcanvas-body !h-[90%] !p-0">
    <div>
    <ul class="ti-list-group ti-list-group-flush mb-0">
    <li class="ti-list-group-item !border-t-0">
    <div class="flex items-center">
    <div class="me-2">
    <span class="avatar avatar-md bg-primary !rounded-full">
    NW
    </span>
    </div>
    <div class="flex-grow">
    <p class="font-semibold mb-0">New Website Created<span class="badge bg-light text-textmuted ltr:float-right rtl:float-left">20 Nov 2022</span></p>
    <span class="text-[0.75rem] text-textmuted"><i class="ri-time-line align-middle me-1 inline-block"></i>30 mins ago</span>
    </div>
    </div>
    </li>
    <li class="ti-list-group-item">
    <div class="flex items-center">
    <div class="me-2">
    <span class="avatar avatar-md bg-danger !rounded-full">
    CH
    </span>
    </div>
    <div class="flex-grow">
    <p class="font-semibold mb-0">Prepare for the new project<span class="badge bg-light text-textmuted ltr:float-right rtl:float-left">3 Jan 2024</span></p>
    <span class="text-[0.75rem] text-textmuted"><i class="ri-time-line align-middle me-1 inline-block"></i>2 hrs ago</span>
    </div>
    </div>
    </li>
    <li class="ti-list-group-item">
    <div class="flex items-center">
    <div class="me-2">
    <span class="avatar avatar-md bg-info !rounded-full">
    S
    </span>
    </div>
    <div class="flex-grow">
    <p class="font-semibold mb-0">Decide the live discussion<span class="badge bg-light text-textmuted ltr:float-right rtl:float-left">17 Feb 2024</span></p>
    <span class="text-[0.75rem] text-textmuted"><i class="ri-time-line align-middle me-1 inline-block"></i>3 hrs ago</span>
    </div>
    </div>
    </li>
    <li class="ti-list-group-item">
    <div class="flex items-center">
    <div class="me-2">
    <span class="avatar avatar-md !rounded-full">
    <img src="https://laravelui.spruko.com/tailwind/valex/build/assets/images/faces/12.jpg" alt="" class="!rounded-full">
    </span>
    </div>
    <div class="flex-grow">
    <p class="font-semibold mb-0">Meeting at 3:00 pm<span class="badge bg-light text-textmuted ltr:float-right rtl:float-left">29 Dec 2022</span></p>
    <span class="text-[0.75rem] text-textmuted"><i class="ri-time-line align-middle me-1 inline-block"></i>4 hrs ago</span>
    </div>
    </div>
    </li>
    <li class="ti-list-group-item">
    <div class="flex items-center">
    <div class="me-2">
    <span class="avatar avatar-md bg-success !rounded-full">
    RC
    </span>
    </div>
    <div class="flex-grow">
    <p class="font-semibold mb-0">Prepare for presentation<span class="badge bg-light text-textmuted ltr:float-right rtl:float-left">31 Dec 2022</span></p>
    <span class="text-[0.75rem] text-textmuted"><i class="ri-time-line align-middle me-1 inline-block"></i>4 hrs ago</span>
    </div>
    </div>
    </li>
    <li class="ti-list-group-item">
    <div class="flex items-center">
    <div class="me-2">
    <span class="avatar avatar-md !rounded-full">
    <img src="https://laravelui.spruko.com/tailwind/valex/build/assets/images/faces/1.jpg" alt="" class="!rounded-full">
    </span>
    </div>
    <div class="flex-grow">
    <p class="font-semibold mb-0">Brenda New product launching<span class="badge bg-light text-textmuted ltr:float-right rtl:float-left">1 Jan 2024</span></p>
    <span class="text-[0.75rem] text-textmuted"><i class="ri-time-line align-middle me-1 inline-block"></i>7 hrs ago</span>
    </div>
    </div>
    </li>
    <li class="ti-list-group-item">
    <div class="flex items-center">
    <div class="me-2">
    <span class="avatar avatar-md bg-secondary !rounded-full">
    M
    </span>
    </div>
    <div class="flex-grow">
    <p class="font-semibold mb-0">Medeleine Hey! there i'm available<span class="badge bg-light text-textmuted ltr:float-right rtl:float-left">5 Jan 2024</span></p>
    <span class="text-[0.75rem] text-textmuted"><i class="ri-time-line align-middle me-1 inline-block"></i>3 hrs ago</span>
    </div>
    </div>
    </li>
    <li class="ti-list-group-item">
    <div class="flex items-center">
    <div class="me-2">
    <span class="avatar avatar-md bg-info !rounded-full">
    OL
    </span>
    </div>
    <div class="flex-grow">
    <p class="font-semibold mb-0">Olivia New schedule release<span class="badge bg-light text-textmuted ltr:float-right rtl:float-left">6 Jan 2024</span></p>
    <span class="text-[0.75rem] text-textmuted"><i class="ri-time-line align-middle me-1 inline-block"></i>45 mins ago</span>
    </div>
    </div>
    </li>
    <li class="ti-list-group-item">
    <div class="flex items-center">
    <div class="me-2">
    <span class="avatar avatar-md bg-warning !rounded-full">
    A
    </span>
    </div>
    <div class="flex-grow">
    <p class="font-semibold mb-0">Kamala Preparing for new admin launch<span class="badge bg-light text-textmuted ltr:float-right rtl:float-left">7 Jan 2024</span></p>
    <span class="text-[0.75rem] text-textmuted"><i class="ri-time-line align-middle me-1 inline-block"></i>28 mins ago</span>
    </div>
    </div>
    </li>
    <li class="ti-list-group-item">
    <div class="flex items-center">
    <div class="me-2">
    <span class="avatar avatar-md !rounded-full">
    <img src="https://laravelui.spruko.com/tailwind/valex/build/assets/images/faces/6.jpg" alt="" class="!rounded-full">
    </span>
    </div>
    <div class="flex-grow">
    <p class="font-semibold mb-0">Oisha Meeting with clinet for dinner<span class="badge bg-light text-textmuted ltr:float-right rtl:float-left">10 Jan 2024</span></p>
    <span class="text-[0.75rem] text-textmuted"><i class="ri-time-line align-middle me-1 inline-block"></i>14 hrs ago</span>
    </div>
    </div>
    </li>
    <li class="ti-list-group-item">
    <div class="flex items-center">
    <div class="me-2">
    <span class="avatar avatar-md bg-danger !rounded-full">
    CH
    </span>
    </div>
    <div class="flex-grow">
    <p class="font-semibold mb-0">Prepare for the new project<span class="badge bg-light text-textmuted ltr:float-right rtl:float-left">3 Jan 2024</span></p>
    <span class="text-[0.75rem] text-textmuted"><i class="ri-time-line align-middle me-1 inline-block"></i>2 hrs ago</span>
    </div>
    </div>
    </li>
    <li class="ti-list-group-item">
    <div class="flex items-center">
    <div class="me-2">
    <span class="avatar avatar-md bg-info !rounded-full">
    S
    </span>
    </div>
    <div class="flex-grow">
    <p class="font-semibold mb-0">Decide the live discussion<span class="badge bg-light text-textmuted ltr:float-right rtl:float-left">17 Feb 2024</span></p>
    <span class="text-[0.75rem] text-textmuted"><i class="ri-time-line align-middle me-1 inline-block"></i>3 hrs ago</span>
    </div>
    </div>
    </li>
    <li class="ti-list-group-item">
    <div class="flex items-center">
    <div class="me-2">
    <span class="avatar avatar-md !rounded-full">
    <img src="https://laravelui.spruko.com/tailwind/valex/build/assets/images/faces/14.jpg" alt="" class="!rounded-full">
    </span>
    </div>
    <div class="flex-grow">
    <p class="font-semibold mb-0">Meeting at 3:00 pm<span class="badge bg-light text-textmuted ltr:float-right rtl:float-left">29 Dec 2022</span></p>
    <span class="text-[0.75rem] text-textmuted"><i class="ri-time-line align-middle me-1 inline-block"></i>4 hrs ago</span>
    </div>
    </div>
    </li>
    <li class="ti-list-group-item">
    <div class="flex items-center">
    <div class="me-2">
    <span class="avatar avatar-md bg-success !rounded-full">
    RC
    </span>
    </div>
    <div class="flex-grow">
    <p class="font-semibold mb-0">Prepare for presentation<span class="badge bg-light text-textmuted ltr:float-right rtl:float-left">31 Dec 2022</span></p>
    <span class="text-[0.75rem] text-textmuted"><i class="ri-time-line align-middle me-1 inline-block"></i>4 hrs ago</span>
    </div>
    </div>
    </li>
    </ul>
    </div>
    </div>
    </div>

Placement


    <button type="button" class="ti-btn ti-btn-primary-full" data-hs-overlay="#hs-overlay-top">
    Toggle top offcanvas
    </button>


    <div id="hs-overlay-top" class="hs-overlay hidden ti-offcanvas ti-offcanvas-top !z-[105]" tabindex="-1">
    <div class="ti-offcanvas-header">
    <h5 class="ti-offcanvas-title">
    Offcanvas top
    </h5>
    <button type="button" class="ti-btn flex-shrink-0 p-0 transition-none text-gray-500 hover:text-gray-700 focus:ring-gray-400 focus:ring-offset-white dark:text-textmuted dark:hover:text-white/80 dark:focus:ring-white/10 dark:focus:ring-offset-white/10" data-hs-overlay="#hs-overlay-top">
    <span class="sr-only">Close modal</span>
    <svg class="w-3.5 h-3.5" width="8" height="8" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
    <path d="M0.258206 1.00652C0.351976 0.912791 0.479126 0.860131 0.611706 0.860131C0.744296 0.860131 0.871447 0.912791 0.965207 1.00652L3.61171 3.65302L6.25822 1.00652C6.30432 0.958771 6.35952 0.920671 6.42052 0.894471C6.48152 0.868271 6.54712 0.854471 6.61352 0.853901C6.67992 0.853321 6.74572 0.865971 6.80722 0.891111C6.86862 0.916251 6.92442 0.953381 6.97142 1.00032C7.01832 1.04727 7.05552 1.1031 7.08062 1.16454C7.10572 1.22599 7.11842 1.29183 7.11782 1.35822C7.11722 1.42461 7.10342 1.49022 7.07722 1.55122C7.05102 1.61222 7.01292 1.6674 6.96522 1.71352L4.31871 4.36002L6.96522 7.00648C7.05632 7.10078 7.10672 7.22708 7.10552 7.35818C7.10442 7.48928 7.05182 7.61468 6.95912 7.70738C6.86642 7.80018 6.74102 7.85268 6.60992 7.85388C6.47882 7.85498 6.35252 7.80458 6.25822 7.71348L3.61171 5.06702L0.965207 7.71348C0.870907 7.80458 0.744606 7.85498 0.613506 7.85388C0.482406 7.85268 0.357007 7.80018 0.264297 7.70738C0.171597 7.61468 0.119017 7.48928 0.117877 7.35818C0.116737 7.22708 0.167126 7.10078 0.258206 7.00648L2.90471 4.36002L0.258206 1.71352C0.164476 1.61976 0.111816 1.4926 0.111816 1.36002C0.111816 1.22744 0.164476 1.10028 0.258206 1.00652Z" fill="currentColor"/>
    </svg>
    </button>
    </div>
    <div class="ti-offcanvas-body !h-[90%]">
    <p class="text-gray-800 dark:text-textmuted ps-4">
    ...
    </p>
    </div>
    </div>
    <button type="button" class="ti-btn ti-btn-primary-full" data-hs-overlay="#hs-overlay-right">
    Toggle right offcanvas
    </button>
    <div id="hs-overlay-right" class="hs-overlay hidden ti-offcanvas ti-offcanvas-right" tabindex="-1">
    <div class="ti-offcanvas-header">
    <h5 class="ti-offcanvas-title">
    Notifications
    </h5>
    <button type="button" class="ti-btn flex-shrink-0 p-0 transition-none text-gray-500 hover:text-gray-700 focus:ring-gray-400 focus:ring-offset-white dark:text-textmuted dark:hover:text-white/80 dark:focus:ring-white/10 dark:focus:ring-offset-white/10" data-hs-overlay="#hs-overlay-right">
    <span class="sr-only">Close modal</span>
    <svg class="w-3.5 h-3.5" width="8" height="8" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
    <path d="M0.258206 1.00652C0.351976 0.912791 0.479126 0.860131 0.611706 0.860131C0.744296 0.860131 0.871447 0.912791 0.965207 1.00652L3.61171 3.65302L6.25822 1.00652C6.30432 0.958771 6.35952 0.920671 6.42052 0.894471C6.48152 0.868271 6.54712 0.854471 6.61352 0.853901C6.67992 0.853321 6.74572 0.865971 6.80722 0.891111C6.86862 0.916251 6.92442 0.953381 6.97142 1.00032C7.01832 1.04727 7.05552 1.1031 7.08062 1.16454C7.10572 1.22599 7.11842 1.29183 7.11782 1.35822C7.11722 1.42461 7.10342 1.49022 7.07722 1.55122C7.05102 1.61222 7.01292 1.6674 6.96522 1.71352L4.31871 4.36002L6.96522 7.00648C7.05632 7.10078 7.10672 7.22708 7.10552 7.35818C7.10442 7.48928 7.05182 7.61468 6.95912 7.70738C6.86642 7.80018 6.74102 7.85268 6.60992 7.85388C6.47882 7.85498 6.35252 7.80458 6.25822 7.71348L3.61171 5.06702L0.965207 7.71348C0.870907 7.80458 0.744606 7.85498 0.613506 7.85388C0.482406 7.85268 0.357007 7.80018 0.264297 7.70738C0.171597 7.61468 0.119017 7.48928 0.117877 7.35818C0.116737 7.22708 0.167126 7.10078 0.258206 7.00648L2.90471 4.36002L0.258206 1.71352C0.164476 1.61976 0.111816 1.4926 0.111816 1.36002C0.111816 1.22744 0.164476 1.10028 0.258206 1.00652Z" fill="currentColor"></path>
    </svg>
    </button>
    </div>
    <div class="ti-offcanvas-body !h-[90%] !p-0">
    <div>
    <ul class="ti-list-group ti-list-group-flush mb-0">
    <li class="ti-list-group-item !border-t-0">
    <div class="flex items-center">
    <div class="me-2">
    <span class="avatar avatar-md bg-primary !rounded-full">
    NW
    </span>
    </div>
    <div class="flex-grow">
    <p class="font-semibold mb-0">New Website Created<span class="badge bg-light text-textmuted ltr:float-right rtl:float-left">20 Nov 2022</span></p>
    <span class="text-[0.75rem] text-textmuted"><i class="ri-time-line align-middle me-1 inline-block"></i>30 mins ago</span>
    </div>
    </div>
    </li>
    <li class="ti-list-group-item">
    <div class="flex items-center">
    <div class="me-2">
    <span class="avatar avatar-md bg-danger !rounded-full">
    CH
    </span>
    </div>
    <div class="flex-grow">
    <p class="font-semibold mb-0">Prepare for the new project<span class="badge bg-light text-textmuted ltr:float-right rtl:float-left">3 Jan 2024</span></p>
    <span class="text-[0.75rem] text-textmuted"><i class="ri-time-line align-middle me-1 inline-block"></i>2 hrs ago</span>
    </div>
    </div>
    </li>
    <li class="ti-list-group-item">
    <div class="flex items-center">
    <div class="me-2">
    <span class="avatar avatar-md bg-info !rounded-full">
    S
    </span>
    </div>
    <div class="flex-grow">
    <p class="font-semibold mb-0">Decide the live discussion<span class="badge bg-light text-textmuted ltr:float-right rtl:float-left">17 Feb 2024</span></p>
    <span class="text-[0.75rem] text-textmuted"><i class="ri-time-line align-middle me-1 inline-block"></i>3 hrs ago</span>
    </div>
    </div>
    </li>
    <li class="ti-list-group-item">
    <div class="flex items-center">
    <div class="me-2">
    <span class="avatar avatar-md !rounded-full">
    <img src="https://laravelui.spruko.com/tailwind/valex/build/assets/images/faces/12.jpg" alt="" class="!rounded-full">
    </span>
    </div>
    <div class="flex-grow">
    <p class="font-semibold mb-0">Meeting at 3:00 pm<span class="badge bg-light text-textmuted ltr:float-right rtl:float-left">29 Dec 2022</span></p>
    <span class="text-[0.75rem] text-textmuted"><i class="ri-time-line align-middle me-1 inline-block"></i>4 hrs ago</span>
    </div>
    </div>
    </li>
    <li class="ti-list-group-item">
    <div class="flex items-center">
    <div class="me-2">
    <span class="avatar avatar-md bg-success !rounded-full">
    RC
    </span>
    </div>
    <div class="flex-grow">
    <p class="font-semibold mb-0">Prepare for presentation<span class="badge bg-light text-textmuted ltr:float-right rtl:float-left">31 Dec 2022</span></p>
    <span class="text-[0.75rem] text-textmuted"><i class="ri-time-line align-middle me-1 inline-block"></i>4 hrs ago</span>
    </div>
    </div>
    </li>
    <li class="ti-list-group-item">
    <div class="flex items-center">
    <div class="me-2">
    <span class="avatar avatar-md !rounded-full">
    <img src="https://laravelui.spruko.com/tailwind/valex/build/assets/images/faces/1.jpg" alt="" class="!rounded-full">
    </span>
    </div>
    <div class="flex-grow">
    <p class="font-semibold mb-0">Brenda New product launching<span class="badge bg-light text-textmuted ltr:float-right rtl:float-left">1 Jan 2024</span></p>
    <span class="text-[0.75rem] text-textmuted"><i class="ri-time-line align-middle me-1 inline-block"></i>7 hrs ago</span>
    </div>
    </div>
    </li>
    <li class="ti-list-group-item">
    <div class="flex items-center">
    <div class="me-2">
    <span class="avatar avatar-md bg-secondary !rounded-full">
    M
    </span>
    </div>
    <div class="flex-grow">
    <p class="font-semibold mb-0">Medeleine Hey! there i'm available<span class="badge bg-light text-textmuted ltr:float-right rtl:float-left">5 Jan 2024</span></p>
    <span class="text-[0.75rem] text-textmuted"><i class="ri-time-line align-middle me-1 inline-block"></i>3 hrs ago</span>
    </div>
    </div>
    </li>
    <li class="ti-list-group-item">
    <div class="flex items-center">
    <div class="me-2">
    <span class="avatar avatar-md bg-info !rounded-full">
    OL
    </span>
    </div>
    <div class="flex-grow">
    <p class="font-semibold mb-0">Olivia New schedule release<span class="badge bg-light text-textmuted ltr:float-right rtl:float-left">6 Jan 2024</span></p>
    <span class="text-[0.75rem] text-textmuted"><i class="ri-time-line align-middle me-1 inline-block"></i>45 mins ago</span>
    </div>
    </div>
    </li>
    <li class="ti-list-group-item">
    <div class="flex items-center">
    <div class="me-2">
    <span class="avatar avatar-md bg-warning !rounded-full">
    A
    </span>
    </div>
    <div class="flex-grow">
    <p class="font-semibold mb-0">Kamala Preparing for new admin launch<span class="badge bg-light text-textmuted ltr:float-right rtl:float-left">7 Jan 2024</span></p>
    <span class="text-[0.75rem] text-textmuted"><i class="ri-time-line align-middle me-1 inline-block"></i>28 mins ago</span>
    </div>
    </div>
    </li>
    <li class="ti-list-group-item">
    <div class="flex items-center">
    <div class="me-2">
    <span class="avatar avatar-md !rounded-full">
    <img src="https://laravelui.spruko.com/tailwind/valex/build/assets/images/faces/6.jpg" alt="" class="!rounded-full">
    </span>
    </div>
    <div class="flex-grow">
    <p class="font-semibold mb-0">Oisha Meeting with clinet for dinner<span class="badge bg-light text-textmuted ltr:float-right rtl:float-left">10 Jan 2024</span></p>
    <span class="text-[0.75rem] text-textmuted"><i class="ri-time-line align-middle me-1 inline-block"></i>14 hrs ago</span>
    </div>
    </div>
    </li>
    <li class="ti-list-group-item">
    <div class="flex items-center">
    <div class="me-2">
    <span class="avatar avatar-md bg-danger !rounded-full">
    CH
    </span>
    </div>
    <div class="flex-grow">
    <p class="font-semibold mb-0">Prepare for the new project<span class="badge bg-light text-textmuted ltr:float-right rtl:float-left">3 Jan 2024</span></p>
    <span class="text-[0.75rem] text-textmuted"><i class="ri-time-line align-middle me-1 inline-block"></i>2 hrs ago</span>
    </div>
    </div>
    </li>
    <li class="ti-list-group-item">
    <div class="flex items-center">
    <div class="me-2">
    <span class="avatar avatar-md bg-info !rounded-full">
    S
    </span>
    </div>
    <div class="flex-grow">
    <p class="font-semibold mb-0">Decide the live discussion<span class="badge bg-light text-textmuted ltr:float-right rtl:float-left">17 Feb 2024</span></p>
    <span class="text-[0.75rem] text-textmuted"><i class="ri-time-line align-middle me-1 inline-block"></i>3 hrs ago</span>
    </div>
    </div>
    </li>
    <li class="ti-list-group-item">
    <div class="flex items-center">
    <div class="me-2">
    <span class="avatar avatar-md !rounded-full">
    <img src="https://laravelui.spruko.com/tailwind/valex/build/assets/images/faces/14.jpg" alt="" class="!rounded-full">
    </span>
    </div>
    <div class="flex-grow">
    <p class="font-semibold mb-0">Meeting at 3:00 pm<span class="badge bg-light text-textmuted ltr:float-right rtl:float-left">29 Dec 2022</span></p>
    <span class="text-[0.75rem] text-textmuted"><i class="ri-time-line align-middle me-1 inline-block"></i>4 hrs ago</span>
    </div>
    </div>
    </li>
    <li class="ti-list-group-item">
    <div class="flex items-center">
    <div class="me-2">
    <span class="avatar avatar-md bg-success !rounded-full">
    RC
    </span>
    </div>
    <div class="flex-grow">
    <p class="font-semibold mb-0">Prepare for presentation<span class="badge bg-light text-textmuted ltr:float-right rtl:float-left">31 Dec 2022</span></p>
    <span class="text-[0.75rem] text-textmuted"><i class="ri-time-line align-middle me-1 inline-block"></i>4 hrs ago</span>
    </div>
    </div>
    </li>
    </ul>
    </div>
    </div>
    </div>
    <button type="button" class="ti-btn ti-btn-primary-full" data-hs-overlay="#hs-overlay-bottom">
    Toggle bottom offcanvas
    </button>

    <div id="hs-overlay-bottom" class="hs-overlay hidden ti-offcanvas ti-offcanvas-bottom !z-[105]" tabindex="-1">
    <div class="ti-offcanvas-header">
    <h5 class="ti-offcanvas-title">
    Offcanvas title
    </h5>
    <button type="button" class="ti-btn flex-shrink-0 p-0 transition-none text-gray-500 hover:text-gray-700 focus:ring-gray-400 focus:ring-offset-white dark:text-textmuted dark:hover:text-white/80 dark:focus:ring-white/10 dark:focus:ring-offset-white/10" data-hs-overlay="#hs-overlay-bottom">
    <span class="sr-only">Close modal</span>
    <svg class="w-3.5 h-3.5" width="8" height="8" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
    <path d="M0.258206 1.00652C0.351976 0.912791 0.479126 0.860131 0.611706 0.860131C0.744296 0.860131 0.871447 0.912791 0.965207 1.00652L3.61171 3.65302L6.25822 1.00652C6.30432 0.958771 6.35952 0.920671 6.42052 0.894471C6.48152 0.868271 6.54712 0.854471 6.61352 0.853901C6.67992 0.853321 6.74572 0.865971 6.80722 0.891111C6.86862 0.916251 6.92442 0.953381 6.97142 1.00032C7.01832 1.04727 7.05552 1.1031 7.08062 1.16454C7.10572 1.22599 7.11842 1.29183 7.11782 1.35822C7.11722 1.42461 7.10342 1.49022 7.07722 1.55122C7.05102 1.61222 7.01292 1.6674 6.96522 1.71352L4.31871 4.36002L6.96522 7.00648C7.05632 7.10078 7.10672 7.22708 7.10552 7.35818C7.10442 7.48928 7.05182 7.61468 6.95912 7.70738C6.86642 7.80018 6.74102 7.85268 6.60992 7.85388C6.47882 7.85498 6.35252 7.80458 6.25822 7.71348L3.61171 5.06702L0.965207 7.71348C0.870907 7.80458 0.744606 7.85498 0.613506 7.85388C0.482406 7.85268 0.357007 7.80018 0.264297 7.70738C0.171597 7.61468 0.119017 7.48928 0.117877 7.35818C0.116737 7.22708 0.167126 7.10078 0.258206 7.00648L2.90471 4.36002L0.258206 1.71352C0.164476 1.61976 0.111816 1.4926 0.111816 1.36002C0.111816 1.22744 0.164476 1.10028 0.258206 1.00652Z" fill="currentColor"/>
    </svg>
    </button>
    </div>
    <div class="ti-offcanvas-body !h-[90%]">
    <p class="text-gray-800 dark:text-textmuted ps-4">
    ...
    </p>
    </div>
    </div>

Custom backdrop color Offcanvas


    <button type="button" class="m-1 ms-0 ti-btn ti-btn-primary-full" data-hs-overlay="#hs-overlay-backdrop-with-scrolling">
    Enable both scrolling & backdrop
    </button>

    <div id="hs-overlay-backdrop-with-scrolling" class="hs-overlay ti-offcanvas ti-offcanvas-left hidden !z-[105] [--body-scroll:true]" tabindex="-1" data-hs-overlay-scroll="true">
    <div class="ti-offcanvas-header">
    <h6 class="ti-offcanvas-title">
    Notifications
    </h6>
    <button type="button" class="ti-btn flex-shrink-0 p-0 transition-none text-gray-500 hover:text-gray-700 focus:ring-gray-400 focus:ring-offset-white dark:text-textmuted dark:hover:text-white/80 dark:focus:ring-white/10 dark:focus:ring-offset-white/10" data-hs-overlay="#hs-overlay-backdrop-with-scrolling">
    <span class="sr-only">Close modal</span>
    <svg class="w-3.5 h-3.5" width="8" height="8" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
    <path d="M0.258206 1.00652C0.351976 0.912791 0.479126 0.860131 0.611706 0.860131C0.744296 0.860131 0.871447 0.912791 0.965207 1.00652L3.61171 3.65302L6.25822 1.00652C6.30432 0.958771 6.35952 0.920671 6.42052 0.894471C6.48152 0.868271 6.54712 0.854471 6.61352 0.853901C6.67992 0.853321 6.74572 0.865971 6.80722 0.891111C6.86862 0.916251 6.92442 0.953381 6.97142 1.00032C7.01832 1.04727 7.05552 1.1031 7.08062 1.16454C7.10572 1.22599 7.11842 1.29183 7.11782 1.35822C7.11722 1.42461 7.10342 1.49022 7.07722 1.55122C7.05102 1.61222 7.01292 1.6674 6.96522 1.71352L4.31871 4.36002L6.96522 7.00648C7.05632 7.10078 7.10672 7.22708 7.10552 7.35818C7.10442 7.48928 7.05182 7.61468 6.95912 7.70738C6.86642 7.80018 6.74102 7.85268 6.60992 7.85388C6.47882 7.85498 6.35252 7.80458 6.25822 7.71348L3.61171 5.06702L0.965207 7.71348C0.870907 7.80458 0.744606 7.85498 0.613506 7.85388C0.482406 7.85268 0.357007 7.80018 0.264297 7.70738C0.171597 7.61468 0.119017 7.48928 0.117877 7.35818C0.116737 7.22708 0.167126 7.10078 0.258206 7.00648L2.90471 4.36002L0.258206 1.71352C0.164476 1.61976 0.111816 1.4926 0.111816 1.36002C0.111816 1.22744 0.164476 1.10028 0.258206 1.00652Z" fill="currentColor"></path>
    </svg>
    </button>
    </div>
    <div class="ti-offcanvas-body !h-[90%] !p-0">
    <div>
    <ul class="ti-list-group ti-list-group-flush mb-0">
    <li class="ti-list-group-item !border-t-0">
    <div class="flex items-center">
    <div class="me-2">
    <span class="avatar avatar-md bg-primary !rounded-full">
    NW
    </span>
    </div>
    <div class="flex-grow">
    <p class="font-semibold mb-0">New Website Created<span class="badge bg-light text-textmuted ltr:float-right rtl:float-left">20 Nov 2022</span></p>
    <span class="text-[0.75rem] text-textmuted"><i class="ri-time-line align-middle me-1 inline-block"></i>30 mins ago</span>
    </div>
    </div>
    </li>
    <li class="ti-list-group-item">
    <div class="flex items-center">
    <div class="me-2">
    <span class="avatar avatar-md bg-danger !rounded-full">
    CH
    </span>
    </div>
    <div class="flex-grow">
    <p class="font-semibold mb-0">Prepare for the new project<span class="badge bg-light text-textmuted ltr:float-right rtl:float-left">3 Jan 2024</span></p>
    <span class="text-[0.75rem] text-textmuted"><i class="ri-time-line align-middle me-1 inline-block"></i>2 hrs ago</span>
    </div>
    </div>
    </li>
    <li class="ti-list-group-item">
    <div class="flex items-center">
    <div class="me-2">
    <span class="avatar avatar-md bg-info !rounded-full">
    S
    </span>
    </div>
    <div class="flex-grow">
    <p class="font-semibold mb-0">Decide the live discussion<span class="badge bg-light text-textmuted ltr:float-right rtl:float-left">17 Feb 2024</span></p>
    <span class="text-[0.75rem] text-textmuted"><i class="ri-time-line align-middle me-1 inline-block"></i>3 hrs ago</span>
    </div>
    </div>
    </li>
    <li class="ti-list-group-item">
    <div class="flex items-center">
    <div class="me-2">
    <span class="avatar avatar-md !rounded-full">
    <img src="https://laravelui.spruko.com/tailwind/valex/build/assets/images/faces/12.jpg" alt="" class="!rounded-full">
    </span>
    </div>
    <div class="flex-grow">
    <p class="font-semibold mb-0">Meeting at 3:00 pm<span class="badge bg-light text-textmuted ltr:float-right rtl:float-left">29 Dec 2022</span></p>
    <span class="text-[0.75rem] text-textmuted"><i class="ri-time-line align-middle me-1 inline-block"></i>4 hrs ago</span>
    </div>
    </div>
    </li>
    <li class="ti-list-group-item">
    <div class="flex items-center">
    <div class="me-2">
    <span class="avatar avatar-md bg-success !rounded-full">
    RC
    </span>
    </div>
    <div class="flex-grow">
    <p class="font-semibold mb-0">Prepare for presentation<span class="badge bg-light text-textmuted ltr:float-right rtl:float-left">31 Dec 2022</span></p>
    <span class="text-[0.75rem] text-textmuted"><i class="ri-time-line align-middle me-1 inline-block"></i>4 hrs ago</span>
    </div>
    </div>
    </li>
    <li class="ti-list-group-item">
    <div class="flex items-center">
    <div class="me-2">
    <span class="avatar avatar-md !rounded-full">
    <img src="https://laravelui.spruko.com/tailwind/valex/build/assets/images/faces/1.jpg" alt="" class="!rounded-full">
    </span>
    </div>
    <div class="flex-grow">
    <p class="font-semibold mb-0">Brenda New product launching<span class="badge bg-light text-textmuted ltr:float-right rtl:float-left">1 Jan 2024</span></p>
    <span class="text-[0.75rem] text-textmuted"><i class="ri-time-line align-middle me-1 inline-block"></i>7 hrs ago</span>
    </div>
    </div>
    </li>
    <li class="ti-list-group-item">
    <div class="flex items-center">
    <div class="me-2">
    <span class="avatar avatar-md bg-secondary !rounded-full">
    M
    </span>
    </div>
    <div class="flex-grow">
    <p class="font-semibold mb-0">Medeleine Hey! there i'm available<span class="badge bg-light text-textmuted ltr:float-right rtl:float-left">5 Jan 2024</span></p>
    <span class="text-[0.75rem] text-textmuted"><i class="ri-time-line align-middle me-1 inline-block"></i>3 hrs ago</span>
    </div>
    </div>
    </li>
    <li class="ti-list-group-item">
    <div class="flex items-center">
    <div class="me-2">
    <span class="avatar avatar-md bg-info !rounded-full">
    OL
    </span>
    </div>
    <div class="flex-grow">
    <p class="font-semibold mb-0">Olivia New schedule release<span class="badge bg-light text-textmuted ltr:float-right rtl:float-left">6 Jan 2024</span></p>
    <span class="text-[0.75rem] text-textmuted"><i class="ri-time-line align-middle me-1 inline-block"></i>45 mins ago</span>
    </div>
    </div>
    </li>
    <li class="ti-list-group-item">
    <div class="flex items-center">
    <div class="me-2">
    <span class="avatar avatar-md bg-warning !rounded-full">
    A
    </span>
    </div>
    <div class="flex-grow">
    <p class="font-semibold mb-0">Kamala Preparing for new admin launch<span class="badge bg-light text-textmuted ltr:float-right rtl:float-left">7 Jan 2024</span></p>
    <span class="text-[0.75rem] text-textmuted"><i class="ri-time-line align-middle me-1 inline-block"></i>28 mins ago</span>
    </div>
    </div>
    </li>
    <li class="ti-list-group-item">
    <div class="flex items-center">
    <div class="me-2">
    <span class="avatar avatar-md !rounded-full">
    <img src="https://laravelui.spruko.com/tailwind/valex/build/assets/images/faces/6.jpg" alt="" class="!rounded-full">
    </span>
    </div>
    <div class="flex-grow">
    <p class="font-semibold mb-0">Oisha Meeting with clinet for dinner<span class="badge bg-light text-textmuted ltr:float-right rtl:float-left">10 Jan 2024</span></p>
    <span class="text-[0.75rem] text-textmuted"><i class="ri-time-line align-middle me-1 inline-block"></i>14 hrs ago</span>
    </div>
    </div>
    </li>
    <li class="ti-list-group-item">
    <div class="flex items-center">
    <div class="me-2">
    <span class="avatar avatar-md bg-danger !rounded-full">
    CH
    </span>
    </div>
    <div class="flex-grow">
    <p class="font-semibold mb-0">Prepare for the new project<span class="badge bg-light text-textmuted ltr:float-right rtl:float-left">3 Jan 2024</span></p>
    <span class="text-[0.75rem] text-textmuted"><i class="ri-time-line align-middle me-1 inline-block"></i>2 hrs ago</span>
    </div>
    </div>
    </li>
    <li class="ti-list-group-item">
    <div class="flex items-center">
    <div class="me-2">
    <span class="avatar avatar-md bg-info !rounded-full">
    S
    </span>
    </div>
    <div class="flex-grow">
    <p class="font-semibold mb-0">Decide the live discussion<span class="badge bg-light text-textmuted ltr:float-right rtl:float-left">17 Feb 2024</span></p>
    <span class="text-[0.75rem] text-textmuted"><i class="ri-time-line align-middle me-1 inline-block"></i>3 hrs ago</span>
    </div>
    </div>
    </li>
    <li class="ti-list-group-item">
    <div class="flex items-center">
    <div class="me-2">
    <span class="avatar avatar-md !rounded-full">
    <img src="https://laravelui.spruko.com/tailwind/valex/build/assets/images/faces/14.jpg" alt="" class="!rounded-full">
    </span>
    </div>
    <div class="flex-grow">
    <p class="font-semibold mb-0">Meeting at 3:00 pm<span class="badge bg-light text-textmuted ltr:float-right rtl:float-left">29 Dec 2022</span></p>
    <span class="text-[0.75rem] text-textmuted"><i class="ri-time-line align-middle me-1 inline-block"></i>4 hrs ago</span>
    </div>
    </div>
    </li>
    <li class="ti-list-group-item">
    <div class="flex items-center">
    <div class="me-2">
    <span class="avatar avatar-md bg-success !rounded-full">
    RC
    </span>
    </div>
    <div class="flex-grow">
    <p class="font-semibold mb-0">Prepare for presentation<span class="badge bg-light text-textmuted ltr:float-right rtl:float-left">31 Dec 2022</span></p>
    <span class="text-[0.75rem] text-textmuted"><i class="ri-time-line align-middle me-1 inline-block"></i>4 hrs ago</span>
    </div>
    </div>
    </li>
    </ul>
    </div>
    </div>
    </div>

Switcher

Petey Cruiser

Jimmy Changa

Graham Cracker

Donatella Nobatti

Anne Fibbiyon

New files available

Updates Available

New Order Received

New review received

22 verified registrations

Project has been approved

Petey Cruiser

Notifications

Daneil Scott

Valex Video call

Daneil Scott

Calling...

Valex Voice call

Daneil Scott

Calling...

Offcanvas

Notifications

Notifications

Notifications

Notifications

Offcanvas top

Notifications

Offcanvas title

Notifications