Horizon UI Dashboard Components

<div data-type="div" className="flex flex-col justify-center items-center h-[100vh] w-full draggable">
        <div data-type="div" className="relative flex flex-col items-center rounded-[20px] w-full mx-auto bg-white bg-clip-border shadow-3xl shadow-shadow-500 dark:!bg-navy-800 dark:text-white dark:!shadow-none p-5 pb-8 transition duration-200 linear">
          <div data-type="div" className="relative mb-3 flex items-center justify-between w-full pt-1>
            <h4 data-type="h4" className="text-xl font-bold text-navy-700 dark:text-white">
              Notifications
            </h4> 
            <button data-type="button" className="flex items-center text-xl hover:cursor-pointer bg-lightPrimary p-2 text-brand-500 hover:bg-gray-100 dark:bg-navy-700 dark:text-white dark:hover:bg-white/20 dark:active:bg-white/10 rounded-lg">
              <svg data-type="svg" stroke="currentColor" fill="currentColor" strokeWidth={0} viewBox="0 0 16 16" className="h-6 w-6" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"<path data-type='path' d="M3 9.5a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zm5 0a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zm5 0a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3z" /></svg>
            </button>
          </div>
          <div data-type="div" className="flex flex-col w-full"> 
            <div data-type="div" className="mt-3 flex items-center gap-3"> 
              <input data-type="input" type="checkbox" className="relative h-5 w-10 appearance-none rounded-[20px] bg-[#e0e5f2] outline-none transition duration-[0.5s] 
                    before:absolute before:top-[50%] before:h-4 before:w-4 before:translate-x-[2px] before:translate-y-[-50%] before:rounded-[20px]
                    before:bg-white before:shadow-[0_2px_5px_rgba(0,_0,_0,_.2)] before:transition before:content-[&quot;&quot;]
                    checked:before:translate-x-[22px] hover:cursor-pointer checked:bg-brand-500 dark:checked:bg-brand-400" name="weekly" id="checkbox1" />
              <label data-type="label" htmlFor="checkbox1" className="text-base font-medium text-navy-700 dark:text-white">
                Item comment notifications
              </label>
            </div>
            <div data-type="div" className="mt-4 flex items-center gap-3">
              <input data-type="input" type="checkbox" className="relative h-5 w-10 appearance-none rounded-[20px] bg-[#e0e5f2] outline-none transition duration-[0.5s] 
                    before:absolute before:top-[50%] before:h-4 before:w-4 before:translate-x-[2px] before:translate-y-[-50%] before:rounded-[20px]
                    before:bg-white before:shadow-[0_2px_5px_rgba(0,_0,_0,_.2)] before:transition before:content-[&quot;&quot;]
                    checked:before:translate-x-[22px] hover:cursor-pointer checked:bg-brand-500 dark:checked:bg-brand-400" name="weekly" id="checkbox2" />
              <label data-type="label" htmlFor="checkbox2" className="text-base font-medium text-navy-700 dark:text-white">
                Buyer review notifications
              </label>
            </div>
            <div data-type="div" className="mt-4 flex items-center gap-3">
              <input data-type="input" type="checkbox" className="relative h-5 w-10 appearance-none rounded-[20px] bg-[#e0e5f2] outline-none transition duration-[0.5s] 
                    before:absolute before:top-[50%] before:h-4 before:w-4 before:translate-x-[2px] before:translate-y-[-50%] before:rounded-[20px]
                    before:bg-white before:shadow-[0_2px_5px_rgba(0,_0,_0,_.2)] before:transition before:content-[&quot;&quot;]
                    checked:before:translate-x-[22px] hover:cursor-pointer checked:bg-brand-500 dark:checked:bg-brand-400" name="weekly" id="checkbox3" />
              <label data-type="label" htmlFor="checkbox3" className="text-base font-medium text-navy-700 dark:text-white">
                Rating reminders notifications
              </label>
            </div>
            <div data-type="div" className="mt-4 flex items-center gap-3">
              <input data-type="input" type="checkbox" className="relative h-5 w-10 appearance-none rounded-[20px] bg-[#e0e5f2] outline-none transition duration-[0.5s] 
                    before:absolute before:top-[50%] before:h-4 before:w-4 before:translate-x-[2px] before:translate-y-[-50%] before:rounded-[20px]
                    before:bg-white before:shadow-[0_2px_5px_rgba(0,_0,_0,_.2)] before:transition before:content-[&quot;&quot;]
                    checked:before:translate-x-[22px] hover:cursor-pointer checked:bg-brand-500 dark:checked:bg-brand-400" name="weekly" id="checkbox4" />
              <label data-type="label" htmlFor="checkbox4" className="text-base font-medium text-navy-700 dark:text-white">
                Meetups near you notifications
              </label>
            </div>
            <div data-type="div" className="mt-4 flex items-center gap-3">
              <input data-type="input" type="checkbox" className="relative h-5 w-10 appearance-none rounded-[20px] bg-[#e0e5f2] outline-none transition duration-[0.5s] 
                    before:absolute before:top-[50%] before:h-4 before:w-4 before:translate-x-[2px] before:translate-y-[-50%] before:rounded-[20px]
                    before:bg-white before:shadow-[0_2px_5px_rgba(0,_0,_0,_.2)] before:transition before:content-[&quot;&quot;]
                    checked:before:translate-x-[22px] hover:cursor-pointer checked:bg-brand-500 dark:checked:bg-brand-400" name="weekly" id="checkbox5" />
              <label data-type="label" htmlFor="checkbox5" className="text-base font-medium text-navy-700 dark:text-white">
                Company news notifications
              </label>
            </div>
            <div data-type="div" className="mt-4 flex items-center gap-3">
              <input data-type="input" type="checkbox" className="relative h-5 w-10 appearance-none rounded-[20px] bg-[#e0e5f2] outline-none transition duration-[0.5s] 
                    before:absolute before:top-[50%] before:h-4 before:w-4 before:translate-x-[2px] before:translate-y-[-50%] before:rounded-[20px]
                    before:bg-white before:shadow-[0_2px_5px_rgba(0,_0,_0,_.2)] before:transition before:content-[&quot;&quot;]
                    checked:before:translate-x-[22px] hover:cursor-pointer checked:bg-brand-500 dark:checked:bg-brand-400" name="weekly" id="checkbox6" />
              <label data-type="label" htmlFor="checkbox6" className="text-base font-medium text-navy-700 dark:text-white">
                New launches and projects
              </label>
            </div>
            <div data-type="div" className="mt-4 flex items-center gap-3">
              <input data-type="input" type="checkbox" className="relative h-5 w-10 appearance-none rounded-[20px] bg-[#e0e5f2] outline-none transition duration-[0.5s] 
                    before:absolute before:top-[50%] before:h-4 before:w-4 before:translate-x-[2px] before:translate-y-[-50%] before:rounded-[20px]
                    before:bg-white before:shadow-[0_2px_5px_rgba(0,_0,_0,_.2)] before:transition before:content-[&quot;&quot;]
                    checked:before:translate-x-[22px] hover:cursor-pointer checked:bg-brand-500 dark:checked:bg-brand-400" name="weekly" id="checkbox7" />
              <label data-type="label" htmlFor="checkbox7" className="text-base font-medium text-navy-700 dark:text-white">
                Monthly product changes
              </label>
            </div>
            <div data-type="div" className="mt-4 flex items-center gap-3">
              <input data-type="input" type="checkbox" className="relative h-5 w-10 appearance-none rounded-[20px] bg-[#e0e5f2] outline-none transition duration-[0.5s] 
                    before:absolute before:top-[50%] before:h-4 before:w-4 before:translate-x-[2px] before:translate-y-[-50%] before:rounded-[20px]
                    before:bg-white before:shadow-[0_2px_5px_rgba(0,_0,_0,_.2)] before:transition before:content-[&quot;&quot;]
                    checked:before:translate-x-[22px] hover:cursor-pointer checked:bg-brand-500 dark:checked:bg-brand-400" name="weekly" id="checkbox8" />
              <label data-type="label" htmlFor="checkbox8" className="text-base font-medium text-navy-700 dark:text-white">
                Subscribe to newsletter
              </label>
            </div>
            <div data-type="div" className="mt-4 flex items-center gap-3">
              <input data-type="input" type="checkbox" className="relative h-5 w-10 appearance-none rounded-[20px] bg-[#e0e5f2] outline-none transition duration-[0.5s] 
                    before:absolute before:top-[50%] before:h-4 before:w-4 before:translate-x-[2px] before:translate-y-[-50%] before:rounded-[20px]
                    before:bg-white before:shadow-[0_2px_5px_rgba(0,_0,_0,_.2)] before:transition before:content-[&quot;&quot;]
                    checked:before:translate-x-[22px] hover:cursor-pointer checked:bg-brand-500 dark:checked:bg-brand-400" name="weekly" id="checkbox8" />
              <label data-type="label" htmlFor="checkbox8" className="text-base font-medium text-navy-700 dark:text-white">
                Email me when someone follows me
              </label>
            </div>
          </div> 
        </div>
      </div>