<div x-data="{activeTab:'tabHome'}" class="tabs flex flex-col">
    <div class="is-scrollbar-hidden overflow-x-auto">
      <div class="tabs-list flex">
        <button
          @click="activeTab = 'tabHome'"
          :class="activeTab === 'tabHome' ? 'border-primary dark:border-accent text-primary dark:text-accent-light' : 'border-transparent hover:text-slate-800 focus:text-slate-800 dark:hover:text-navy-100 dark:focus:text-navy-100'"
          class="btn shrink-0 rounded-none border-b-2 px-3 py-2 font-medium"
        >
          خانه
        </button>
        <button
          @click="activeTab = 'tabProfile'"
          :class="activeTab === 'tabProfile' ? 'border-primary dark:border-accent text-primary dark:text-accent-light' : 'border-transparent hover:text-slate-800 focus:text-slate-800 dark:hover:text-navy-100 dark:focus:text-navy-100'"
          class="btn shrink-0 rounded-none border-b-2 px-3 py-2 font-medium"
        >
          پروفایل
        </button>
        <button
          @click="activeTab = 'tabMessages'"
          :class="activeTab === 'tabMessages' ? 'border-primary dark:border-accent text-primary dark:text-accent-light' : 'border-transparent hover:text-slate-800 focus:text-slate-800 dark:hover:text-navy-100 dark:focus:text-navy-100'"
          class="btn shrink-0 rounded-none border-b-2 px-3 py-2 font-medium"
        >
          پیام‌ها
        </button>
        <button
          @click="activeTab = 'tabSettings'"
          :class="activeTab === 'tabSettings' ? 'border-primary dark:border-accent text-primary dark:text-accent-light' : 'border-transparent hover:text-slate-800 focus:text-slate-800 dark:hover:text-navy-100 dark:focus:text-navy-100'"
          class="btn shrink-0 rounded-none border-b-2 px-3 py-2 font-medium"
        >
          تنظیمات
        </button>
      </div>
    </div>
    <div class="tab-content pt-4">
      <div
        x-show="activeTab === 'tabHome'"
        x-transition:enter="transition-all duration-500 easy-in-out"
        x-transition:enter-start="opacity-0 [transform:translate3d(1rem,0,0)]"
        x-transition:enter-end="opacity-100 [transform:translate3d(0,0,0)]"
      >
        <div>
          <p>
            لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ. پرزنت المنتوم فینیبوس آرکو ویتای اسکِلِرسکه. اتیام راتروم بلاندیت کندیمِنتوم. ماِکنس کندیمِنتوم ماسا ویتای کوام اینتروم، ات لاکینیا اورنا تمپور.
          </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"
            >
              برچسب 1
            </a>
            <a
              href="#"
              class="tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light"
            >
              برچسب 2
            </a>
          </div>

          <p class="pt-3 text-xs text-slate-400 dark:text-navy-300">
            لورم ایپسوم متن ساختگی صنعت چاپ. تمپوره دولوره نون آته‌که؟
          </p>
        </div>
      </div>
      <div
        x-show="activeTab === 'tabProfile'"
        x-transition:enter="transition-all duration-500 easy-in-out"
        x-transition:enter-start="opacity-0 [transform:translate3d(1rem,0,0)]"
        x-transition:enter-end="opacity-100 [transform:translate3d(0,0,0)]"
      >
        <div>
          <p>
            پلنتسکه پولوینار، ساپیِن اگت فرمنتوم سودالس، فلیس لاکوس ویورا ماگنا، آیدی پولوینار اودیو متوس نون اینیم. اوت آیدی آوگو اینترودوم، اولترسیز فلیس او، تینکیدانت لیبرو.
          </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"
            >
              برچسب 1
            </a>
            <a
              href="#"
              class="tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light"
            >
              برچسب 2
            </a>
          </div>

          <p class="pt-3 text-xs text-slate-400 dark:text-navy-300">
            لورم ایپسوم متن ساختگی صنعت چاپ. تمپوره دولوره نون آته‌که؟
          </p>
        </div>
      </div>
      <div
        x-show="activeTab === 'tabMessages'"
        x-transition:enter="transition-all duration-500 easy-in-out"
        x-transition:enter-start="opacity-0 [transform:translate3d(1rem,0,0)]"
        x-transition:enter-end="opacity-100 [transform:translate3d(0,0,0)]"
      >
        <div>
          <p>
            کراس یاکولیس ایپسوم کوئیس لکتوس فابکوس، این ماتیس نولا مولستیه. وستیبولوم ول تریستیکه لیبرو. موربی ولوپتاته اودیو ات ویورا سودالس. کورابیتور اکومسان جاستو او لیبرو پورتا اولترسیز ویتای او لئو.
          </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"
            >
              برچسب 1
            </a>
            <a
              href="#"
              class="tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light"
            >
              برچسب 2
            </a>
          </div>

          <p class="pt-3 text-xs text-slate-400 dark:text-navy-300">
            لورم ایپسوم متن ساختگی صنعت چاپ. تمپوره دولوره نون آته‌که؟
          </p>
        </div>
      </div>
      <div
        x-show="activeTab === 'tabSettings'"
        x-transition:enter="transition-all duration-500 easy-in-out"
        x-transition:enter-start="opacity-0 [transform:translate3d(1rem,0,0)]"
        x-transition:enter-end="opacity-100 [transform:translate3d(0,0,0)]"
      >
        <div>
          <p>
            اتیام نک آنتِ اِگت لاکوس ولوپتاته اگستاس نون ایکولیس تِه‌لوس. سوسپندیسه تمپور اکز این تورتور وِنانتیس مالسوادا. آنین کونسوکوات دوي ویتای نیب لوبرتس کندیمِنتوم. دویس ول ریزوس اِست.
          </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"
            >
              برچسب 1
            </a>
            <a
              href="#"
              class="tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light"
            >
              برچسب 2
            </a>
          </div>

          <p class="pt-3 text-xs text-slate-400 dark:text-navy-300">
            لورم ایپسوم متن ساختگی صنعت چاپ. تمپوره دولوره نون آته‌که؟
          </p>
        </div>
      </div>
    </div>
  </div>
                
              

                
  <div x-data="{activeTab:'tabHome'}" 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
            @click="activeTab = 'tabHome'"
            :class="activeTab === 'tabHome' ? 'border-primary dark:border-accent text-primary dark:text-accent-light' : 'border-transparent hover:text-slate-800 focus:text-slate-800 dark:hover:text-navy-100 dark:focus:text-navy-100'"
            class="btn shrink-0 rounded-none border-b-2 px-3 py-2 font-medium"
          >
            خانه
          </button>
          <button
            @click="activeTab = 'tabProfile'"
            :class="activeTab === 'tabProfile' ? 'border-primary dark:border-accent text-primary dark:text-accent-light' : 'border-transparent hover:text-slate-800 focus:text-slate-800 dark:hover:text-navy-100 dark:focus:text-navy-100'"
            class="btn shrink-0 rounded-none border-b-2 px-3 py-2 font-medium"
          >
            پروفایل
          </button>
          <button
            @click="activeTab = 'tabMessages'"
            :class="activeTab === 'tabMessages' ? 'border-primary dark:border-accent text-primary dark:text-accent-light' : 'border-transparent hover:text-slate-800 focus:text-slate-800 dark:hover:text-navy-100 dark:focus:text-navy-100'"
            class="btn shrink-0 rounded-none border-b-2 px-3 py-2 font-medium"
          >
            پیام‌ها
          </button>
          <button
            @click="activeTab = 'tabSettings'"
            :class="activeTab === 'tabSettings' ? 'border-primary dark:border-accent text-primary dark:text-accent-light' : 'border-transparent hover:text-slate-800 focus:text-slate-800 dark:hover:text-navy-100 dark:focus:text-navy-100'"
            class="btn shrink-0 rounded-none border-b-2 px-3 py-2 font-medium"
          >
            تنظیمات
          </button>
        </div>
      </div>
    </div>
    <div class="tab-content pt-4">
      <div
        x-show="activeTab === 'tabHome'"
        x-transition:enter="transition-all duration-500 easy-in-out"
        x-transition:enter-start="opacity-0 [transform:translate3d(0,1rem,0)]"
        x-transition:enter-end="opacity-100 [transform:translate3d(0,0,0)]"
      >
        <div>
          <p>
            لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ. پرزنت المنتوم فینیبوس آرکو ویتای اسکِلِرسکه. اتیام راتروم بلاندیت کندیمِنتوم. ماِکنس کندیمِنتوم ماسا ویتای کوام اینتروم، ات لاکینیا اورنا تمپور.
          </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"
            >
              برچسب 1
            </a>
            <a
              href="#"
              class="tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light"
            >
              برچسب 2
            </a>
          </div>

          <p class="pt-3 text-xs text-slate-400 dark:text-navy-300">
            لورم ایپسوم متن ساختگی صنعت چاپ. تمپوره دولوره نون آته‌که؟
          </p>
        </div>
      </div>
      <div
        x-show="activeTab === 'tabProfile'"
        x-transition:enter="transition-all duration-500 easy-in-out"
        x-transition:enter-start="opacity-0 [transform:translate3d(0,1rem,0)]"
        x-transition:enter-end="opacity-100 [transform:translate3d(0,0,0)]"
      >
        <div>
          <p>
            پلنتسکه پولوینار، ساپیِن اگت فرمنتوم سودالس، فلیس لاکوس ویورا ماگنا، آیدی پولوینار اودیو متوس نون اینیم. اوت آیدی آوگو اینترودوم، اولترسیز فلیس او، تینکیدانت لیبرو.
          </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"
            >
              برچسب 1
            </a>
            <a
              href="#"
              class="tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light"
            >
              برچسب 2
            </a>
          </div>

          <p class="pt-3 text-xs text-slate-400 dark:text-navy-300">
            لورم ایپسوم متن ساختگی صنعت چاپ. تمپوره دولوره نون آته‌که؟
          </p>
        </div>
      </div>
      <div
        x-show="activeTab === 'tabMessages'"
        x-transition:enter="transition-all duration-500 easy-in-out"
        x-transition:enter-start="opacity-0 [transform:translate3d(0,1rem,0)]"
        x-transition:enter-end="opacity-100 [transform:translate3d(0,0,0)]"
      >
        <div>
          <p>
            کراس یاکولیس ایپسوم کوئیس لکتوس فابکوس، این ماتیس نولا مولستیه. وستیبولوم ول تریستیکه لیبرو. موربی ولوپتاته اودیو ات ویورا سودالس. کورابیتور اکومسان جاستو او لیبرو پورتا اولترسیز ویتای او لئو.
          </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"
            >
              برچسب 1
            </a>
            <a
              href="#"
              class="tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light"
            >
              برچسب 2
            </a>
          </div>

          <p class="pt-3 text-xs text-slate-400 dark:text-navy-300">
            لورم ایپسوم متن ساختگی صنعت چاپ. تمپوره دولوره نون آته‌که؟
          </p>
        </div>
      </div>
      <div
        x-show="activeTab === 'tabSettings'"
        x-transition:enter="transition-all duration-500 easy-in-out"
        x-transition:enter-start="opacity-0 [transform:translate3d(0,1rem,0)]"
        x-transition:enter-end="opacity-100 [transform:translate3d(0,0,0)]"
      >
        <div>
          <p>
            اتیام نک آنتِ اِگت لاکوس ولوپتاته اگستاس نون ایکولیس تِه‌لوس. سوسپندیسه تمپور اکز این تورتور وِنانتیس مالسوادا. آنین کونسوکوات دوي ویتای نیب لوبرتس کندیمِنتوم. دویس ول ریزوس اِست.
          </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"
            >
              برچسب 1
            </a>
            <a
              href="#"
              class="tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light"
            >
              برچسب 2
            </a>
          </div>

          <p class="pt-3 text-xs text-slate-400 dark:text-navy-300">
            لورم ایپسوم متن ساختگی صنعت چاپ. تمپوره دولوره نون آته‌که؟
          </p>
        </div>
      </div>
    </div>
  </div>
                
              

                
  <div x-data="{activeTab:'tabProfile'}" 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
            @click="activeTab = 'tabHome'"
            :class="activeTab === 'tabHome' ? 'border-primary dark:border-accent text-primary dark:text-accent-light' : 'border-transparent hover:text-slate-800 focus:text-slate-800 dark:hover:text-navy-100 dark:focus:text-navy-100'"
            class="btn shrink-0 space-x-2 rounded-none border-b-2 px-3 py-2 font-medium"
          >
            <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>خانه</span>
          </button>
          <button
            @click="activeTab = 'tabProfile'"
            :class="activeTab === 'tabProfile' ? 'border-primary dark:border-accent text-primary dark:text-accent-light' : 'border-transparent hover:text-slate-800 focus:text-slate-800 dark:hover:text-navy-100 dark:focus:text-navy-100'"
            class="btn shrink-0 space-x-2 rounded-none border-b-2 px-3 py-2 font-medium"
          >
            <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>پروفایل</span>
          </button>
          <button
            @click="activeTab = 'tabMessages'"
            :class="activeTab === 'tabMessages' ? 'border-primary dark:border-accent text-primary dark:text-accent-light' : 'border-transparent hover:text-slate-800 focus:text-slate-800 dark:hover:text-navy-100 dark:focus:text-navy-100'"
            class="btn shrink-0 space-x-2 rounded-none border-b-2 px-3 py-2 font-medium"
          >
            <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> پیام‌ها </span>
          </button>
        </div>
      </div>
    </div>
    <div class="tab-content pt-4">
      <div
        x-show="activeTab === 'tabHome'"
        x-transition:enter="transition-all duration-500 easy-in-out"
        x-transition:enter-start="opacity-0 [transform:translate3d(1rem,0,0)]"
        x-transition:enter-end="opacity-100 [transform:translate3d(0,0,0)]"
      >
        <div>
          <p>
            لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ. پرزنت المنتوم فینیبوس آرکو ویتای اسکِلِرسکه. اتیام راتروم بلاندیت کندیمِنتوم. ماِکنس کندیمِنتوم ماسا ویتای کوام اینتروم، ات لاکینیا اورنا تمپور.
          </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"
            >
              برچسب 1
            </a>
            <a
              href="#"
              class="tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light"
            >
              برچسب 2
            </a>
          </div>

          <p class="pt-3 text-xs text-slate-400 dark:text-navy-300">
            لورم ایپسوم متن ساختگی صنعت چاپ. تمپوره دولوره نون آته‌که؟
          </p>
        </div>
      </div>
      <div
        x-show="activeTab === 'tabProfile'"
        x-transition:enter="transition-all duration-500 easy-in-out"
        x-transition:enter-start="opacity-0 [transform:translate3d(1rem,0,0)]"
        x-transition:enter-end="opacity-100 [transform:translate3d(0,0,0)]"
      >
        <div>
          <p>
            پلنتسکه پولوینار، ساپیِن اگت فرمنتوم سودالس، فلیس لاکوس ویورا ماگنا، آیدی پولوینار اودیو متوس نون اینیم. اوت آیدی آوگو اینترودوم، اولترسیز فلیس او، تینکیدانت لیبرو.
          </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"
            >
              برچسب 1
            </a>
            <a
              href="#"
              class="tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light"
            >
              برچسب 2
            </a>
          </div>

          <p class="pt-3 text-xs text-slate-400 dark:text-navy-300">
            لورم ایپسوم متن ساختگی صنعت چاپ. تمپوره دولوره نون آته‌که؟
          </p>
        </div>
      </div>
      <div
        x-show="activeTab === 'tabMessages'"
        x-transition:enter="transition-all duration-500 easy-in-out"
        x-transition:enter-start="opacity-0 [transform:translate3d(1rem,0,0)]"
        x-transition:enter-end="opacity-100 [transform:translate3d(0,0,0)]"
      >
        <div>
          <p>
            کراس یاکولیس ایپسوم کوئیس لکتوس فابکوس، این ماتیس نولا مولستیه. وستیبولوم ول تریستیکه لیبرو. موربی ولوپتاته اودیو ات ویورا سودالس. کورابیتور اکومسان جاستو او لیبرو پورتا اولترسیز ویتای او لئو.
          </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"
            >
              برچسب 1
            </a>
            <a
              href="#"
              class="tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light"
            >
              برچسب 2
            </a>
          </div>

          <p class="pt-3 text-xs text-slate-400 dark:text-navy-300">
            لورم ایپسوم متن ساختگی صنعت چاپ. تمپوره دولوره نون آته‌که؟
          </p>
        </div>
      </div>
    </div>
  </div>
                
              

                
  <div x-data="{activeTab:'tabHome'}" 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
          @click="activeTab = 'tabHome'"
          :class="activeTab === 'tabHome' ? 'bg-white shadow-sm dark:bg-navy-500 dark:text-navy-100' : 'hover:text-slate-800 focus:text-slate-800 dark:hover:text-navy-100 dark:focus:text-navy-100'"
          class="btn shrink-0 px-3 py-1.5 font-medium"
        >
          خانه
        </button>
        <button
          @click="activeTab = 'tabProfile'"
          :class="activeTab === 'tabProfile' ? 'bg-white shadow-sm dark:bg-navy-500 dark:text-navy-100' : 'hover:text-slate-800 focus:text-slate-800 dark:hover:text-navy-100 dark:focus:text-navy-100'"
          class="btn shrink-0 px-3 py-1.5 font-medium"
        >
          پروفایل
        </button>
        <button
          @click="activeTab = 'tabMessages'"
          :class="activeTab === 'tabMessages' ? 'bg-white shadow-sm dark:bg-navy-500 dark:text-navy-100' : 'hover:text-slate-800 focus:text-slate-800 dark:hover:text-navy-100 dark:focus:text-navy-100'"
          class="btn shrink-0 px-3 py-1.5 font-medium"
        >
          پیام‌ها
        </button>
        <button
          @click="activeTab = 'tabSettings'"
          :class="activeTab === 'tabSettings' ? 'bg-white shadow-sm dark:bg-navy-500 dark:text-navy-100' : 'hover:text-slate-800 focus:text-slate-800 dark:hover:text-navy-100 dark:focus:text-navy-100'"
          class="btn shrink-0 px-3 py-1.5 font-medium"
        >
          تنظیمات
        </button>
      </div>
    </div>
    <div class="tab-content pt-4">
      <div
        x-show="activeTab === 'tabHome'"
        x-transition:enter="transition-all duration-500 easy-in-out"
        x-transition:enter-start="opacity-0 [transform:translate3d(1rem,0,0)]"
        x-transition:enter-end="opacity-100 [transform:translate3d(0,0,0)]"
      >
        <div>
          <p>
            لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ. پرزنت المنتوم فینیبوس آرکو ویتای اسکِلِرسکه. اتیام راتروم بلاندیت کندیمِنتوم. ماِکنس کندیمِنتوم ماسا ویتای کوام اینتروم، ات لاکینیا اورنا تمپور.
          </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"
            >
              برچسب 1
            </a>
            <a
              href="#"
              class="tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light"
            >
              برچسب 2
            </a>
          </div>

          <p class="pt-3 text-xs text-slate-400 dark:text-navy-300">
            لورم ایپسوم متن ساختگی صنعت چاپ. تمپوره دولوره نون آته‌که؟
          </p>
        </div>
      </div>
      <div
        x-show="activeTab === 'tabProfile'"
        x-transition:enter="transition-all duration-500 easy-in-out"
        x-transition:enter-start="opacity-0 [transform:translate3d(1rem,0,0)]"
        x-transition:enter-end="opacity-100 [transform:translate3d(0,0,0)]"
      >
        <div>
          <p>
            پلنتسکه پولوینار، ساپیِن اگت فرمنتوم سودالس، فلیس لاکوس ویورا ماگنا، آیدی پولوینار اودیو متوس نون اینیم. اوت آیدی آوگو اینترودوم، اولترسیز فلیس او، تینکیدانت لیبرو.
          </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"
            >
              برچسب 1
            </a>
            <a
              href="#"
              class="tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light"
            >
              برچسب 2
            </a>
          </div>

          <p class="pt-3 text-xs text-slate-400 dark:text-navy-300">
            لورم ایپسوم متن ساختگی صنعت چاپ. تمپوره دولوره نون آته‌که؟
          </p>
        </div>
      </div>
      <div
        x-show="activeTab === 'tabMessages'"
        x-transition:enter="transition-all duration-500 easy-in-out"
        x-transition:enter-start="opacity-0 [transform:translate3d(1rem,0,0)]"
        x-transition:enter-end="opacity-100 [transform:translate3d(0,0,0)]"
      >
        <div>
          <p>
            کراس یاکولیس ایپسوم کوئیس لکتوس فابکوس، این ماتیس نولا مولستیه. وستیبولوم ول تریستیکه لیبرو. موربی ولوپتاته اودیو ات ویورا سودالس. کورابیتور اکومسان جاستو او لیبرو پورتا اولترسیز ویتای او لئو.
          </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"
            >
              برچسب 1
            </a>
            <a
              href="#"
              class="tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light"
            >
              برچسب 2
            </a>
          </div>

          <p class="pt-3 text-xs text-slate-400 dark:text-navy-300">
            لورم ایپسوم متن ساختگی صنعت چاپ. تمپوره دولوره نون آته‌که؟
          </p>
        </div>
      </div>
    </div>
  </div>
                
              

                
  <div x-data="{activeTab:'tabHome'}" 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
          @click="activeTab = 'tabHome'"
          :class="activeTab === 'tabHome' ? 'bg-white shadow-sm dark:bg-navy-500 dark:text-navy-100' : 'hover:text-slate-800 focus:text-slate-800 dark:hover:text-navy-100 dark:focus:text-navy-100'"
          class="btn shrink-0 space-x-2 px-3 py-1.5 font-medium"
        >
          <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> خانه </span>
        </button>
        <button
          @click="activeTab = 'tabProfile'"
          :class="activeTab === 'tabProfile' ? 'bg-white shadow-sm dark:bg-navy-500 dark:text-navy-100' : 'hover:text-slate-800 focus:text-slate-800 dark:hover:text-navy-100 dark:focus:text-navy-100'"
          class="btn shrink-0 space-x-2 px-3 py-1.5 font-medium"
        >
          <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>پروفایل</span>
        </button>
        <button
          @click="activeTab = 'tabMessages'"
          :class="activeTab === 'tabMessages' ? 'bg-white shadow-sm dark:bg-navy-500 dark:text-navy-100' : 'hover:text-slate-800 focus:text-slate-800 dark:hover:text-navy-100 dark:focus:text-navy-100'"
          class="btn shrink-0 space-x-2 px-3 py-1.5 font-medium"
        >
          <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>پیام‌ها</span>
        </button>
      </div>
    </div>
    <div class="tab-content pt-4">
      <div
        x-show="activeTab === 'tabHome'"
        x-transition:enter="transition-all duration-500 easy-in-out"
        x-transition:enter-start="opacity-0 [transform:translate3d(1rem,0,0)]"
        x-transition:enter-end="opacity-100 [transform:translate3d(0,0,0)]"
      >
        <div>
          <p>
            لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ. پرزنت المنتوم فینیبوس آرکو ویتای اسکِلِرسکه. اتیام راتروم بلاندیت کندیمِنتوم. ماِکنس کندیمِنتوم ماسا ویتای کوام اینتروم، ات لاکینیا اورنا تمپور.
          </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"
            >
              برچسب 1
            </a>
            <a
              href="#"
              class="tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light"
            >
              برچسب 2
            </a>
          </div>

          <p class="pt-3 text-xs text-slate-400 dark:text-navy-300">
            لورم ایپسوم متن ساختگی صنعت چاپ. تمپوره دولوره نون آته‌که؟
          </p>
        </div>
      </div>
      <div
        x-show="activeTab === 'tabProfile'"
        x-transition:enter="transition-all duration-500 easy-in-out"
        x-transition:enter-start="opacity-0 [transform:translate3d(1rem,0,0)]"
        x-transition:enter-end="opacity-100 [transform:translate3d(0,0,0)]"
      >
        <div>
          <p>
            پلنتسکه پولوینار، ساپیِن اگت فرمنتوم سودالس، فلیس لاکوس ویورا ماگنا، آیدی پولوینار اودیو متوس نون اینیم. اوت آیدی آوگو اینترودوم، اولترسیز فلیس او، تینکیدانت لیبرو.
          </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"
            >
              برچسب 1
            </a>
            <a
              href="#"
              class="tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light"
            >
              برچسب 2
            </a>
          </div>

          <p class="pt-3 text-xs text-slate-400 dark:text-navy-300">
            لورم ایپسوم متن ساختگی صنعت چاپ. تمپوره دولوره نون آته‌که؟
          </p>
        </div>
      </div>
      <div
        x-show="activeTab === 'tabMessages'"
        x-transition:enter="transition-all duration-500 easy-in-out"
        x-transition:enter-start="opacity-0 [transform:translate3d(1rem,0,0)]"
        x-transition:enter-end="opacity-100 [transform:translate3d(0,0,0)]"
      >
        <div>
          <p>
            کراس یاکولیس ایپسوم کوئیس لکتوس فابکوس، این ماتیس نولا مولستیه. وستیبولوم ول تریستیکه لیبرو. موربی ولوپتاته اودیو ات ویورا سودالس. کورابیتور اکومسان جاستو او لیبرو پورتا اولترسیز ویتای او لئو.
          </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"
            >
              برچسب 1
            </a>
            <a
              href="#"
              class="tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light"
            >
              برچسب 2
            </a>
          </div>

          <p class="pt-3 text-xs text-slate-400 dark:text-navy-300">
            لورم ایپسوم متن ساختگی صنعت چاپ. تمپوره دولوره نون آته‌که؟
          </p>
        </div>
      </div>
    </div>
  </div>