<!-- tabs container -->
<div class="space-y-5" x-data="{ activeTab: 'tabOne' }">
    <!-- tabs:list-container -->
    <div class="relative overflow-x-auto">
        <!-- tabs:list -->
        <ul class="inline-flex gap-2 bg-muted border rounded-lg p-1">
            <!-- tabs:list:item -->
            <li>
                <button type="button" class="flex items-center gap-x-2 relative rounded-md cursor-pointer py-2 px-4"
                    x-bind:class="activeTab === 'tabOne' ? 'text-foreground bg-background shadow' : 'text-muted-foreground'"
                    x-on:click="activeTab = 'tabOne'">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="size-4">
                        <path fill="currentColor"
                            d="M17.828 2a3 3 0 0 1 1.977.743l.145.136l1.171 1.17a3 3 0 0 1 .136 4.1l-.136.144L19.415 10l2.292 2.293a1 1 0 0 1 .083 1.32l-.083.094l-4 4a1 1 0 0 1-1.497-1.32l.083-.094L19.585 13l-1.586-1.585l-7.464 7.464a3.83 3.83 0 0 1-2.474 1.114l-.233.008c-.674 0-1.33-.178-1.905-.508l-1.216 1.214a1 1 0 0 1-1.497-1.32l.083-.094l1.214-1.216a3.83 3.83 0 0 1 .454-4.442l.16-.17L15.707 2.879a3 3 0 0 1 1.923-.873zm0 2a1 1 0 0 0-.608.206l-.099.087L15.414 6L18 8.585l1.707-1.706a1 1 0 0 0 .284-.576l.01-.131a1 1 0 0 0-.207-.609l-.087-.099l-1.171-1.171A1 1 0 0 0 17.828 4" />
                    </svg>

                    <span class="font-semibold text-xs">معرفی</span>
                </button>
            </li><!-- end tabs:list:item -->

            <!-- tabs:list:item -->
            <li>
                <button type="button" class="flex items-center gap-x-2 relative rounded-md cursor-pointer py-2 px-4"
                    x-bind:class="activeTab === 'tabTwo' ? 'text-foreground bg-background shadow' : 'text-muted-foreground'"
                    x-on:click="activeTab = 'tabTwo'">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="size-4">
                        <g fill="currentColor">
                            <path
                                d="m12 2l.117.007a1 1 0 0 1 .876.876L13 3v4l.005.15a2 2 0 0 0 1.838 1.844L15 9h4l.117.007a1 1 0 0 1 .876.876L20 10v9a3 3 0 0 1-2.824 2.995L17 22H7a3 3 0 0 1-2.995-2.824L4 19V5a3 3 0 0 1 2.824-2.995L7 2zm3 14H9a1 1 0 0 0 0 2h6a1 1 0 0 0 0-2m0-4H9a1 1 0 0 0 0 2h6a1 1 0 0 0 0-2" />
                            <path d="M19 7h-4l-.001-4.001z" />
                        </g>
                    </svg>

                    <span class="font-semibold text-xs">مشخصات</span>
                </button>
            </li><!-- end tabs:list:item -->
        </ul><!-- end tabs:list -->
    </div><!-- end tabs:list-container -->

    <!-- tabs:contents -->
    <div>
        <!-- tabs:contents:tabOne -->
        <div x-cloak x-show="activeTab === 'tabOne'">
            <h3 class="font-semibold text-sm mb-3">محتوای تب یک</h3>
            <div class="font-medium text-xs text-muted-foreground space-y-3">
                <p>
                    لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از
                    طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که
                    لازم است، و برای شرایط فعلی تکنولوژی مورد نیاز، و کاربردهای متنوع با هدف بهبود
                    ابزارهای کاربردی می باشد، کتابهای زیادی در شصت و سه درصد گذشته حال و آینده،
                    شناخت فراوان جامعه و متخصصان را می طلبد، تا با نرم افزارها شناخت بیشتری را برای
                    طراحان رایانه ای علی الخصوص طراحان خلاقی، و فرهنگ پیشرو در زبان فارسی ایجاد کرد،
                    در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها، و شرایط
                    سخت تایپ به پایان رسد و زمان مورد نیاز شامل حروفچینی دستاوردهای اصلی، و جوابگوی
                    سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد.
                </p>
            </div>
        </div><!-- end tabs:contents:tabOne -->

        <!-- tabs:contents:tabTwo -->
        <div x-cloak x-show="activeTab === 'tabTwo'">
            <h3 class="font-semibold text-sm mb-3">محتوای تب دو</h3>
            <div class="font-medium text-xs text-muted-foreground space-y-3">
                <p>
                    لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از
                    طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که
                    لازم است، و برای شرایط فعلی تکنولوژی مورد نیاز، و کاربردهای متنوع با هدف بهبود
                    ابزارهای کاربردی می باشد، کتابهای زیادی در شصت و سه درصد گذشته حال و آینده،
                    شناخت فراوان جامعه و متخصصان را می طلبد، تا با نرم افزارها شناخت بیشتری را برای
                    طراحان رایانه ای علی الخصوص طراحان خلاقی، و فرهنگ پیشرو در زبان فارسی ایجاد کرد،
                    در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها، و شرایط
                    سخت تایپ به پایان رسد و زمان مورد نیاز شامل حروفچینی دستاوردهای اصلی، و جوابگوی
                    سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد.
                </p>
                <p>
                    لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از
                    طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که
                    لازم است، و برای شرایط فعلی تکنولوژی مورد نیاز، و کاربردهای متنوع با هدف بهبود
                    ابزارهای کاربردی می باشد، کتابهای زیادی در شصت و سه درصد گذشته حال و آینده،
                    شناخت فراوان جامعه و متخصصان را می طلبد، تا با نرم افزارها شناخت بیشتری را برای
                    طراحان رایانه ای علی الخصوص طراحان خلاقی، و فرهنگ پیشرو در زبان فارسی ایجاد کرد،
                    در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها، و شرایط
                    سخت تایپ به پایان رسد و زمان مورد نیاز شامل حروفچینی دستاوردهای اصلی، و جوابگوی
                    سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد.
                </p>
            </div>
        </div><!-- end tabs:contents:tabTwo -->
    </div><!-- end tabs:contents -->
</div><!-- end tabs container -->