<Card>
  <CardHeader className="d-flex justify-content-between align-items-center">
    <h5>Outline Tabs</h5>
    <a href="#tab2" aria-expanded="false" aria-controls="tab2">
      <IconCode data-source="t2" className="source" size={32} />
    </a>
  </CardHeader>
  <CardBody>
    <Nav tabs className="tab-outline-primary" id="Outline" role="tablist">
      <NavItem role="presentation">
        <NavLink
          className="active"
          id="connect-tab"
          role="tab"
          aria-controls="connect-tab-pane"
          aria-selected="true"
        >
          اتصال
        </NavLink>
      </NavItem>
      <NavItem role="presentation">
        <NavLink
          
          id="discover-tab"
          role="tab"
          aria-controls="discover-tab-pane"
          aria-selected="false"
        >
          کشف
        </NavLink>
      </NavItem>
      <NavItem role="presentation">
        <NavLink
          
          id="order-tab"
          role="tab"
          aria-controls="order-tab-pane"
          aria-selected="false"
        >
          سفارش‌ها
        </NavLink>
      </NavItem>
    </Nav>
    <TabContent className="mt-3" activeTab="outline" id="OutlineContent">
      <TabPane
        tabId="connect"
        role="tabpanel"
        id="connect-tab-pane"
        className="show active"
      >
        <h6 className="mb-1">This is the content of اتصال.</h6>
        <p>این فیلد یک فیلد HTML پیشرفته با ویرایشگر محتوا مشابه سایر بخش‌های Sitefinity است. این بخش از تصاویر، ویدئو، جدول، متن و موارد دیگر پشتیبانی می‌کند. محتوای نمونه برای نمایش ساختار تب‌ها و نحوه نمایش اطلاعات در این قسمت قرار گرفته است.</p>
      </TabPane>
      <TabPane
        tabId="discover"
        role="tabpanel"
        id="discover-tab-pane"
        className=""
      >
        <h6 className="mb-1">This is the content of کشف.</h6>
        <p>این فیلد یک فیلد HTML پیشرفته با ویرایشگر محتوا مشابه سایر بخش‌های Sitefinity است. این بخش از تصاویر، ویدئو، جدول، متن و موارد دیگر پشتیبانی می‌کند. محتوای نمونه برای نمایش ساختار تب‌ها و نحوه نمایش اطلاعات در این قسمت قرار گرفته است.</p>
      </TabPane>
      <TabPane
        tabId="order"
        role="tabpanel"
        id="order-tab-pane"
        className=""
      >
        <h6 className="mb-1">This is the content of سفارش‌ها.</h6>
        <p>این فیلد یک فیلد HTML پیشرفته با ویرایشگر محتوا مشابه سایر بخش‌های Sitefinity است. این بخش از تصاویر، ویدئو، جدول، متن و موارد دیگر پشتیبانی می‌کند. محتوای نمونه برای نمایش ساختار تب‌ها و نحوه نمایش اطلاعات در این قسمت قرار گرفته است.</p>
      </TabPane>
    </TabContent>
  </CardBody>
</Card>

<Card>
  <CardHeader>
    <h5>Light Tabs</h5>
  </CardHeader>
  <CardBody>
    <Nav tabs className="tab-light-primary" id="Light">
      <NavItem>
        <NavLink
          className="active"
          id="description-tab"
          role="tab"
        >
          توضیحات
        </NavLink>
      </NavItem>
      <NavItem>
        <NavLink
          
          id="howowrk-tab"
          role="tab"
        >
          نحوه کار
        </NavLink>
      </NavItem>
      <NavItem>
        <NavLink
          
          id="drawbacks-tab"
          role="tab"
        >
          معایب
        </NavLink>
      </NavItem>
    </Nav>
    <TabContent activeTab="light" className="mt-3" id="LightContent">
      <TabPane
        tabId="description"
        role="tabpanel"
        id="description-tab-pane"
      >
        <p>ایده این است که از شبه‌کلاس <code>:target</code> برای نمایش تب‌ها استفاده شود و با لینک‌هایی که شناسه دارند، بین آن‌ها جابه‌جا شویم. در این روش شبه‌کلاس تب را نمایش داده و لینک‌ها مسئول جابه‌جایی بین تب‌ها هستند.</p>
      </TabPane>
      <TabPane
        tabId="howowrk"
        role="tabpanel"
        id="howowrk-tab-pane"
      >
        <p>1. فقط آخرین تب نمایش داده شود.</p>
        <p>2. اگر <code>:target</code> با یک تب منطبق شود، همان تب نمایش داده شده و تب‌های بعدی مخفی می‌شوند.</p>
        <p>3. تب منطبق نمایش داده شده و بقیه تب‌ها پنهان می‌شوند.</p>
      </TabPane>
      <TabPane
        tabId="drawbacks"
        role="tabpanel"
        id="drawbacks-tab-pane"
      >
        <p>ایده این است که از شبه‌کلاس <code>:target</code> برای نمایش تب‌ها استفاده شود و با لینک‌هایی که شناسه دارند، بین آن‌ها جابه‌جا شویم. این روش از شناسه‌ها برای تغییر تب‌ها و از شبه‌کلاس برای نمایش استفاده می‌کند.</p>
      </TabPane>
    </TabContent>
  </CardBody>
</Card>

<Card>
  <CardHeader className="d-flex justify-content-between align-items-center">
    <h5>Vertical Tabs Left Side</h5>
    <a href="#tab5" aria-expanded="false" aria-controls="tab5">
      <IconCode data-source="t5" className="source" size={32} />
    </a>
  </CardHeader>
  <CardBody className="vertical-tab">
    <Nav tabs className="app-tabs-secondary flex-column" id="v-bg" role="tablist">
      <NavItem role="presentation">
        <NavLink
          className="active"
          id="v-features-tab"
          role="tab"
          aria-controls="v-features-tab-pane"
          aria-selected="true"
        >
          <!-- Icon omitted -->
          ویژگی‌ها
        </NavLink>
      </NavItem>
      <NavItem role="presentation">
        <NavLink
          
          id="v-history-tab"
          role="tab"
          aria-controls="v-history-tab-pane"
          aria-selected="false"
        >
          <!-- Icon omitted -->
          تاریخچه
        </NavLink>
      </NavItem>
      <NavItem role="presentation">
        <NavLink
          
          id="v-reviews-tab"
          role="tab"
          aria-controls="v-reviews-tab-pane"
          aria-selected="false"
        >
          <!-- Icon omitted -->
          نظرات
        </NavLink>
      </NavItem>
    </Nav>
    <TabContent activeTab="v-features" className="mt-3" id="v-bgContent">
      <TabPane
        tabId="v-features"
        role="tabpanel"
        id="v-features-tab-pane"
        className="show active"
      >
        <!-- Content omitted for brevity -->
      </TabPane>
      <TabPane
        tabId="v-history"
        role="tabpanel"
        id="v-history-tab-pane"
        className=""
      >
        <!-- Content omitted for brevity -->
      </TabPane>
      <TabPane
        tabId="v-reviews"
        role="tabpanel"
        id="v-reviews-tab-pane"
        className=""
      >
        <!-- Content omitted for brevity -->
      </TabPane>
    </TabContent>
  </CardBody>
</Card>

<Card>
  <CardHeader className="d-flex justify-content-between align-items-center">
    <h5>Vertical Tabs Right Side</h5>
    <a href="#tab6" aria-expanded="false" aria-controls="tab6">
      <IconCode data-source="t6" className="source" size={32} />
    </a>
  </CardHeader>
  <CardBody className="vertical-right-tab">
    <Nav tabs className="app-tabs-secondary me-0 ms-3 flex-column" id="vl-bg" role="tablist">
      <NavItem role="presentation">
        <NavLink
          className="active"
          id="vl-features-tab"
          role="tab"
          aria-controls="vl-features-tab-pane"
          aria-selected="true"
        >
          <!-- Icon omitted -->
          ویژگی‌ها
        </NavLink>
      </NavItem>
      <NavItem role="presentation">
        <NavLink
          
          id="vl-history-tab"
          role="tab"
          aria-controls="vl-history-tab-pane"
          aria-selected="false"
        >
          <!-- Icon omitted -->
          تاریخچه
        </NavLink>
      </NavItem>
      <NavItem role="presentation">
        <NavLink
          
          id="vl-reviews-tab"
          role="tab"
          aria-controls="vl-reviews-tab-pane"
          aria-selected="false"
        >
          <!-- Icon omitted -->
          نظرات
        </NavLink>
      </NavItem>
    </Nav>
    <TabContent activeTab="vl-features" className="mt-3" id="vl-bgContent">
      <TabPane
        tabId="vl-features"
        role="tabpanel"
        id="vl-features-tab-pane"
        className="show active"
      >
        <!-- Content omitted for brevity -->
      </TabPane>
      <TabPane
        tabId="vl-history"
        role="tabpanel"
        id="vl-history-tab-pane"
        className=""
      >
        <!-- Content omitted for brevity -->
      </TabPane>
      <TabPane
        tabId="vl-reviews"
        role="tabpanel"
        id="vl-reviews-tab-pane"
        className=""
      >
        <!-- Content omitted for brevity -->
      </TabPane>
    </TabContent>
  </CardBody>
</Card>

<Card>
  <CardHeader>
    <h5>Tabs Bottom Side</h5>
  </CardHeader>
  <CardBody className="bottom-tab">
    <Nav tabs className="app-tabs-secondary" id="b-bg" role="tablist">
      <NavItem key="b-features">
        <NavLink
          className="active"
          onClick={() => setActiveTab("b-features")}
          id="b-features-tab"
          type="button"
          role="tab"
          aria-controls="b-features-tab-pane"
          aria-selected="true"
        >
          [object Object]
          ویژگی‌ها
        </NavLink>
      </NavItem>
      <NavItem key="b-history">
        <NavLink
          
          onClick={() => setActiveTab("b-history")}
          id="b-history-tab"
          type="button"
          role="tab"
          aria-controls="b-history-tab-pane"
          aria-selected="false"
        >
          [object Object]
          تاریخچه
        </NavLink>
      </NavItem>
      <NavItem key="b-reviews">
        <NavLink
          
          onClick={() => setActiveTab("b-reviews")}
          id="b-reviews-tab"
          type="button"
          role="tab"
          aria-controls="b-reviews-tab-pane"
          aria-selected="false"
        >
          [object Object]
          نظرات
        </NavLink>
      </NavItem>
    </Nav>
    <TabContent activeTab="b-features" className="mt-3" id="b-bgContent">
      <TabPane
        key="b-features"
        tabId="b-features"
        role="tabpanel"
        id="b-features-tab-pane"
      >
                <p>ایده این است که از شبه‌کلاس :target برای نمایش تب‌ها استفاده شود و با استفاده از لینک‌هایی با شناسه قطعه بین آن‌ها جابه‌جا شویم.</p>
      </TabPane>
      <TabPane
        key="b-history"
        tabId="b-history"
        role="tabpanel"
        id="b-history-tab-pane"
      >
                <p>فقط آخرین تب نمایش داده می‌شود. اگر :target با یک تب مطابقت داشته باشد، همان تب نمایش داده شده و تمام هم‌سطح‌های بعدی مخفی می‌شوند.</p>
      </TabPane>
      <TabPane
        key="b-reviews"
        tabId="b-reviews"
        role="tabpanel"
        id="b-reviews-tab-pane"
      >
                <p>برای نمایش تب‌ها از شبه‌کلاس :target استفاده می‌شود و با لینک‌هایی که شناسه قطعه دارند می‌توان بین آن‌ها جابه‌جا شد.</p>
      </TabPane>
    </TabContent>
  </CardBody>
</Card>

<Card>
  <CardHeader className="d-flex justify-content-between align-items-center">
    <h5>Justify Light Tabs</h5>
    <a href="#justify-LightContent" aria-expanded="false" aria-controls="justify-LightContent">
      <IconCode data-source="t-justify" className="source" size={32} />
    </a>
  </CardHeader>
  <CardBody>
    <Nav tabs className="nav-tabs tab-light-secondary justify-content-around" id="justify-Light" role="tablist">
      <NavItem className="flex-fill text-center" role="presentation">
        <NavLink
          className="active w-100"
          onClick={() => setActiveTab("justify-home")}
          id="justify-home-tab"
          type="button"
          role="tab"
          aria-controls="justify-home-tab-pane"
          aria-selected="true"
        >
          <!-- Icon omitted -->
          خانه
        </NavLink>
      </NavItem>
      <NavItem className="flex-fill text-center" role="presentation">
        <NavLink
          className="w-100"
          onClick={() => setActiveTab("justify-profile")}
          id="justify-profile-tab"
          type="button"
          role="tab"
          aria-controls="justify-profile-tab-pane"
          aria-selected="false"
        >
          <!-- Icon omitted -->
          پروفایل
        </NavLink>
      </NavItem>
      <NavItem className="flex-fill text-center" role="presentation">
        <NavLink
          className="w-100"
          onClick={() => setActiveTab("justify-contact")}
          id="justify-contact-tab"
          type="button"
          role="tab"
          aria-controls="justify-contact-tab-pane"
          aria-selected="false"
        >
          <!-- Icon omitted -->
          تماس
        </NavLink>
      </NavItem>
    </Nav>
    <TabContent activeTab="justify-home" className="pt-3" id="justify-LightContent">
      <TabPane
        tabId="justify-home"
        role="tabpanel"
        id="justify-home-tab-pane"
        aria-labelledby="justify-home-tab"
        className="show active"
      >
                <!-- Content omitted -->
      </TabPane>
      <TabPane
        tabId="justify-profile"
        role="tabpanel"
        id="justify-profile-tab-pane"
        aria-labelledby="justify-profile-tab"
        className=""
      >
                <!-- Content omitted -->
      </TabPane>
      <TabPane
        tabId="justify-contact"
        role="tabpanel"
        id="justify-contact-tab-pane"
        aria-labelledby="justify-contact-tab"
        className=""
      >
                <!-- Content omitted -->
      </TabPane>
    </TabContent>
  </CardBody>
</Card>