<!-- Back to top button -->      <button        type="button"        data-twe-ripple-init        data-twe-ripple-color="light"        class="!fixed bottom-5 end-5 hidden rounded-full bg-red-600 p-3 text-xs font-medium uppercase leading-tight text-white shadow-md transition duration-150 ease-in-out hover:bg-red-700 hover:shadow-lg focus:bg-red-700 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-red-800 active:shadow-lg"        id="btn-back-to-top">        <span class="[&>svg]:w-4">          <svg            xmlns="http://www.w3.org/2000/svg"            fill="none"            viewBox="0 0 24 24"            stroke-width="3"            stroke="currentColor">            <path              stroke-linecap="round"              stroke-linejoin="round"              d="M4.5 10.5 12 3m0 0 7.5 7.5M12 3v18" />          </svg>        </span>      </button>      <!-- Explanation -->      <div        class="container mx-auto mt-4 text-center dark:text-white"        style="height: 2000px">        <p class="mb-4">          Start scrolling the page and a strong          <strong>"Back to top" button </strong> will appear in the          <strong>bottom right corner</strong> of the screen.        </p>        <p>Click this button and you will be taken to the top of the page.</p>      </div>

                  import {        Ripple,        initTWE,      } from "tw-elements";      initTWE({ Ripple });      // Get the button      const mybutton = document.getElementById("btn-back-to-top");      // When the user scrolls down 20px from the top of the document, show the button      const scrollFunction = () => {        if (          document.body.scrollTop > 20 ||          document.documentElement.scrollTop > 20        ) {          mybutton.classList.remove("hidden");        } else {          mybutton.classList.add("hidden");        }      };      const backToTop = () => {        window.scrollTo({ top: 0, behavior: "smooth" });      };      // When the user clicks on the button, scroll to the top of the document      mybutton.addEventListener("click", backToTop);      window.addEventListener("scroll", scrollFunction);

                   // Get the button      const mybutton = document.getElementById("btn-back-to-top");      // When the user scrolls down 20px from the top of the document, show the button      const scrollFunction = () => {        if (          document.body.scrollTop > 20 ||          document.documentElement.scrollTop > 20        ) {          mybutton.classList.remove("hidden");        } else {          mybutton.classList.add("hidden");        }      };      const backToTop = () => {        window.scrollTo({ top: 0, behavior: "smooth" });      };      // When the user clicks on the button, scroll to the top of the document      mybutton.addEventListener("click", backToTop);      window.addEventListener("scroll", scrollFunction);