<div id="tab-wrapper-1" class="tabs flex flex-col">
    <div class="is-scrollbar-hidden overflow-x-auto">
      <div class="tabs-list flex">
        <button
          class="tab btn shrink-0 rounded-none border-b-2 px-3 py-2 font-medium"
          data-active-class="border-primary dark:border-accent text-primary dark:text-accent-light"
          data-default-class="border-transparent hover:text-slate-800 focus:text-slate-800 dark:hover:text-navy-100 dark:focus:text-navy-100"
          data-target="#tab1-home"
        >
          Home
        </button>
        <button
          class="tab btn shrink-0 rounded-none border-b-2 px-3 py-2 font-medium"
          data-active-class="border-primary dark:border-accent text-primary dark:text-accent-light"
          data-default-class="border-transparent hover:text-slate-800 focus:text-slate-800 dark:hover:text-navy-100 dark:focus:text-navy-100"
          data-target="#tab1-profile"
        >
          Profile
        </button>

        <button
          class="tab btn shrink-0 rounded-none border-b-2 px-3 py-2 font-medium"
          data-active-class="border-primary dark:border-accent text-primary dark:text-accent-light"
          data-default-class="border-transparent hover:text-slate-800 focus:text-slate-800 dark:hover:text-navy-100 dark:focus:text-navy-100"
          data-target="#tab1-messages"
        >
          Messages
        </button>

        <button
          class="tab btn shrink-0 rounded-none border-b-2 px-3 py-2 font-medium"
          data-active-class="border-primary dark:border-accent text-primary dark:text-accent-light"
          data-default-class="border-transparent hover:text-slate-800 focus:text-slate-800 dark:hover:text-navy-100 dark:focus:text-navy-100"
          data-target="#tab1-settings"
        >
          Settings
        </button>
      </div>
    </div>
    <div class="pt-4">
      <div class="tab-content tab-shift-left" id="tab1-home">
        <div>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent
            elementum finibus arcu vitae scelerisque. Etiam rutrum blandit
            condimentum. Maecenas condimentum massa vitae quam interdum, et
            lacinia urna tempor
          </p>
          <div class="flex space-x-2 pt-3">
            <a
              href="#"
              class="tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light"
            >
              Tag 1
            </a>
            <a
              href="#"
              class="tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light"
            >
              Tag 2
            </a>
          </div>

          <p class="pt-3 text-xs text-slate-400 dark:text-navy-300">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore
            dolore non atque?
          </p>
        </div>
      </div>
      <div class="tab-content tab-shift-left" id="tab1-profile">
        <div>
          <p>
            Pellentesque pulvinar, sapien eget fermentum sodales, felis lacus
            viverra magna, id pulvinar odio metus non enim. Ut id augue
            interdum, ultrices felis eu, tincidunt libero.
          </p>
          <div class="flex space-x-2 pt-3">
            <a
              href="#"
              class="tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light"
            >
              Tag 1
            </a>
            <a
              href="#"
              class="tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light"
            >
              Tag 2
            </a>
          </div>

          <p class="pt-3 text-xs text-slate-400 dark:text-navy-300">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore
            dolore non atque?
          </p>
        </div>
      </div>
      <div class="tab-content tab-shift-left" id="tab1-messages">
        <div>
          <p>
            Cras iaculis ipsum quis lectus faucibus, in mattis nulla molestie.
            Vestibulum vel tristique libero. Morbi vulputate odio at viverra
            sodales. Curabitur accumsan justo eu libero porta ultrices vitae eu
            leo.
          </p>
          <div class="flex space-x-2 pt-3">
            <a
              href="#"
              class="tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light"
            >
              Tag 1
            </a>
            <a
              href="#"
              class="tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light"
            >
              Tag 2
            </a>
          </div>

          <p class="pt-3 text-xs text-slate-400 dark:text-navy-300">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore
            dolore non atque?
          </p>
        </div>
      </div>
      <div class="tab-content tab-shift-left" id="tab1-settings">
        <div>
          <p>
            Etiam nec ante eget lacus vulputate egestas non iaculis tellus.
            Suspendisse tempus ex in tortor venenatis malesuada. Aenean
            consequat dui vitae nibh lobortis condimentum. Duis vel risus est.
          </p>
          <div class="flex space-x-2 pt-3">
            <a
              href="#"
              class="tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light"
            >
              Tag 1
            </a>
            <a
              href="#"
              class="tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light"
            >
              Tag 2
            </a>
          </div>

          <p class="pt-3 text-xs text-slate-400 dark:text-navy-300">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore
            dolore non atque?
          </p>
        </div>
      </div>
    </div>
  </div>

  <!-- Javascript -->

  <script>
    new Tab(document.querySelector("#tab-wrapper-1"));
  </script>
                
              

                
  <div id="tab-wrapper-2" class="tabs flex flex-col">
    <div class="is-scrollbar-hidden overflow-x-auto">
      <div class="border-b-2 border-slate-150 dark:border-navy-500">
        <div class="tabs-list flex">
          <button
            class="tab btn shrink-0 rounded-none border-b-2 px-3 py-2 font-medium"
            data-active-class="border-primary dark:border-accent text-primary dark:text-accent-light"
            data-default-class="border-transparent hover:text-slate-800 focus:text-slate-800 dark:hover:text-navy-100 dark:focus:text-navy-100"
            data-target="#tab2-home"
          >
            Home
          </button>
          <button
            class="tab btn shrink-0 rounded-none border-b-2 px-3 py-2 font-medium"
            data-active-class="border-primary dark:border-accent text-primary dark:text-accent-light"
            data-default-class="border-transparent hover:text-slate-800 focus:text-slate-800 dark:hover:text-navy-100 dark:focus:text-navy-100"
            data-target="#tab2-profile"
          >
            Profile
          </button>

          <button
            class="tab btn shrink-0 rounded-none border-b-2 px-3 py-2 font-medium"
            data-active-class="border-primary dark:border-accent text-primary dark:text-accent-light"
            data-default-class="border-transparent hover:text-slate-800 focus:text-slate-800 dark:hover:text-navy-100 dark:focus:text-navy-100"
            data-target="#tab2-messages"
          >
            Messages
          </button>

          <button
            class="tab btn shrink-0 rounded-none border-b-2 px-3 py-2 font-medium"
            data-active-class="border-primary dark:border-accent text-primary dark:text-accent-light"
            data-default-class="border-transparent hover:text-slate-800 focus:text-slate-800 dark:hover:text-navy-100 dark:focus:text-navy-100"
            data-target="#tab2-settings"
          >
            Settings
          </button>
        </div>
      </div>
    </div>
    <div class="pt-4">
      <div class="tab-content tab-shift-up" id="tab2-home">
        <div>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent
            elementum finibus arcu vitae scelerisque. Etiam rutrum blandit
            condimentum. Maecenas condimentum massa vitae quam interdum, et
            lacinia urna tempor
          </p>
          <div class="flex space-x-2 pt-3">
            <a
              href="#"
              class="tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light"
            >
              Tag 1
            </a>
            <a
              href="#"
              class="tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light"
            >
              Tag 2
            </a>
          </div>

          <p class="pt-3 text-xs text-slate-400 dark:text-navy-300">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore
            dolore non atque?
          </p>
        </div>
      </div>
      <div class="tab-content tab-shift-up" id="tab2-profile">
        <div>
          <p>
            Pellentesque pulvinar, sapien eget fermentum sodales, felis lacus
            viverra magna, id pulvinar odio metus non enim. Ut id augue
            interdum, ultrices felis eu, tincidunt libero.
          </p>
          <div class="flex space-x-2 pt-3">
            <a
              href="#"
              class="tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light"
            >
              Tag 1
            </a>
            <a
              href="#"
              class="tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light"
            >
              Tag 2
            </a>
          </div>

          <p class="pt-3 text-xs text-slate-400 dark:text-navy-300">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore
            dolore non atque?
          </p>
        </div>
      </div>
      <div class="tab-content tab-shift-up" id="tab2-messages">
        <div>
          <p>
            Cras iaculis ipsum quis lectus faucibus, in mattis nulla molestie.
            Vestibulum vel tristique libero. Morbi vulputate odio at viverra
            sodales. Curabitur accumsan justo eu libero porta ultrices vitae eu
            leo.
          </p>
          <div class="flex space-x-2 pt-3">
            <a
              href="#"
              class="tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light"
            >
              Tag 1
            </a>
            <a
              href="#"
              class="tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light"
            >
              Tag 2
            </a>
          </div>

          <p class="pt-3 text-xs text-slate-400 dark:text-navy-300">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore
            dolore non atque?
          </p>
        </div>
      </div>
      <div class="tab-content tab-shift-up" id="tab2-settings">
        <div>
          <p>
            Etiam nec ante eget lacus vulputate egestas non iaculis tellus.
            Suspendisse tempus ex in tortor venenatis malesuada. Aenean
            consequat dui vitae nibh lobortis condimentum. Duis vel risus est.
          </p>
          <div class="flex space-x-2 pt-3">
            <a
              href="#"
              class="tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light"
            >
              Tag 1
            </a>
            <a
              href="#"
              class="tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light"
            >
              Tag 2
            </a>
          </div>

          <p class="pt-3 text-xs text-slate-400 dark:text-navy-300">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore
            dolore non atque?
          </p>
        </div>
      </div>
    </div>
  </div>

  <!-- Javascript -->

  <script>
    new Tab(document.querySelector("#tab-wrapper-2"));
  </script>
                
              

                
  <div
    id="tab-wrapper-3"
    data-active-tab="#tab3-profile"
    class="tabs flex flex-col"
  >
    <div class="is-scrollbar-hidden overflow-x-auto">
      <div class="border-b-2 border-slate-150 dark:border-navy-500">
        <div class="tabs-list -mb-0.5 flex">
          <button
            class="tab btn shrink-0 space-x-2 rounded-none border-b-2 px-3 py-2 font-medium"
            data-active-class="border-primary dark:border-accent text-primary dark:text-accent-light"
            data-default-class="border-transparent hover:text-slate-800 focus:text-slate-800 dark:hover:text-navy-100 dark:focus:text-navy-100"
            data-target="#tab3-home"
          >
            <svg
              xmlns="http://www.w3.org/2000/svg"
              class="size-4.5"
              fill="none"
              viewBox="0 0 24 24"
              stroke="currentColor"
              stroke-width="1.5"
            >
              <path
                stroke-linecap="round"
                stroke-linejoin="round"
                d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"
              />
            </svg>
            <span>Home</span>
          </button>
          <button
            class="tab btn shrink-0 space-x-2 rounded-none border-b-2 px-3 py-2 font-medium"
            data-active-class="border-primary dark:border-accent text-primary dark:text-accent-light"
            data-default-class="border-transparent hover:text-slate-800 focus:text-slate-800 dark:hover:text-navy-100 dark:focus:text-navy-100"
            data-target="#tab3-profile"
          >
            <svg
              xmlns="http://www.w3.org/2000/svg"
              class="size-4.5"
              fill="none"
              viewBox="0 0 24 24"
              stroke="currentColor"
              stroke-width="1.5"
            >
              <path
                stroke-linecap="round"
                stroke-linejoin="round"
                d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"
              />
            </svg>
            <span>Profile</span>
          </button>
          <button
            class="tab btn shrink-0 space-x-2 rounded-none border-b-2 px-3 py-2 font-medium"
            data-active-class="border-primary dark:border-accent text-primary dark:text-accent-light"
            data-default-class="border-transparent hover:text-slate-800 focus:text-slate-800 dark:hover:text-navy-100 dark:focus:text-navy-100"
            data-target="#tab3-messages"
          >
            <svg
              xmlns="http://www.w3.org/2000/svg"
              class="size-4.5"
              fill="none"
              viewBox="0 0 24 24"
              stroke="currentColor"
              stroke-width="1.5"
            >
              <path
                stroke-linecap="round"
                stroke-linejoin="round"
                d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"
              />
            </svg>
            <span> Messages </span>
          </button>
        </div>
      </div>
    </div>
    <div class="pt-4">
      <div class="tab-content tab-shift-left" id="tab3-home">
        <div>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent
            elementum finibus arcu vitae scelerisque. Etiam rutrum blandit
            condimentum. Maecenas condimentum massa vitae quam interdum, et
            lacinia urna tempor
          </p>
          <div class="flex space-x-2 pt-3">
            <a
              href="#"
              class="tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light"
            >
              Tag 1
            </a>
            <a
              href="#"
              class="tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light"
            >
              Tag 2
            </a>
          </div>

          <p class="pt-3 text-xs text-slate-400 dark:text-navy-300">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore
            dolore non atque?
          </p>
        </div>
      </div>
      <div class="tab-content tab-shift-left" id="tab3-profile">
        <div>
          <p>
            Pellentesque pulvinar, sapien eget fermentum sodales, felis lacus
            viverra magna, id pulvinar odio metus non enim. Ut id augue
            interdum, ultrices felis eu, tincidunt libero.
          </p>
          <div class="flex space-x-2 pt-3">
            <a
              href="#"
              class="tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light"
            >
              Tag 1
            </a>
            <a
              href="#"
              class="tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light"
            >
              Tag 2
            </a>
          </div>

          <p class="pt-3 text-xs text-slate-400 dark:text-navy-300">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore
            dolore non atque?
          </p>
        </div>
      </div>
      <div class="tab-content tab-shift-left" id="tab3-messages">
        <div>
          <p>
            Cras iaculis ipsum quis lectus faucibus, in mattis nulla molestie.
            Vestibulum vel tristique libero. Morbi vulputate odio at viverra
            sodales. Curabitur accumsan justo eu libero porta ultrices vitae eu
            leo.
          </p>
          <div class="flex space-x-2 pt-3">
            <a
              href="#"
              class="tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light"
            >
              Tag 1
            </a>
            <a
              href="#"
              class="tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light"
            >
              Tag 2
            </a>
          </div>

          <p class="pt-3 text-xs text-slate-400 dark:text-navy-300">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore
            dolore non atque?
          </p>
        </div>
      </div>
    </div>
  </div>

  <!-- Javascript -->

  <script>
    new Tab(document.querySelector("#tab-wrapper-3"));
  </script>
                
              

                
  <div id="tab-wrapper-4" class="tabs flex flex-col">
    <div
      class="is-scrollbar-hidden overflow-x-auto rounded-lg bg-slate-200 text-slate-600 dark:bg-navy-800 dark:text-navy-200"
    >
      <div class="tabs-list flex px-1.5 py-1">
        <button
          class="tab btn shrink-0 px-3 py-1.5 font-medium"
          data-target="#tab4-home"
          data-default-class="hover:text-slate-800 focus:text-slate-800 dark:hover:text-navy-100 dark:focus:text-navy-100"
          data-active-class="bg-white shadow dark:bg-navy-500 dark:text-navy-100"
        >
          Home
        </button>
        <button
          class="tab btn shrink-0 px-3 py-1.5 font-medium"
          data-target="#tab4-profile"
          data-default-class="hover:text-slate-800 focus:text-slate-800 dark:hover:text-navy-100 dark:focus:text-navy-100"
          data-active-class="bg-white shadow dark:bg-navy-500 dark:text-navy-100"
        >
          Profile
        </button>
        <button
          class="tab btn shrink-0 px-3 py-1.5 font-medium"
          data-target="#tab4-messages"
          data-default-class="hover:text-slate-800 focus:text-slate-800 dark:hover:text-navy-100 dark:focus:text-navy-100"
          data-active-class="bg-white shadow dark:bg-navy-500 dark:text-navy-100"
        >
          Messages
        </button>
        <button
          class="tab btn shrink-0 px-3 py-1.5 font-medium"
          data-target="#tab4-settings"
          data-default-class="hover:text-slate-800 focus:text-slate-800 dark:hover:text-navy-100 dark:focus:text-navy-100"
          data-active-class="bg-white shadow dark:bg-navy-500 dark:text-navy-100"
        >
          Settings
        </button>
      </div>
    </div>
    <div class="pt-4">
      <div class="tab-content tab-shift-left" id="tab4-home">
        <div>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent
            elementum finibus arcu vitae scelerisque. Etiam rutrum blandit
            condimentum. Maecenas condimentum massa vitae quam interdum, et
            lacinia urna tempor
          </p>
          <div class="flex space-x-2 pt-3">
            <a
              href="#"
              class="tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light"
            >
              Tag 1
            </a>
            <a
              href="#"
              class="tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light"
            >
              Tag 2
            </a>
          </div>

          <p class="pt-3 text-xs text-slate-400 dark:text-navy-300">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore
            dolore non atque?
          </p>
        </div>
      </div>
      <div class="tab-content tab-shift-left" id="tab4-profile">
        <div>
          <p>
            Pellentesque pulvinar, sapien eget fermentum sodales, felis lacus
            viverra magna, id pulvinar odio metus non enim. Ut id augue
            interdum, ultrices felis eu, tincidunt libero.
          </p>
          <div class="flex space-x-2 pt-3">
            <a
              href="#"
              class="tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light"
            >
              Tag 1
            </a>
            <a
              href="#"
              class="tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light"
            >
              Tag 2
            </a>
          </div>

          <p class="pt-3 text-xs text-slate-400 dark:text-navy-300">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore
            dolore non atque?
          </p>
        </div>
      </div>
      <div class="tab-content tab-shift-left" id="tab4-messages">
        <div>
          <p>
            Cras iaculis ipsum quis lectus faucibus, in mattis nulla molestie.
            Vestibulum vel tristique libero. Morbi vulputate odio at viverra
            sodales. Curabitur accumsan justo eu libero porta ultrices vitae eu
            leo.
          </p>
          <div class="flex space-x-2 pt-3">
            <a
              href="#"
              class="tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light"
            >
              Tag 1
            </a>
            <a
              href="#"
              class="tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light"
            >
              Tag 2
            </a>
          </div>

          <p class="pt-3 text-xs text-slate-400 dark:text-navy-300">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore
            dolore non atque?
          </p>
        </div>
      </div>
      <div class="tab-content tab-shift-left" id="tab4-settings">
        <div>
          <p>
            Etiam nec ante eget lacus vulputate egestas non iaculis tellus.
            Suspendisse tempus ex in tortor venenatis malesuada. Aenean
            consequat dui vitae nibh lobortis condimentum. Duis vel risus est.
          </p>
          <div class="flex space-x-2 pt-3">
            <a
              href="#"
              class="tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light"
            >
              Tag 1
            </a>
            <a
              href="#"
              class="tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light"
            >
              Tag 2
            </a>
          </div>

          <p class="pt-3 text-xs text-slate-400 dark:text-navy-300">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore
            dolore non atque?
          </p>
        </div>
      </div>
    </div>
  </div>

  <!-- Javascript -->

  <script>
    new Tab(document.querySelector("#tab-wrapper-4"));
  </script>
                
              

                
  <div id="tab-wrapper-5" class="tabs flex flex-col">
    <div
      class="is-scrollbar-hidden overflow-x-auto rounded-lg bg-slate-200 text-slate-600 dark:bg-navy-800 dark:text-navy-200"
    >
      <div class="tabs-list flex px-1.5 py-1">
        <button
          data-target="#tab5-home"
          class="tab btn shrink-0 space-x-2 px-3 py-1.5 font-medium"
          data-default-class="hover:text-slate-800 focus:text-slate-800 dark:hover:text-navy-100 dark:focus:text-navy-100"
          data-active-class="bg-white shadow dark:bg-navy-500 dark:text-navy-100"
        >
          <svg
            xmlns="http://www.w3.org/2000/svg"
            class="size-4.5"
            fill="none"
            viewBox="0 0 24 24"
            stroke="currentColor"
            stroke-width="1.5"
          >
            <path
              stroke-linecap="round"
              stroke-linejoin="round"
              d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"
            />
          </svg>
          <span> Home </span>
        </button>
        <button
          data-target="#tab5-profile"
          class="tab btn shrink-0 space-x-2 px-3 py-1.5 font-medium"
          data-default-class="hover:text-slate-800 focus:text-slate-800 dark:hover:text-navy-100 dark:focus:text-navy-100"
          data-active-class="bg-white shadow dark:bg-navy-500 dark:text-navy-100"
        >
          <svg
            xmlns="http://www.w3.org/2000/svg"
            class="size-4.5"
            fill="none"
            viewBox="0 0 24 24"
            stroke="currentColor"
            stroke-width="1.5"
          >
            <path
              stroke-linecap="round"
              stroke-linejoin="round"
              d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"
            />
          </svg>
          <span>Profile</span>
        </button>
        <button
          data-target="#tab5-messages"
          class="tab btn shrink-0 space-x-2 px-3 py-1.5 font-medium"
          data-default-class="hover:text-slate-800 focus:text-slate-800 dark:hover:text-navy-100 dark:focus:text-navy-100"
          data-active-class="bg-white shadow dark:bg-navy-500 dark:text-navy-100"
        >
          <svg
            xmlns="http://www.w3.org/2000/svg"
            class="size-4.5"
            fill="none"
            viewBox="0 0 24 24"
            stroke="currentColor"
            stroke-width="1.5"
          >
            <path
              stroke-linecap="round"
              stroke-linejoin="round"
              d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"
            />
          </svg>
          <span>Messages</span>
        </button>
      </div>
    </div>
    <div class="pt-4">
      <div class="tab-content tab-shift-left" id="tab5-home">
        <div>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent
            elementum finibus arcu vitae scelerisque. Etiam rutrum blandit
            condimentum. Maecenas condimentum massa vitae quam interdum, et
            lacinia urna tempor
          </p>
          <div class="flex space-x-2 pt-3">
            <a
              href="#"
              class="tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light"
            >
              Tag 1
            </a>
            <a
              href="#"
              class="tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light"
            >
              Tag 2
            </a>
          </div>

          <p class="pt-3 text-xs text-slate-400 dark:text-navy-300">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore
            dolore non atque?
          </p>
        </div>
      </div>
      <div class="tab-content tab-shift-left" id="tab5-profile">
        <div>
          <p>
            Pellentesque pulvinar, sapien eget fermentum sodales, felis lacus
            viverra magna, id pulvinar odio metus non enim. Ut id augue
            interdum, ultrices felis eu, tincidunt libero.
          </p>
          <div class="flex space-x-2 pt-3">
            <a
              href="#"
              class="tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light"
            >
              Tag 1
            </a>
            <a
              href="#"
              class="tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light"
            >
              Tag 2
            </a>
          </div>

          <p class="pt-3 text-xs text-slate-400 dark:text-navy-300">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore
            dolore non atque?
          </p>
        </div>
      </div>
      <div class="tab-content tab-shift-left" id="tab5-messages">
        <div>
          <p>
            Cras iaculis ipsum quis lectus faucibus, in mattis nulla molestie.
            Vestibulum vel tristique libero. Morbi vulputate odio at viverra
            sodales. Curabitur accumsan justo eu libero porta ultrices vitae eu
            leo.
          </p>
          <div class="flex space-x-2 pt-3">
            <a
              href="#"
              class="tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light"
            >
              Tag 1
            </a>
            <a
              href="#"
              class="tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light"
            >
              Tag 2
            </a>
          </div>

          <p class="pt-3 text-xs text-slate-400 dark:text-navy-300">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore
            dolore non atque?
          </p>
        </div>
      </div>
    </div>
  </div>

  <!-- Javascript -->

  <script>
    new Tab(document.querySelector("#tab-wrapper-5"));
  </script>