- var page_Title = 'Tabs';
- var theme_customizer      = true;
- var sidebar               = true;
- var slick                 = true;
- var header_slider         = true;
- var scrollbar             = true;
- var clipboard             = true;
- var prism                 = true;
- var customcard            = true;
- var height_equal          = true;
doctype html
html(lang='en')
  include ../../components/header-files
  body
    include ../../components/loader
    include ../../components/taptop
    // page-wrapper Start
    #pageWrapper.page-wrapper.compact-wrapper
      include ../../components/header
      // Page Body Start
      .page-body-wrapper
        include ../../components/sidebar
        .page-body
          .container.w-full
            .page-title
              .grid.grid-cols-12.mx-2.items-center
                div(class="col-span-6 sm:col-span-12")
                  h3
                    | Bootstrap Tabs
                div(class="col-span-6 sm:col-span-12")
                  ol.breadcrumb.flex
                    li.breadcrumb-item
                      a(href='index.html')                                        
                        svg.stroke-icon
                          use(href='../assets/svg/icon-sprite.svg#stroke-home')
                    li.breadcrumb-item Tabs
                    li.breadcrumb-item.active Bootstrap Tabs
          // Container-fluid starts                    
          .container
            .grid.grid-cols-12.card-gap
              div(class="col-span-6 xl:col-span-12")
                .card
                  .card-header
                    h5 Simple Tabs
                    p.mt-1.f-m-light
                        | Use 
                        code tab-link
                        |  with 
                        code active
                        |  class to jump particular tabs.
                    .card-header-right
                      ul.list-unstyled.card-option
                        li
                          i.fa-solid.fa-gear.fa-spin
                        li
                          i.view-html.fa-solid.fa-code
                        li
                          i.icofont.icofont-maximize.full-card
                        li
                          i.icofont.icofont-minus.minimize-card
                        li
                          i.icofont.icofont-refresh.reload-card
                        li
                          i.icofont.icofont-error.close-card
                  .card-body.tabs
                    ul.simple-wrapper.flex.tab-links
                      li.txt-primary.tab-link(data-tabfilter="1") Home
                      li.active.txt-primary.tab-link(data-tabfilter="2") Profile
                      li.txt-primary.tab-link(data-tabfilter="3") Contact
                    .tab-content
                      .tab-pan.fade(data-tabcontent="1")
                          p.pt-3
                              | This is some placeholder content the 
                              b Home tab's 
                              | associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav-powered navigation. Bootstrap provides a flexible and easy-to-use tab component that allows developers to create tabbed navigation effortlessly.
                      .tab-pan.fade.show.active(data-tabcontent="2")
                          div.pt-3.mb-0
                              .flex-space.flex-wrap.items-center
                                  img.tab-img(src="../assets/images/avtar/3.jpg", alt="profile") 
                                  ul.flex.flex-col.gap-1
                                    li 
                                        strong Visit Us:
                                        |  2600 Hollywood Blvd,Florida, United States-33020
                                    li 
                                        strong Mail Us:
                                        |  contact@us@gmail.com
                                    li
                                        strong Contact Number: 
                                        |  (954) 357-7760
                      .tab-pan.fade(data-tabcontent="3")
                          ul.pt-3.flex.flex-col.gap-1
                            li
                                | Us Technology offers web & mobile development solutions for all industry verticals.Include a short form using fields that'll help your business understand who's contacting them.
                            li 
                                strong Visit Us: 
                                |  2600 Hollywood Blvd,Florida, United States-	33020
                            li 
                                strong Mail Us:
                                |  contact@us@gmail.com
                            li 
                                strong Contact Number: 
                                |  (954) 357-7760
                    .code-box-copy
                      button.code-box-copy__btn.btn-clipboard(data-clipboard-target='#simple-tabs', title='Copy')
                        i.icofont.icofont-copy-alt
                      pre.custom-scrollbar
                        code.language-html#simple-tabs
                          |&lt;ul class="simple-wrapper nav nav-tabs" id="myTab" role="tablist"&gt;
                          |  &lt;li class="nav-item"&gt;&lt;a class="nav-link txt-primary" id="home-tab" data-bs-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true"&gt;Home&lt;/a&gt;&lt;/li&gt;
                          |  &lt;li class="nav-item"&gt;&lt;a class="nav-link active txt-primary" id="profile-tabs" data-bs-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false"&gt;Profile&lt;/a&gt;&lt;/li&gt;
                          |  &lt;li class="nav-item"&gt;&lt;a class="nav-link txt-primary" id="contact-tab" data-bs-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false"&gt;Contact&lt;/a&gt;&lt;/li&gt;
                          |&lt;/ul&gt;
                          |&lt;div class="tab-content" id="myTabContent"&gt;
                          |  &lt;div class="tab-pane fade" id="home" role="tabpanel" aria-labelledby="home-tab"&gt;
                          |    &lt;p class="pt-3"&gt;This is some placeholder content the&lt;b&gt;Home tab's&lt;/b&gt;associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav-powered navigation. Bootstrap provides a flexible and easy-to-use tab component that allows developers to create tabbed navigation effortlessly.&lt;/p&gt;
                          |  &lt;/div&gt;
                          |  &lt;div class="tab-pane fade show active" id="profile" role="tabpanel" aria-labelledby="profile-tabs"&gt;
                          |    &lt;div class="pt-3 mb-0"&gt;
                          |      &lt;div class="flex-space flex-wrap align-items-center"&gt;&lt;img class="tab-img" src="../assets/images/avtar/3.jpg" alt="profile"&gt;
                          |        &lt;ul class="flex flex-col gap-1"&gt;
                          |          &lt;li&gt;
                          |            &lt;strong&gt;Visit Us:&lt;/strong&gt;2600 Hollywood Blvd,Florida, United States-33020
                          |          &lt;/li&gt;
                          |          &lt;li&gt;
                          |            &lt;strong&gt;Mail Us:&lt;/strong&gt;contact@us@gmail.com
                          |          &lt;/li&gt;
                          |          &lt;li&gt;
                          |            &lt;strong&gt;Contact Number:&lt;/strong&gt;(954) 357-7760
                          |          &lt;/li&gt;
                          |        &lt;/ul&gt;
                          |      &lt;/div&gt;
                          |    &lt;/div&gt;
                          |  &lt;/div&gt;
                          |  &lt;div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab"&gt;
                          |    &lt;ul class="pt-3 flex flex-col gap-1"&gt;
                          |      &lt;li&gt;Us Technology offers web & mobile development solutions for all industry verticals.Include a short form using fields that'll help your business understand who's contacting them.&lt;/li&gt;
                          |      &lt;li&gt;
                          |        &lt;strong&gt;Visit Us:&lt;/strong&gt;2600 Hollywood Blvd,Florida, United States-33020
                          |      &lt;/li&gt;
                          |      &lt;li&gt;
                          |        &lt;strong&gt;Mail Us:&lt;/strong&gt;contact@us@gmail.com
                          |      &lt;/li&gt;
                          |      &lt;li&gt;
                          |        &lt;strong&gt;Contact Number:&lt;/strong&gt;(954) 357-7760
                          |      &lt;/li&gt;
                          |    &lt;/ul&gt;
                          |  &lt;/div&gt;
                          |&lt;/div&gt;

              div(class="col-span-6 xl:col-span-12")
                .card
                  .card-header
                    h5 Icons with Tabs
                    p.mt-1.f-m-light
                      | Use 
                      code tab-link
                      | with 
                      code active 
                      | class to switch particular tabs and with 
                      code "Ico" 
                      | icons you can take 
                      code "tab".
                    .card-header-right
                      ul.list-unstyled.card-option
                        li
                          i.fa-solid.fa-gear.fa-spin
                        li
                          i.view-html.fa-solid.fa-code
                        li
                          i.icofont.icofont-maximize.full-card
                        li
                          i.icofont.icofont-minus.minimize-card
                        li
                          i.icofont.icofont-refresh.reload-card
                        li
                          i.icofont.icofont-error.close-card
                  .card-body.tabs
                    ul.simple-wrapper.flex.tab-links
                      li.active.txt-secondary.tab-link(data-tabfilter="1") 
                        i.icofont.icofont-ui-home
                        | Home
                      li.txt-secondary.tab-link(data-tabfilter="2")
                        i.icofont.icofont-man-in-glasses
                        | Profile
                      li.txt-secondary.tab-link(data-tabfilter="3")
                        i.icofont.icofont-contacts
                        | Contact
                    .tab-content
                      .tab-pan.fade.show.active(data-tabcontent="1")
                          p.pt-3
                              |  This is some placeholder content the 
                              b home tab's
                              |  associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav-powered navigation. Bootstrap provides a flexible and easy-to-use tab component that allows developers to create tabbed navigation effortlessly.
                      .tab-pan.fade(data-tabcontent="2")
                          div.pt-3.mb-0
                              .flex-space.flex-wrap.items-center
                                  img.tab-img(src="../assets/images/avtar/7.jpg", alt="profile") 
                                  ul.flex.flex-col.gap-1
                                    li 
                                        strong Visit Us:  
                                        |  278 Green Avenue Oakland, CA 94612
                                    li
                                        strong Mail Us:
                                        |  MichaelMMcGowan@teleworm.us
                                    li
                                        strong Contact Number: 
                                        |  510-767-0025
                      .tab-pan.fade(data-tabcontent="3")
                        p.pt-3
                            | Us Technology offers web & mobile development solutions for all industry verticals.Include a short form using fields that'll help your business understand who's contacting them. 
                        label.form-label(for='exampleFormControlone') Email Address
                        input#exampleFormControlone.form-control(type='email' placeholder='youremail@gmail.com')
                    .code-box-copy
                      button.code-box-copy__btn.btn-clipboard(data-clipboard-target='#icon-tab-copy', title='Copy')
                        i.icofont.icofont-copy-alt
                      pre.custom-scrollbar
                        code.language-html#icon-tab-copy
                          |&lt;ul class="nav nav-tabs" id="icon-tab" role="tablist"&gt;
                          |  &lt;li class="nav-item"&gt;
                          |    &lt;a class="nav-link active txt-secondary" id="icon-home-tab" data-bs-toggle="tab" href="#icon-home" role="tab" aria-controls="icon-home" aria-selected="true"&gt;
                          |      &lt;i class="icofont icofont-ui-home"&gt;&lt;/i&gt;Home
                          |    &lt;/a&gt;
                          |  &lt;/li&gt;
                          |  &lt;li class="nav-item"&gt;
                          |    &lt;a class="nav-link txt-secondary" id="profile-icon-tabs" data-bs-toggle="tab" href="#profile-icon" role="tab" aria-controls="profile-icon" aria-selected="false"&gt;
                          |      &lt;i class="icofont icofont-man-in-glasses"&gt;&lt;/i&gt;Profile
                          |    &lt;/a&gt;
                          |  &lt;/li&gt;
                          |  &lt;li class="nav-item"&gt;
                          |    &lt;a class="nav-link txt-secondary" id="contact-icon-tab" data-bs-toggle="tab" href="#contact-icon" role="tab" aria-controls="contact-icon" aria-selected="false"&gt;
                          |      &lt;i class="icofont icofont-contacts"&gt;&lt;/i&gt;Contact
                          |    &lt;/a&gt;
                          |  &lt;/li&gt;
                          |&lt;/ul&gt;
                          |&lt;div class="tab-content" id="icon-tabContent"&gt;
                          |  &lt;div class="tab-pane fade show active" id="icon-home" role="tabpanel" aria-labelledby="icon-home-tab"&gt;
                          |    &lt;p class="pt-3"&gt;This is some placeholder content the&lt;b&gt;home tab's&lt;/b&gt;associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav-powered navigation. Bootstrap provides a flexible and easy-to-use tab component that allows developers to create tabbed navigation effortlessly.&lt;/p&gt;
                          |  &lt;/div&gt;
                          |  &lt;div class="tab-pane fade" id="profile-icon" role="tabpanel" aria-labelledby="profile-icon-tabs"&gt;
                          |    &lt;div class="pt-3 mb-0"&gt;
                          |      &lt;div class="flex-space flex-wrap align-items-center"&gt;
                          |        &lt;img class="tab-img" src="../assets/images/avtar/7.jpg" alt="profile"&gt;
                          |        &lt;ul class="flex flex-col gap-1"&gt;
                          |          &lt;li&gt;
                          |            &lt;strong&gt;Visit Us:&lt;/strong&gt;278 Green Avenue Oakland, CA 94612
                          |          &lt;/li&gt;
                          |          &lt;li&gt;
                          |            &lt;strong&gt;Mail Us:&lt;/strong&gt;MichaelMMcGowan@teleworm.us
                          |          &lt;/li&gt;
                          |          &lt;li&gt;
                          |            &lt;strong&gt;Contact Number:&lt;/strong&gt;510-767-0025
                          |          &lt;/li&gt;
                          |        &lt;/ul&gt;
                          |      &lt;/div&gt;
                          |    &lt;/div&gt;
                          |  &lt;/div&gt;
                          |  &lt;div class="tab-pane fade" id="contact-icon" role="tabpanel" aria-labelledby="contact-icon-tab"&gt;
                          |    &lt;p class="pt-3"&gt;Us Technology offers web & mobile development solutions for all industry verticals.Include a short form using fields that'll help your business understand who's contacting them.&lt;/p&gt;
                          |    &lt;label class="form-label" for="exampleFormControlone"&gt;Email Address&lt;/label&gt;
                          |    &lt;input class="form-control" id="exampleFormControlone" type="email" placeholder="youremail@gmail.com"&gt;
                          |  &lt;/div&gt;
                          |&lt;/div&gt;

              div(class="col-span-6 xxl:col-span-12")
                .card.height-equal
                  .card-header
                    h5 Vertical Tabs
                    p.mt-1.f-m-light
                        | Use 
                        code #var-pills-tab
                        |  id to change vertical tabs.
                    .card-header-right
                      ul.list-unstyled.card-option
                        li
                          i.fa-solid.fa-gear.fa-spin
                        li
                          i.view-html.fa-solid.fa-code
                        li
                          i.icofont.icofont-maximize.full-card
                        li
                          i.icofont.icofont-minus.minimize-card
                        li
                          i.icofont.icofont-refresh.reload-card
                        li
                          i.icofont.icofont-error.close-card
                  .card-body.main-vertical-tab
                    .grid.grid-cols-12.card-gap.tabs
                      div(class="col-span-4 md:col-span-12 col-xs-12")
                        .tab-links.nav-pills.flex.flex-col.nav-secondary
                          a.tab-link(data-tabfilter="1") Home
                          a.tab-link.active(data-tabfilter="2") Components
                          a.tab-link(data-tabfilter="3") Pages
                            span.badge.badge-light-light.p-1.px-2 3
                          a.tab-link(data-tabfilter="4") Settings
                      div(class="col-span-8 md:col-span-12 col-xs-12")
                        .tab-content
                          .tab-pan.fade(data-tabcontent="1")
                              p
                                | This is some placeholder content the 
                                b Home tab's 
                                |  associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other 
                                b .nav
                                | -powered navigation.
                          .tab-pan.fade.show.active(data-tabcontent="2")
                              p
                                | This is some placeholder content the 
                                b Component tab's 
                                |  associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other 
                                b .nav
                                | -powered navigation.
                          .tab-pan.fade(data-tabcontent="3")
                              p
                                | This is some placeholder content the 
                                b Page tab's 
                                |  associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other 
                                b .nav
                                | -powered navigation.
                          .tab-pan.fade(data-tabcontent="4")
                                  p
                                      | This is some placeholder content the 
                                      b Setting tab's 
                                      |  associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other 
                                      b .nav
                                      | -powered navigation.
                    .code-box-copy
                      button.code-box-copy__btn.btn-clipboard(data-clipboard-target='#vertical-tab-copy', title='Copy')
                        i.icofont.icofont-copy-alt
                      pre.custom-scrollbar
                        code.language-html#vertical-tab-copy
                          |&lt;div class="grid grid-cols-12"&gt;    
                          |  &lt;div class="col-span-4 md:col-span-12"&gt;
                          |    &lt;div class="nav flex-col nav-pills nav-secondary" id="ver-pills-tab" role="tablist" aria-orientation="vertical"&gt;&lt;a class="nav-link" id="ver-pills-home-tab" data-bs-toggle="pill" href="#ver-pills-home" role="tab" aria-controls="ver-pills-home" aria-selected="true"&gt;Home&lt;/a&gt;&lt;a class="nav-link active" id="ver-pills-components-tab" data-bs-toggle="pill" href="#ver-pills-components" role="tab" aria-controls="ver-pills-components" aria-selected="false"&gt;Components&lt;/a&gt;&lt;a class="nav-link" id="ver-pills-pages-tab" data-bs-toggle="pill" href="#ver-pills-pages" role="tab" aria-controls="ver-pills-pages" aria-selected="false"&gt;Pages&lt;span class="badge badge-light-light p-1 px-2"&gt;3&lt;/span&gt;&lt;/a&gt;&lt;a class="nav-link" id="ver-pills-settings-tab" data-bs-toggle="pill" href="#ver-pills-settings" role="tab" aria-controls="ver-pills-settings" aria-selected="false"&gt;Settings&lt;/a&gt;&lt;/div&gt;
                          |  &lt;/div&gt;
                          |  &lt;div class="col-span-8 md:col-span-12"&gt;
                          |    &lt;div class="tab-content" id="ver-pills-tabContent"&gt;
                          |      &lt;div class="tab-pane fade" id="ver-pills-home" role="tabpanel" aria-labelledby="ver-pills-home-tab"&gt;
                          |        &lt;p&gt;This is some placeholder content the&lt;b&gt;Home tab's&lt;/b&gt;associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other&lt;b&gt;.nav&lt;/b&gt;-powered navigation.&lt;/p&gt;
                          |      &lt;/div&gt;
                          |      &lt;div class="tab-pane fade show active" id="ver-pills-components" role="tabpanel" aria-labelledby="ver-pills-components-tab"&gt;
                          |        &lt;p&gt;This is some placeholder content the&lt;b&gt;Component tab's&lt;/b&gt;associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other&lt;b&gt;.nav&lt;/b&gt;-powered navigation.&lt;/p&gt;
                          |      &lt;/div&gt;
                          |      &lt;div class="tab-pane fade" id="ver-pills-pages" role="tabpanel" aria-labelledby="ver-pills-pages-tab"&gt;
                          |        &lt;p&gt;This is some placeholder content the&lt;b&gt;Page tab's&lt;/b&gt;associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other&lt;b&gt;.nav&lt;/b&gt;-powered navigation.&lt;/p&gt;
                          |      &lt;/div&gt;
                          |      &lt;div class="tab-pane fade" id="ver-pills-settings" role="tabpanel" aria-labelledby="ver-pills-settings-tab"&gt;
                          |        &lt;p&gt;This is some placeholder content the&lt;b&gt;Setting tab's&lt;/b&gt;associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other&lt;b&gt;.nav&lt;/b&gt;-powered navigation.&lt;/p&gt;
                          |      &lt;/div&gt;
                          |    &lt;/div&gt;
                          |  &lt;/div&gt;
                          |&lt;/div&gt;
      
              div(class="col-span-6 xxl:col-span-12")
                .card.height-equal
                  .card-header
                    h5 Pills Tabs
                    p.mt-1.f-m-light
                        | Use 
                        code data-bs-toggle="pill"
                        |  for tabs pill shape.
                    .card-header-right
                      ul.list-unstyled.card-option
                        li
                          i.fa-solid.fa-gear.fa-spin
                        li
                          i.view-html.fa-solid.fa-code
                        li
                          i.icofont.icofont-maximize.full-card
                        li
                          i.icofont.icofont-minus.minimize-card
                        li
                          i.icofont.icofont-refresh.reload-card
                        li
                          i.icofont.icofont-error.close-card
                  .card-body.tabs
                    .tab-links.flex.nav-primary
                      li.tab-link.block(data-tabfilter="1")
                              | About us
                      li.tab-link.block(data-tabfilter="2") Contact us
                      li.tab-link.block.active(data-tabfilter="3") Blog 
                    .tab-content
                      .tab-pan.fade(data-tabcontent="1")
                          p.pt-3
                              | The ultimate goal of every web design is to create a site that will reach its audience and be useful to them. In order to achieve that, it is necessary to befriend Google's mechanisms and algorithms. There is no use of a pretty website, if it's displayed on a 10th page of search results, because this way no one will ever find it. That brings us to the topic of Google's Website Ranking.Generally speaking, it's a list of pages and their keywords, sorted in the order of search results. The higher your place in the ranking is, the more people are likely to see your page.
                      .tab-pan.fade(data-tabcontent="2")
                          ul.flex.flex-col.gap-1.pt-3
                            li
                                |  Create professional web page design. Responsive, fully customizable with easy drag-n-drop nice page editor. Adjust colors, fonts, header and footer, layout and other design elements, as well as content and images.
                            li
                                strong Visit Us: 
                                |  4 Marigold Close, Glenmore Park, New South Wales, 2745 Australia- 2745
                            li 
                                strong Mail Us:
                                |  SamuelMario@armyspy.com
                            li 
                                strong Contact Number: 
                                |  (02) 4733 6337
                      .tab-pan.fade.show.active(data-tabcontent="3")
                          .pt-3.flex.items-center.gap-3.pills-blogger(class="[@media(max-width:576px)]:justify-center [@media(max-width:576px)]:flex-wrap")
                              .blog-wrapper 
                                  img.blog-img(src="../assets/images/dashboard-2/headphones.png", alt="head-phone")
                              .blog-content(class="[@media(max-width:576px)]:W-[unset]")
                                  p 
                                    strong Smart headphones
                                    |   — also called smart earbuds or hearable — are high-tech in-ear devices that do more than transmit audio. These headphones are usually wireless, and they can sync up with your phone, tablet, computer or other Bluetooth-enabled device. The main appeal of hearables is convenience, as they allow you to complete common tasks without directly accessing your phone or computer. Smart wireless headphones sync up to other devices using Bluetooth technology, and many of their features rely on data from your smartphone or computer.
                    .code-box-copy
                      button.code-box-copy__btn.btn-clipboard(data-clipboard-target='#pills-tab-copy', title='Copy')
                        i.icofont.icofont-copy-alt
                      pre.custom-scrollbar
                        code.language-html#pills-tab-copy
                          |&lt;ul class="nav nav-pills nav-primary" id="pills-tab" role="tablist"&gt;
                          |  &lt;li class="nav-item"&gt;
                          |    &lt;a class="nav-link" id="pills-aboutus-tab" data-bs-toggle="pill" href="#pills-aboutus" role="tab" aria-controls="pills-aboutus" aria-selected="true"&gt;About us
                          |    &lt;/a&gt;
                          |  &lt;/li&gt;
                          |  &lt;li class="nav-item"&gt;
                          |    &lt;a class="nav-link" id="pills-contactus-tab" data-bs-toggle="pill" href="#pills-contactus" role="tab" aria-controls="pills-contactus" aria-selected="false"&gt;Contact us
                          |    &lt;/a&gt;
                          |  &lt;/li&gt;
                          |  &lt;li class="nav-item"&gt;
                          |    &lt;a class="nav-link active" id="pills-blog-tab" data-bs-toggle="pill" href="#pills-blog" role="tab" aria-controls="pills-blog" aria-selected="false"&gt;Blog
                          |    &lt;/a&gt;
                          |  &lt;/li&gt;
                          |&lt;/ul&gt;
                          |&lt;div class="tab-content" id="pills-tabContent"&gt;
                          |  &lt;div class="tab-pane fade" id="pills-aboutus" role="tabpanel" aria-labelledby="pills-aboutus-tab"&gt;
                          |    &lt;p class="pt-3"&gt;The ultimate goal of every web design is to create a site that will reach its audience and be useful to them. In order to achieve that, it is necessary to befriend Google's mechanisms and algorithms. There is no use of a pretty website, if it's displayed on a 10th page of search results, because this way no one will ever find it. That brings us to the topic of Google's Website Ranking.Generally speaking, it's a list of pages and their keywords, sorted in the order of search results. The higher your place in the ranking is, the more people are likely to see your page.&lt;/p&gt;
                          |  &lt;/div&gt;
                          |  &lt;div class="tab-pane fade" id="pills-contactus" role="tabpanel" aria-labelledby="pills-contactus-tab"&gt;
                          |    &lt;ul class="flex flex-col gap-1 pt-3"&gt;
                          |      &lt;li&gt;Create professional web page design. Responsive, fully customizable with easy drag-n-drop nice page editor. Adjust colors, fonts, header and footer, layout and other design elements, as well as content and images.&lt;/li&gt;
                          |      &lt;li&gt;
                          |        &lt;strong&gt;Visit Us:&lt;/strong&gt;4 Marigold Close, Glenmore Park, New South Wales, 2745 Australia- 2745
                          |      &lt;/li&gt;
                          |      &lt;li&gt;
                          |        &lt;strong&gt;Mail Us:&lt;/strong&gt;SamuelMario@armyspy.com
                          |      &lt;/li&gt;
                          |      &lt;li&gt;
                          |        &lt;strong&gt;Contact Number:&lt;/strong&gt;(02) 4733 6337
                          |      &lt;/li&gt;
                          |    &lt;/ul&gt;
                          |  &lt;/div&gt;
                          |  &lt;div class="tab-pane fade show active" id="pills-blog" role="tabpanel" aria-labelledby="pills-blog-tab"&gt;
                          |    &lt;div class="pt-3 flex align-items-center gap-3 pills-blogger"&gt; 
                          |      &lt;div class="blog-wrapper"&gt;
                          |        &lt;img class="blog-img" src="../assets/images/dashboard-2/headphones.png" alt="head-phone"&gt;
                          |      &lt;/div&gt;
                          |      &lt;div class="blog-content"&gt; 
                          |        &lt;p&gt;
                          |          &lt;strong&gt;Smart headphones&lt;/strong&gt; — also called smart earbuds or hearable — are high-tech in-ear devices that do more than transmit audio. These headphones are usually wireless, and they can sync up with your phone, tablet, computer or other Bluetooth-enabled device. The main appeal of hearables is convenience, as they allow you to complete common tasks without directly accessing your phone or computer. Smart wireless headphones sync up to other devices using Bluetooth technology, and many of their features rely on data from your smartphone or computer.
                          |        &lt;/p&gt;
                          |      &lt;/div&gt;
                          |    &lt;/div&gt;
                          |  &lt;/div&gt;
                          |&lt;/div&gt;
    
              div(class="col-span-6 xxl:col-span-12") 
                .card 
                  .card-header
                    h5 Justify Tabs
                    p.mt-1.f-m-light
                        | Use 
                        code nav-link
                        |  with 
                        code active 
                        | class and set content using flex property.
                    .card-header-right
                      ul.list-unstyled.card-option
                        li
                          i.fa-solid.fa-gear.fa-spin
                        li
                          i.view-html.fa-solid.fa-code
                        li
                          i.icofont.icofont-maximize.full-card
                        li
                          i.icofont.icofont-minus.minimize-card
                        li
                          i.icofont.icofont-refresh.reload-card
                        li
                          i.icofont.icofont-error.close-card
                  .card-body.tabs
                    .card-header.flex.justify-between.items-center.flex-wrap.gap-2.p-0(class="!pb-2")
                      p CUBA Profiles For New Employees:
                      .tab-links.flex.nav-primary
                        li.tab-link.block(data-tabfilter="1")  Web designer
                        li.tab-link.block.active(data-tabfilter="2") UX designer
                        li.tab-link.block(data-tabfilter="3") IOT developer
                    .card-body.px-0.pb-0 
                      .tab-content
                        .tab-pan.fade(data-tabcontent="1")
                            .designer-details
                                .designer-profile 
                                    .designer-wrap
                                        img.designer-img(src="../assets/images/user/3.png", alt="profile")
                                        .designer-content 
                                            h6 Kathy M. Anderson
                                            p 440-494-0729
                                .designer-profile 
                                    .designer-wrap
                                        img.designer-img(src="../assets/images/avtar/4.jpg", alt="profile")
                                        .designer-content 
                                            h6 Lillian J. Goodfellow
                                            p 239-664-7751
                                .designer-profile 
                                    .designer-wrap
                                        img.designer-img(src="../assets/images/user/2.jpg", alt="profile")
                                        .designer-content 
                                            h6 Carolyn A. Sutton
                                            p 218-793-6609
                                .designer-profile 
                                    .designer-wrap
                                        img.designer-img(src="../assets/images/avtar/11.jpg", alt="profile")
                                        .designer-content 
                                            h6 Mary O. Miller
                                            p 720-744-0921
                                .designer-profile 
                                    .designer-wrap
                                        img.designer-img(src="../assets/images/avtar/16.jpg", alt="profile")
                                        .designer-content 
                                            h6 Patricia H. Hummel
                                            p 314-445-1451
                                .designer-profile 
                                    .designer-wrap
                                        img.designer-img(src="../assets/images/blog/4.jpg", alt="profile")
                                        .designer-content 
                                            h6 Minnie F. Evans
                                            p 718-740-8438
                        .tab-pan.fade.show.active(data-tabcontent="2")
                            .designer-details
                                .designer-profile 
                                    .designer-wrap
                                        img.designer-img(src="../assets/images/dashboard-11/user/1.jpg", alt="profile")
                                        .designer-content 
                                            h6 Thomas A. Leroy
                                            p 305-539-6871
                                .designer-profile 
                                    .designer-wrap
                                        img.designer-img(src="../assets/images/dashboard-11/user/4.jpg", alt="profile")
                                        .designer-content 
                                            h6 Mark S. Ward
                                            p 303-561-8880
                                .designer-profile 
                                    .designer-wrap
                                        img.designer-img(src="../assets/images/dashboard-11/user/2.jpg", alt="profile")
                                        .designer-content 
                                            h6 Emily T. Hooper
                                            p 301-553-1836
                                .designer-profile 
                                    .designer-wrap
                                        img.designer-img(src="../assets/images/dashboard-11/user/7.jpg", alt="profile")
                                        .designer-content 
                                            h6 Natasha W. Watson
                                            p 267-605-4499
                                .designer-profile 
                                    .designer-wrap
                                        img.designer-img(src="../assets/images/dashboard-11/user/10.jpg", alt="profile")
                                        .designer-content 
                                            h6 Jennifer A. Camacho
                                            p 770-527-7554
                                .designer-profile 
                                    .designer-wrap
                                        img.designer-img(src="../assets/images/dashboard-11/user/11.jpg", alt="profile")
                                        .designer-content 
                                            h6 Ann J. Strickland
                                            p 469-218-4678
                        .tab-pan.fade(data-tabcontent="3")
                              .designer-details
                                  .designer-profile 
                                      .designer-wrap
                                          img.designer-img(src="../assets/images/dashboard-11/user/3.jpg", alt="profile")
                                          .designer-content 
                                              h6 Jaclyn T. Duncan
                                              p 413-618-9222
                                  .designer-profile 
                                      .designer-wrap
                                          img.designer-img(src="../assets/images/dashboard-11/user/8.jpg", alt="profile")
                                          .designer-content 
                                              h6 Christine H. Lin
                                              p 909-219-0342
                                  .designer-profile 
                                      .designer-wrap
                                          img.designer-img(src="../assets/images/dashboard-11/user/12.jpg", alt="profile")
                                          .designer-content 
                                              h6 Ronnie S. Mountain
                                              p 978-426-9732
                                  .designer-profile 
                                      .designer-wrap
                                          img.designer-img(src="../assets/images/dashboard-11/user/5.jpg", alt="profile")
                                          .designer-content 
                                              h6 Louise A. Hilliard
                                              p 502-262-5600
                                  .designer-profile 
                                      .designer-wrap
                                          img.designer-img(src="../assets/images/dashboard-9/user/3.png", alt="profile")
                                          .designer-content 
                                              h6 Kayla Hutt
                                              p 312-456-8275
                                  .designer-profile 
                                      .designer-wrap
                                          img.designer-img(src="../assets/images/dashboard-11/user/9.jpg", alt="profile")
                                          .designer-content 
                                              h6 Amber Cecil
                                              p 802-662-2407
                    .code-box-copy
                      button.code-box-copy__btn.btn-clipboard(data-clipboard-target='#justify-tab-copy', title='Copy')
                        i.icofont.icofont-copy-alt
                      pre.custom-scrollbar
                        code.language-html#justify-tab-copy
                          |&lt;div class="tab-content" id="j-pills-tabContent"&gt;
                          |  &lt;div class="tab-pane fade" id="j-pills-web-designer" role="tabpanel" aria-labelledby="j-pills-web-designer-tab"&gt;
                          |    &lt;div class="designer-details"&gt;
                          |      &lt;div class="designer-profile"&gt; 
                          |        &lt;div class="designer-wrap"&gt;&lt;img class="designer-img" src="../assets/images/user/3.png" alt="profile"&gt;
                          |          &lt;div class="designer-content"&gt; 
                          |            &lt;h6&gt;Kathy M. Anderson&lt;/h6&gt;
                          |            &lt;p&gt;440-494-0729&lt;/p&gt;
                          |          &lt;/div&gt;
                          |        &lt;/div&gt;
                          |      &lt;/div&gt;
                          |      &lt;div class="designer-profile"&gt; 
                          |        &lt;div class="designer-wrap"&gt;&lt;img class="designer-img" src="../assets/images/avtar/4.jpg" alt="profile"&gt;
                          |          &lt;div class="designer-content"&gt; 
                          |            &lt;h6&gt;Lillian J. Goodfellow&lt;/h6&gt;
                          |            &lt;p&gt;239-664-7751&lt;/p&gt;
                          |          &lt;/div&gt;
                          |        &lt;/div&gt;
                          |      &lt;/div&gt;
                          |      &lt;div class="designer-profile"&gt; 
                          |        &lt;div class="designer-wrap"&gt;&lt;img class="designer-img" src="../assets/images/user/2.jpg" alt="profile"&gt;
                          |          &lt;div class="designer-content"&gt; 
                          |            &lt;h6&gt;Carolyn A. Sutton&lt;/h6&gt;
                          |            &lt;p&gt;218-793-6609&lt;/p&gt;
                          |          &lt;/div&gt;
                          |        &lt;/div&gt;
                          |      &lt;/div&gt;
                          |      &lt;div class="designer-profile"&gt; 
                          |        &lt;div class="designer-wrap"&gt;&lt;img class="designer-img" src="../assets/images/avtar/11.jpg" alt="profile"&gt;
                          |          &lt;div class="designer-content"&gt; 
                          |            &lt;h6&gt;Mary O. Miller&lt;/h6&gt;
                          |            &lt;p&gt;720-744-0921&lt;/p&gt;
                          |          &lt;/div&gt;
                          |        &lt;/div&gt;
                          |      &lt;/div&gt;
                          |      &lt;div class="designer-profile"&gt; 
                          |        &lt;div class="designer-wrap"&gt;&lt;img class="designer-img" src="../assets/images/avtar/16.jpg" alt="profile"&gt;
                          |          &lt;div class="designer-content"&gt; 
                          |            &lt;h6&gt;Patricia H. Hummel&lt;/h6&gt;
                          |            &lt;p&gt;314-445-1451&lt;/p&gt;
                          |          &lt;/div&gt;
                          |        &lt;/div&gt;
                          |      &lt;/div&gt;
                          |      &lt;div class="designer-profile"&gt; 
                          |        &lt;div class="designer-wrap"&gt;&lt;img class="designer-img" src="../assets/images/blog/4.jpg" alt="profile"&gt;
                          |          &lt;div class="designer-content"&gt; 
                          |            &lt;h6&gt;Minnie F. Evans&lt;/h6&gt;
                          |            &lt;p&gt;718-740-8438&lt;/p&gt;
                          |          &lt;/div&gt;
                          |        &lt;/div&gt;
                          |      &lt;/div&gt;
                          |    &lt;/div&gt;
                          |  &lt;/div&gt;
                          |  &lt;div class="tab-pane fade show active" id="j-pills-UX-designer" role="tabpanel" aria-labelledby="j-pills-UX-designer-tab"&gt;
                          |    &lt;div class="designer-details"&gt;
                          |      &lt;div class="designer-profile"&gt; 
                          |        &lt;div class="designer-wrap"&gt;&lt;img class="designer-img" src="../assets/images/dashboard-11/user/1.jpg" alt="profile"&gt;
                          |          &lt;div class="designer-content"&gt; 
                          |            &lt;h6&gt;Thomas A. Leroy&lt;/h6&gt;
                          |            &lt;p&gt;305-539-6871&lt;/p&gt;
                          |          &lt;/div&gt;
                          |        &lt;/div&gt;
                          |      &lt;/div&gt;
                          |      &lt;div class="designer-profile"&gt; 
                          |        &lt;div class="designer-wrap"&gt;&lt;img class="designer-img" src="../assets/images/dashboard-11/user/4.jpg" alt="profile"&gt;
                          |          &lt;div class="designer-content"&gt; 
                          |            &lt;h6&gt;Mark S. Ward&lt;/h6&gt;
                          |            &lt;p&gt;303-561-8880&lt;/p&gt;
                          |          &lt;/div&gt;
                          |        &lt;/div&gt;
                          |      &lt;/div&gt;
                          |      &lt;div class="designer-profile"&gt; 
                          |        &lt;div class="designer-wrap"&gt;&lt;img class="designer-img" src="../assets/images/dashboard-11/user/2.jpg" alt="profile"&gt;
                          |          &lt;div class="designer-content"&gt; 
                          |            &lt;h6&gt;Emily T. Hooper&lt;/h6&gt;
                          |            &lt;p&gt;301-553-1836&lt;/p&gt;
                          |          &lt;/div&gt;
                          |        &lt;/div&gt;
                          |      &lt;/div&gt;
                          |      &lt;div class="designer-profile"&gt; 
                          |        &lt;div class="designer-wrap"&gt;&lt;img class="designer-img" src="../assets/images/dashboard-11/user/7.jpg" alt="profile"&gt;
                          |          &lt;div class="designer-content"&gt; 
                          |            &lt;h6&gt;Natasha W. Watson&lt;/h6&gt;
                          |            &lt;p&gt;267-605-4499&lt;/p&gt;
                          |          &lt;/div&gt;
                          |        &lt;/div&gt;
                          |      &lt;/div&gt;
                          |      &lt;div class="designer-profile"&gt; 
                          |        &lt;div class="designer-wrap"&gt;&lt;img class="designer-img" src="../assets/images/dashboard-11/user/10.jpg" alt="profile"&gt;
                          |          &lt;div class="designer-content"&gt; 
                          |            &lt;h6&gt;Jennifer A. Camacho&lt;/h6&gt;
                          |            &lt;p&gt;770-527-7554&lt;/p&gt;
                          |          &lt;/div&gt;
                          |        &lt;/div&gt;
                          |      &lt;/div&gt;
                          |      &lt;div class="designer-profile"&gt; 
                          |        &lt;div class="designer-wrap"&gt;&lt;img class="designer-img" src="../assets/images/dashboard-11/user/11.jpg" alt="profile"&gt;
                          |          &lt;div class="designer-content"&gt; 
                          |            &lt;h6&gt;Ann J. Strickland&lt;/h6&gt;
                          |            &lt;p&gt;469-218-4678&lt;/p&gt;
                          |          &lt;/div&gt;
                          |        &lt;/div&gt;
                          |      &lt;/div&gt;
                          |    &lt;/div&gt;
                          |  &lt;/div&gt;
                          |  &lt;div class="tab-pane fade" id="j-pills-IOT-developer" role="tabpanel" aria-labelledby="j-pills-IOT-developer-tab"&gt;
                          |    &lt;div class="designer-details"&gt;
                          |      &lt;div class="designer-profile"&gt; 
                          |        &lt;div class="designer-wrap"&gt;&lt;img class="designer-img" src="../assets/images/dashboard-11/user/3.jpg" alt="profile"&gt;
                          |          &lt;div class="designer-content"&gt; 
                          |            &lt;h6&gt;Jaclyn T. Duncan&lt;/h6&gt;
                          |            &lt;p&gt;413-618-9222&lt;/p&gt;
                          |          &lt;/div&gt;
                          |        &lt;/div&gt;
                          |      &lt;/div&gt;
                          |      &lt;div class="designer-profile"&gt; 
                          |        &lt;div class="designer-wrap"&gt;&lt;img class="designer-img" src="../assets/images/dashboard-11/user/8.jpg" alt="profile"&gt;
                          |          &lt;div class="designer-content"&gt; 
                          |            &lt;h6&gt;Christine H. Lin&lt;/h6&gt;
                          |            &lt;p&gt;909-219-0342&lt;/p&gt;
                          |          &lt;/div&gt;
                          |        &lt;/div&gt;
                          |      &lt;/div&gt;
                          |      &lt;div class="designer-profile"&gt; 
                          |        &lt;div class="designer-wrap"&gt;&lt;img class="designer-img" src="../assets/images/dashboard-11/user/12.jpg" alt="profile"&gt;
                          |          &lt;div class="designer-content"&gt; 
                          |            &lt;h6&gt;Ronnie S. Mountain&lt;/h6&gt;
                          |            &lt;p&gt;978-426-9732&lt;/p&gt;
                          |          &lt;/div&gt;
                          |        &lt;/div&gt;
                          |      &lt;/div&gt;
                          |      &lt;div class="designer-profile"&gt; 
                          |        &lt;div class="designer-wrap"&gt;&lt;img class="designer-img" src="../assets/images/dashboard-11/user/5.jpg" alt="profile"&gt;
                          |          &lt;div class="designer-content"&gt; 
                          |            &lt;h6&gt;Louise A. Hilliard&lt;/h6&gt;
                          |            &lt;p&gt;502-262-5600&lt;/p&gt;
                          |          &lt;/div&gt;
                          |        &lt;/div&gt;
                          |      &lt;/div&gt;
                          |      &lt;div class="designer-profile"&gt; 
                          |        &lt;div class="designer-wrap"&gt;&lt;img class="designer-img" src="../assets/images/dashboard-9/user/3.png" alt="profile"&gt;
                          |          &lt;div class="designer-content"&gt; 
                          |            &lt;h6&gt;Kayla Hutt&lt;/h6&gt;
                          |            &lt;p&gt;312-456-8275&lt;/p&gt;
                          |          &lt;/div&gt;
                          |        &lt;/div&gt;
                          |      &lt;/div&gt;
                          |      &lt;div class="designer-profile"&gt; 
                          |        &lt;div class="designer-wrap"&gt;&lt;img class="designer-img" src="../assets/images/dashboard-11/user/9.jpg" alt="profile"&gt;
                          |          &lt;div class="designer-content"&gt; 
                          |            &lt;h6&gt;Amber Cecil&lt;/h6&gt;
                          |            &lt;p&gt;802-662-2407&lt;/p&gt;
                          |          &lt;/div&gt;
                          |        &lt;/div&gt;
                          |      &lt;/div&gt;
                          |    &lt;/div&gt;
                          |  &lt;/div&gt;
                          |&lt;/div&gt;
      
              div(class="col-span-6 xxl:col-span-12") 
                .card 
                  .card-header
                    h5 Material Style Left Tabs
                    p.mt-1.f-m-light
                        | Use 
                        code nav-link 
                        | with 
                        code active 
                        | class for switching to another tabs and
                        code  aria-orientation='vertical'
                        | for vertical tabs.
                    .card-header-right
                      ul.list-unstyled.card-option
                        li
                          i.fa-solid.fa-gear.fa-spin
                        li
                          i.view-html.fa-solid.fa-code
                        li
                          i.icofont.icofont-maximize.full-card
                        li
                          i.icofont.icofont-minus.minimize-card
                        li
                          i.icofont.icofont-refresh.reload-card
                        li
                          i.icofont.icofont-error.close-card
                  .card-body
                    .tabs-responsive-side   
                      .material-wrapper.tabs
                        .material-flex
                          #sideline-tab.tab-links.nav-secondary.border-tab.nav-left
                            .tab-link.nav-effect.active(data-tabfilter="1") Home
                            .tab-link.nav-effect(data-tabfilter="2") Profile
                            .tab-link.nav-effect(data-tabfilter="3") Inbox
                            .tab-link.nav-effect.pb-0(data-tabfilter="4") Settings
                        .material-content
                          .tab-content
                            .tab-pan.fade.show.active(data-tabcontent="1")
                                p
                                    | This product is meant for educational purposes only. Any resemblance to real persons, living or dead is purely coincidental. Void where prohibited. Some assembly required. List each check separately by bank number. Batteries not included.Google Web Designer gives you the power to create beautiful and compelling videos, images and HTML5 ads. Use animation and interactive elements to build out your creative vision, then scale your content for different sizes or audiences with responsive and dynamic workflows.
                            .tab-pan.fade(data-tabcontent="2")
                                .flex-space.flex-wrap.items-center
                                    img.tab-img(src="../assets/images/ecommerce/08.jpg", alt="profile") 
                                    ul.flex.flex-col.gap-1
                                        li 
                                            strong  Name: 
                                            |  Jake Catlin
                                        li
                                            strong Visit Us: 
                                            |  50006 Ehrenberg/Parker,Arkansas-85334
                                        li
                                            strong Mail Us:
                                            |  Jake.@gmail.com
                                        li
                                            strong Contact Number: 
                                            |  (928) 923-7940
                            .tab-pan.fade(data-tabcontent="3")
                                .card-body.p-0
                                    .main-inbox 
                                        .header-inbox.justify-start.gap-2
                                            .header-left-inbox
                                                .inbox-img
                                                    img(src="../assets/images/ecommerce/07.jpg", alt="profile")
                                            .inbox-content 
                                                h6 Dalbult Caslin 
                                                p.text-muted stroman.rogers@gmail.com
                                        .body-inbox.mt-2
                                            .body-h-wrapper
                                                i.me-2.tab-space.icofont.icofont-star
                                                em Compare Prices Find the Best Computer Assessors Fronted Issue.
                                            p.pt-2 Site speed and design are two of the most important ranking factors Google takes into consideration, as they have the biggest effect of customer staying on site as the website respond faster.
                            .tab-pan.fade(data-tabcontent="4")
                              p
                                  strong In this situation, you would probably do two things:
                                  |  exit the page, or look for the trusty search bar. If you decide to stick around, a proper search function should take your query and send you to your destination. Problem solved. It's not a perfect experience, but it's a hard one to avoid on larger websites that simply can't link to every piece of content from the homepage.
                        .code-box-copy
                          button.code-box-copy__btn.btn-clipboard(data-clipboard-target='#material-l-tab-copy', title='Copy')
                            i.icofont.icofont-copy-alt
                          pre.custom-scrollbar
                            code.language-html#material-l-tab-copy
                              |&lt;div class="tabs-responsive-side"&gt;
                              |  &lt;div class="material-wrapper"&gt;
                              |    &lt;div class="flex"&gt;
                              |      &lt;div class="nav flex-col nav-secondary border-tab nav-left" id="sideline-tab" role="tablist" aria-orientation="vertical"&gt;&lt;a class="nav-link nav-effect active" id="sideline-home-tab" data-bs-toggle="pill" href="#sideline-home" role="tab" aria-controls="sideline-home" aria-selected="true"&gt;Home&lt;/a&gt;&lt;a class="nav-link nav-effect" id="sideline-profile-tab" data-bs-toggle="pill" href="#sideline-profile" role="tab" aria-controls="sideline-profile" aria-selected="false"&gt;Profile&lt;/a&gt;&lt;a class="nav-link nav-effect" id="sideline-messages-tab" data-bs-toggle="pill" href="#sideline-messages" role="tab" aria-controls="sideline-messages" aria-selected="false"&gt;Inbox&lt;/a&gt;&lt;a class="nav-link nav-effect pb-0" id="sideline-settings-tab" data-bs-toggle="pill" href="#sideline-settings" role="tab" aria-controls="sideline-settings" aria-selected="false"&gt;Settings&lt;/a&gt;&lt;/div&gt;
                              |    &lt;/div&gt;
                              |    &lt;div class="material-content"&gt;
                              |      &lt;div class="tab-content" id="sideline-tabContent"&gt;
                              |        &lt;div class="tab-pane fade show active" id="sideline-home" role="tabpanel" aria-labelledby="sideline-home-tab"&gt;
                              |          &lt;p&gt;This product is meant for educational purposes only. Any resemblance to real persons, living or dead is purely coincidental. Void where prohibited. Some assembly required. List each check separately by bank number. Batteries not included.Google Web Designer gives you the power to create beautiful and compelling videos, images and HTML5 ads. Use animation and interactive elements to build out your creative vision, then scale your content for different sizes or audiences with responsive and dynamic workflows.&lt;/p&gt;
                              |        &lt;/div&gt;
                              |        &lt;div class="tab-pane fade" id="sideline-profile" role="tabpanel" aria-labelledby="sideline-profile-tab"&gt;
                              |          &lt;div class="flex-space flex-wrap align-items-center"&gt;&lt;img class="tab-img" src="../assets/images/ecommerce/08.jpg" alt="profile"&gt;
                              |            &lt;ul class="flex flex-col gap-1"&gt;
                              |              &lt;li&gt;&lt;strong&gt;Name:&lt;/strong&gt;Jake Catlin&lt;/li&gt;
                              |              &lt;li&gt;&lt;strong&gt;Visit Us:&lt;/strong&gt;50006 Ehrenberg/Parker,Arkansas-85334&lt;/li&gt;
                              |              &lt;li&gt;&lt;strong&gt;Mail Us:&lt;/strong&gt;Jake.@gmail.com&lt;/li&gt;
                              |              &lt;li&gt;&lt;strong&gt;Contact Number:&lt;/strong&gt;(928) 923-7940&lt;/li&gt;
                              |            &lt;/ul&gt;
                              |          &lt;/div&gt;
                              |        &lt;/div&gt;
                              |        &lt;div class="tab-pane fade" id="sideline-messages" role="tabpanel" aria-labelledby="sideline-messages-tab"&gt;
                              |          &lt;div class="card-body p-0"&gt;
                              |            &lt;div class="main-inbox"&gt; 
                              |              &lt;div class="header-inbox justify-start gap-2"&gt;
                              |                &lt;div class="header-left-inbox"&gt;
                              |                  &lt;div class="inbox-img"&gt;&lt;img src="../assets/images/ecommerce/07.jpg" alt="profile"&gt;&lt;/div&gt;
                              |                &lt;/div&gt;
                              |                &lt;div class="inbox-content"&gt; 
                              |                  &lt;h6&gt;Dalbult Caslin&lt;/h6&gt;
                              |                  &lt;p class="text-muted"&gt;stroman.rogers@gmail.com&lt;/p&gt;
                              |                &lt;/div&gt;
                              |              &lt;/div&gt;
                              |              &lt;div class="body-inbox mt-2"&gt;
                              |                &lt;div class="body-h-wrapper"&gt;&lt;i class="me-2 tab-space icofont icofont-star"&gt;&lt;/i&gt;&lt;em&gt;Compare Prices Find the Best Computer Assessors Fronted Issue.&lt;/em&gt;&lt;/div&gt;
                              |                &lt;p class="pt-2"&gt;Site speed and design are two of the most important ranking factors Google takes into consideration, as they have the biggest effect of customer staying on site as the website respond faster.&lt;/p&gt;
                              |              &lt;/div&gt;
                              |            &lt;/div&gt;
                              |          &lt;/div&gt;
                              |        &lt;/div&gt;
                              |        &lt;div class="tab-pane fade" id="sideline-settings" role="tabpanel" aria-labelledby="sideline-settings-tab"&gt;
                              |          &lt;p&gt;&lt;strong&gt;In this situation, you would probably do two things:&lt;/strong&gt; exit the page, or look for the trusty search bar. If you decide to stick around, a proper search function should take your query and send you to your destination. Problem solved. It's not a perfect experience, but it's a hard one to avoid on larger websites that simply can't link to every piece of content from the homepage.&lt;/p&gt;
                              |        &lt;/div&gt;
                              |      &lt;/div&gt;
                              |    &lt;/div&gt;
                              |  &lt;/div&gt;
                              |&lt;/div&gt;

              div(class="col-span-6 xxl:col-span-12") 
                .card 
                  .card-header
                    h5 Material Style Tabs
                    p.mt-1.f-m-light
                        | Use 
                        code nav-link 
                        | with 
                        code active 
                        | class to switch and customize tabs.
                    .card-header-right
                      ul.list-unstyled.card-option
                        li
                          i.fa-solid.fa-gear.fa-spin
                        li
                          i.view-html.fa-solid.fa-code
                        li
                          i.icofont.icofont-maximize.full-card
                        li
                          i.icofont.icofont-minus.minimize-card
                        li
                          i.icofont.icofont-refresh.reload-card
                        li
                          i.icofont.icofont-error.close-card
                  .card-body.bottom-border-tab.tabs
                    ul.tab-links.flex.border-tab.border-0.mb-0.nav-secondary
                      li.tab-link.active.nav-border.rounded-none.pt-0.txt-secondary.nav-secondary(data-tabfilter="1")
                              i.icofont.icofont-man-in-glasses
                              | User
                      li.tab-link.nav-border.txt-secondary.rounded-none.nav-secondary(data-tabfilter="2")
                              i.icofont.icofont-file-document
                              | Description
                      li.tab-link.nav-border.txt-secondary.rounded-none.nav-secondary(data-tabfilter="3")
                              i.icofont.icofont-star
                              | Review
                    .tab-content
                      .tab-pan.fade.show.active(data-tabcontent="1")
                          .card-body.px-0.pb-0   
                              .user-header.pb-2 
                                  h6.fw-bold User Details:
                              .user-content 
                                .overflow-x-auto.custom-scrollbar
                                    table.table.mb-0
                                        thead
                                            tr
                                                th(scope='col') #
                                                th(scope='col') Name
                                                th(scope='col') Country
                                                th(scope='col') Contact No
                                        tbody
                                            tr
                                                th(scope='row') 1
                                                td Neha
                                                td India 
                                                td 5698741236
                                            tr
                                                th(scope='row') 2
                                                td Jacklin
                                                td Thailand
                                                td 7800030320
                      .tab-pan.fade(data-tabcontent="2")
                          .card-body.px-0.pb-0 
                              .user-header.pb-2 
                                  h6.fw-bold Description:
                              .user-content 
                                .overflow-x-auto.custom-scrollbar
                                    table.table.mb-0
                                        thead
                                            tr
                                                th(scope='col') Technology
                                                th(scope='col') Interests 
                                                th(scope='col') Salary Expected 
                                        tbody
                                            tr
                                                td Web Designer
                                                td HTML,CSS,JS,SCSS
                                                td 45000
                                            tr
                                                td UX Designer
                                                td Figma,Photoshop,Sketch
                                                td 20000
                      .tab-pan.fade(data-tabcontent="3")
                          .card-body.px-0.pb-0
                              .user-header.pb-2 
                                  h6.fw-bold Review:
                              .user-content 
                                .overflow-x-auto.custom-scrollbar
                                    table.table.mb-0
                                        thead
                                            tr
                                                th(scope='col') #
                                                th(scope='col') Name
                                                th(scope='col') Country
                                                th(scope='col') Rating 
                                        tbody
                                            tr
                                                th(scope='row') 1
                                                td Neha
                                                td India 
                                                td 
                                                    i.ico-color.icofont.icofont-star
                                                    i.ico-color.icofont.icofont-star
                                                    i.ico-color.icofont.icofont-star
                                                    i.ico-color.icofont.icofont-star
                                                    i.ico-color.icofont.icofont-star
                                            tr
                                                th(scope='row') 2
                                                td Irfan
                                                td India
                                                td 
                                                    i.ico-color.icofont.icofont-star
                                                    i.ico-color.icofont.icofont-star
                                                    i.ico-color.icofont.icofont-star
                    .code-box-copy
                      button.code-box-copy__btn.btn-clipboard(data-clipboard-target='#material-tab-copy', title='Copy')
                        i.icofont.icofont-copy-alt
                      pre.custom-scrollbar
                        code.language-html#material-tab-copy
                          |&lt;ul class="nav nav-tabs border-tab border-0 mb-0 nav-secondary" id="topline-tab" role="tablist"&gt;
                          |  &lt;li class="nav-item"&gt;&lt;a class="nav-link active nav-border pt-0 txt-secondary nav-secondary" id="topline-top-user-tab" data-bs-toggle="tab" href="#topline-top-user" role="tab" aria-controls="topline-top-user" aria-selected="true"&gt;&lt;i class="icofont icofont-man-in-glasses"&gt;&lt;/i&gt;User&lt;/a&gt;&lt;/li&gt;
                          |  &lt;li class="nav-item"&gt;&lt;a class="nav-link nav-border txt-secondary nav-secondary" id="topline-top-description-tab" data-bs-toggle="tab" href="#topline-top-description" role="tab" aria-controls="topline-top-description" aria-selected="false"&gt;&lt;i class="icofont icofont-file-document"&gt;&lt;/i&gt;Description&lt;/a&gt;&lt;/li&gt;
                          |  &lt;li class="nav-item"&gt;&lt;a class="nav-link nav-border txt-secondary nav-secondary" id="topline-top-review-tab" data-bs-toggle="tab" href="#topline-top-review" role="tab" aria-controls="topline-top-review" aria-selected="false"&gt;&lt;i class="icofont icofont-star"&gt;&lt;/i&gt;Review&lt;/a&gt;&lt;/li&gt;
                          |&lt;/ul&gt;
                          |&lt;div class="tab-content" id="topline-tabContent"&gt;
                          |  &lt;div class="tab-pane fade show active" id="topline-top-user" role="tabpanel" aria-labelledby="topline-top-user-tab"&gt;
                          |    &lt;div class="card-body px-0 pb-0"&gt;  
                          |      &lt;div class="user-header pb-2"&gt; 
                          |        &lt;h6 class="fw-bold"&gt;User Details:&lt;/h6&gt;
                          |      &lt;/div&gt;
                          |      &lt;div class="user-content"&gt; 
                          |        &lt;div class="overflow-x-auto custom-scrollbar"&gt;
                          |          &lt;table class="table mb-0"&gt;
                          |            &lt;thead&gt;
                          |              &lt;tr&gt;
                          |                &lt;th scope="col"&gt;#&lt;/th&gt;
                          |                &lt;th scope="col"&gt;Name&lt;/th&gt;
                          |                &lt;th scope="col"&gt;Country&lt;/th&gt;
                          |                &lt;th scope="col"&gt;Contact No&lt;/th&gt;
                          |              &lt;/tr&gt;
                          |            &lt;/thead&gt;
                          |            &lt;tbody&gt;
                          |              &lt;tr&gt;
                          |                &lt;th scope="row"&gt;1&lt;/th&gt;
                          |                &lt;td&gt;Neha&lt;/td&gt;
                          |                &lt;td&gt;India &lt;/td&gt;
                          |                &lt;td&gt;5698741236&lt;/td&gt;
                          |              &lt;/tr&gt;
                          |              &lt;tr&gt;
                          |                &lt;th scope="row"&gt;2&lt;/th&gt;
                          |                &lt;td&gt;Jacklin&lt;/td&gt;
                          |                &lt;td&gt;Thailand&lt;/td&gt;
                          |                &lt;td&gt;7800030320&lt;/td&gt;
                          |              &lt;/tr&gt;
                          |            &lt;/tbody&gt;
                          |          &lt;/table&gt;
                          |        &lt;/div&gt;
                          |      &lt;/div&gt;
                          |    &lt;/div&gt;
                          |  &lt;/div&gt;
                          |  &lt;div class="tab-pane fade" id="topline-top-description" role="tabpanel" aria-labelledby="topline-top-description-tab"&gt;
                          |    &lt;div class="card-body px-0 pb-0"&gt; 
                          |      &lt;div class="user-header pb-2"&gt; 
                          |        &lt;h6 class="fw-bold"&gt;Description:&lt;/h6&gt;
                          |      &lt;/div&gt;
                          |      &lt;div class="user-content"&gt; 
                          |        &lt;div class="overflow-x-auto custom-scrollbar"&gt;
                          |          &lt;table class="table mb-0"&gt;
                          |            &lt;thead&gt;
                          |              &lt;tr&gt;
                          |                &lt;th scope="col"&gt;Technology&lt;/th&gt;
                          |                &lt;th scope="col"&gt;Interests&lt;/th&gt;
                          |                &lt;th scope="col"&gt;Salary Expected&lt;/th&gt;
                          |              &lt;/tr&gt;
                          |            &lt;/thead&gt;
                          |            &lt;tbody&gt;
                          |              &lt;tr&gt;
                          |                &lt;td&gt;Web Designer&lt;/td&gt;
                          |                &lt;td&gt;HTML,CSS,JS,SCSS&lt;/td&gt;
                          |                &lt;td&gt;45000&lt;/td&gt;
                          |              &lt;/tr&gt;
                          |              &lt;tr&gt;
                          |                &lt;td&gt;UX Designer&lt;/td&gt;
                          |                &lt;td&gt;Figma,Photoshop,Sketch&lt;/td&gt;
                          |                &lt;td&gt;20000&lt;/td&gt;
                          |              &lt;/tr&gt;
                          |            &lt;/tbody&gt;
                          |          &lt;/table&gt;
                          |        &lt;/div&gt;
                          |      &lt;/div&gt;
                          |    &lt;/div&gt;
                          |  &lt;/div&gt;
                          |  &lt;div class="tab-pane fade" id="topline-top-review" role="tabpanel" aria-labelledby="topline-top-review-tab"&gt;
                          |    &lt;div class="card-body px-0 pb-0"&gt;
                          |      &lt;div class="user-header pb-2"&gt; 
                          |        &lt;h6 class="fw-bold"&gt;Review:&lt;/h6&gt;
                          |      &lt;/div&gt;
                          |      &lt;div class="user-content"&gt; 
                          |        &lt;div class="overflow-x-auto custom-scrollbar"&gt;
                          |          &lt;table class="table mb-0"&gt;
                          |            &lt;thead&gt;
                          |              &lt;tr&gt;
                          |                &lt;th scope="col"&gt;#&lt;/th&gt;
                          |                &lt;th scope="col"&gt;Name&lt;/th&gt;
                          |                &lt;th scope="col"&gt;Country&lt;/th&gt;
                          |                &lt;th scope="col"&gt;Rating&lt;/th&gt;
                          |              &lt;/tr&gt;
                          |            &lt;/thead&gt;
                          |            &lt;tbody&gt;
                          |              &lt;tr&gt;
                          |                &lt;th scope="row"&gt;1&lt;/th&gt;
                          |                &lt;td&gt;Neha&lt;/td&gt;
                          |                &lt;td&gt;India &lt;/td&gt;
                          |                &lt;td&gt;&lt;i class="ico-color icofont icofont-star"&gt;&lt;/i&gt;&lt;i class="ico-color icofont icofont-star"&gt;&lt;/i&gt;&lt;i class="ico-color icofont icofont-star"&gt;&lt;/i&gt;&lt;i class="ico-color icofont icofont-star"&gt;&lt;/i&gt;&lt;i class="ico-color icofont icofont-star"&gt;&lt;/i&gt;&lt;/td&gt;
                          |              &lt;/tr&gt;
                          |              &lt;tr&gt;
                          |                &lt;th scope="row"&gt;2&lt;/th&gt;
                          |                &lt;td&gt;Irfan&lt;/td&gt;
                          |                &lt;td&gt;India&lt;/td&gt;
                          |                &lt;td&gt;&lt;i class="ico-color icofont icofont-star"&gt;&lt;/i&gt;&lt;i class="ico-color icofont icofont-star"&gt;&lt;/i&gt;&lt;i class="ico-color icofont icofont-star"&gt;&lt;/i&gt;&lt;/td&gt;
                          |              &lt;/tr&gt;
                          |            &lt;/tbody&gt;
                          |          &lt;/table&gt;
                          |        &lt;/div&gt;
                          |      &lt;/div&gt;
                          |    &lt;/div&gt;
                          |  &lt;/div&gt;
                          |&lt;/div&gt;

              div(class="col-span-6 xxl:col-span-12") 
                .card 
                  .card-header
                    h5 Border Tabs 
                    p.mt-1.f-m-light
                        | Use 
                        code nav-link 
                        | with 
                        code active 
                        | class to add bottom border styles.
                    .card-header-right
                      ul.list-unstyled.card-option
                        li
                          i.fa-solid.fa-gear.fa-spin
                        li
                          i.view-html.fa-solid.fa-code
                        li
                          i.icofont.icofont-maximize.full-card
                        li
                          i.icofont.icofont-minus.minimize-card
                        li
                          i.icofont.icofont-refresh.reload-card
                        li
                          i.icofont.icofont-error.close-card
                  .card-body.bottom-border-tab.tabs
                    ul#bottom-tab.nav.nav-tabs.border-tab.mb-0.tab-links
                      li.tab-link.nav-border.txt-primary.tab-primary.pt-0(data-tabfilter="1")
                              i.icofont.icofont-ui-home 
                              | Home
                      li.tab-link.nav-border.txt-primary.tab-primary.active(data-tabfilter="2")
                              i.icofont.icofont-ui-message
                              | Inbox
                      li.tab-link.nav-border.txt-primary.tab-primary(data-tabfilter="3")
                              i.icofont.icofont-man-in-glasses
                              | Contact
                    .tab-content
                      .tab-pan.fade(data-tabcontent="1")
                          p.pt-3
                              | This is some placeholder content the 
                              strong Home tab's 
                              |  associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other 
                              strong .nav
                              | -powered navigation.To convey the 
                              strong active 
                              |  state to assistive technologies, use the 
                              strong aria-current 
                              |  attribute — using the page value for current page, or true for the current item in a set. The base 
                              strong nav 
                              |  component is built with flexbox and provide a strong foundation for building all types of navigation components.
                      .tab-pan.fade.show.active(data-tabcontent="2")
                          .card-body.pb-0
                              .main-inbox 
                                  .header-inbox 
                                      .header-left-inbox
                                          .inbox-img
                                              img(src="../assets/images/ecommerce/06.jpg", alt="profile")
                                          .inbox-content 
                                              h6 Dalbult Caslin 
                                              p.text-muted stroman.rogers@gmail.com
                                      ul.header-right-inbox
                                          li 
                                              p 8 JAN 11:30PM
                                          li 
                                              i.txt-danger.icofont.icofont-ui-delete
                                          li 
                                              i.icofont.icofont-telegram
                                  .body-inbox.mt-2
                                      .body-h-wrapper
                                          i.me-2.tab-space.icofont.icofont-star
                                          em Compare Prices Find the Best Computer Assessors Fronted Issue.
                                      p.pt-2 Site speed and design are two of the most important ranking factors Google takes into consideration, as they have the biggest effect of customer staying on site as the website respond faster.
                      .tab-pan.fade(data-tabcontent="3")
                          .card-body.px-0.pb-0 
                              .form 
                                  .mb-3
                                      label.form-label(for='exampleFormControltwo') Email Address
                                      input#exampleFormControltwo.form-control(type='email' placeholder='youremail@gmail.com')
                                  .mb-0
                                      label.form-label(for='exampleFormControlTextarea1') Example Textarea
                                      textarea#exampleFormControlTextarea1.form-control(rows='3')
                    .code-box-copy
                      button.code-box-copy__btn.btn-clipboard(data-clipboard-target='#border-tab-copy', title='Copy')
                        i.icofont.icofont-copy-alt
                      pre.custom-scrollbar
                        code.language-html#border-tab-copy
                          |&lt;ul class="nav nav-tabs border-tab mb-0" id="border-tab" role="tablist"&gt;
                          |  &lt;li class="nav-item"&gt;&lt;a class="nav-link nav-border txt-primary tab-primary pt-0" id="bottom-home-tab" data-bs-toggle="tab" href="#bottom-home" role="tab" aria-controls="bottom-home" aria-selected="true"&gt;&lt;i class="icofont icofont-ui-home"&gt; &lt;/i&gt;Home&lt;/a&gt;&lt;/li&gt;
                          |  &lt;li class="nav-item"&gt;&lt;a class="nav-link nav-border txt-primary tab-primary active" id="bottom-inbox-tab" data-bs-toggle="tab" href="#bottom-inbox" role="tab" aria-controls="bottom-inbox" aria-selected="false"&gt;&lt;i class="icofont icofont-ui-message"&gt;&lt;/i&gt;Inbox&lt;/a&gt;&lt;/li&gt;
                          |  &lt;li class="nav-item"&gt;&lt;a class="nav-link nav-border txt-primary tab-primary" id="bottom-contact-tab" data-bs-toggle="tab" href="#bottom-contact" role="tab" aria-controls="bottom-contact" aria-selected="false"&gt;&lt;i class="icofont icofont-man-in-glasses"&gt;&lt;/i&gt;Contact&lt;/a&gt;&lt;/li&gt;
                          |&lt;/ul&gt;
                          |&lt;div class="tab-content" id="border-tabContent"&gt;
                          |  &lt;div class="tab-pane fade" id="bottom-home" role="tabpanel" aria-labelledby="bottom-home-tab"&gt;
                          |    &lt;p class="pt-3"&gt;This is some placeholder content the&lt;strong&gt;Home tab's&lt;/strong&gt;associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other&lt;strong&gt;.nav&lt;/strong&gt;-powered navigation.To convey the&lt;strong&gt;active&lt;/strong&gt; state to assistive technologies, use the&lt;strong&gt;aria-current&lt;/strong&gt; attribute — using the page value for current page, or true for the current item in a set. The base&lt;strong&gt;nav&lt;/strong&gt; component is built with flexbox and provide a strong foundation for building all types of navigation components.&lt;/p&gt;
                          |  &lt;/div&gt;
                          |  &lt;div class="tab-pane fade show active" id="bottom-inbox" role="tabpanel" aria-labelledby="bottom-inbox-tab"&gt;
                          |    &lt;div class="card-body pb-0"&gt;
                          |      &lt;div class="main-inbox"&gt; 
                          |        &lt;div class="header-inbox"&gt; 
                          |          &lt;div class="header-left-inbox"&gt;
                          |            &lt;div class="inbox-img"&gt;&lt;img src="../assets/images/ecommerce/06.jpg" alt="profile"&gt;&lt;/div&gt;
                          |            &lt;div class="inbox-content"&gt; 
                          |              &lt;h6&gt;Dalbult Caslin &lt;/h6&gt;
                          |              &lt;p class="text-muted"&gt;stroman.rogers@gmail.com&lt;/p&gt;
                          |            &lt;/div&gt;
                          |          &lt;/div&gt;
                          |          &lt;ul class="header-right-inbox"&gt;
                          |            &lt;li&gt; 
                          |              &lt;p&gt;8 JAN 11:30PM&lt;/p&gt;
                          |            &lt;/li&gt;
                          |            &lt;li&gt;&lt;i class="txt-danger icofont icofont-ui-delete"&gt;&lt;/i&gt;&lt;/li&gt;
                          |            &lt;li&gt;&lt;i class="icofont icofont-telegram"&gt;&lt;/i&gt;&lt;/li&gt;
                          |          &lt;/ul&gt;
                          |        &lt;/div&gt;
                          |        &lt;div class="body-inbox mt-2"&gt;
                          |          &lt;div class="body-h-wrapper"&gt;&lt;i class="me-2 tab-space icofont icofont-star"&gt;&lt;/i&gt;&lt;em&gt;Compare Prices Find the Best Computer Assessors Fronted Issue.&lt;/em&gt;&lt;/div&gt;
                          |          &lt;p class="pt-2"&gt;Site speed and design are two of the most important ranking factors Google takes into consideration, as they have the biggest effect of customer staying on site as the website respond faster.&lt;/p&gt;
                          |        &lt;/div&gt;
                          |      &lt;/div&gt;
                          |    &lt;/div&gt;
                          |  &lt;/div&gt;
                          |  &lt;div class="tab-pane fade" id="bottom-contact" role="tabpanel" aria-labelledby="bottom-contact-tab"&gt;
                          |    &lt;div class="card-body px-0 pb-0"&gt; 
                          |      &lt;div class="form"&gt; 
                          |        &lt;div class="mb-3"&gt;
                          |          &lt;label class="form-label" for="exampleFormControltwo"&gt;Email Address&lt;/label&gt;
                          |          &lt;input class="form-control" id="exampleFormControltwo" type="email" placeholder="youremail@gmail.com"&gt;
                          |        &lt;/div&gt;
                          |        &lt;div class="mb-0"&gt;
                          |          &lt;label class="form-label" for="exampleFormControlTextarea1"&gt;Example Textarea&lt;/label&gt;
                          |          &lt;textarea class="form-control" id="exampleFormControlTextarea1" rows="3"&gt;&lt;/textarea&gt;
                          |        &lt;/div&gt;
                          |      &lt;/div&gt;
                          |    &lt;/div&gt;
                          |  &lt;/div&gt;
                          |&lt;/div&gt;

              div(class="col-span-6 xxl:col-span-12") 
                .card 
                  .card-header
                    h5 Background Pill Tabs 
                    p.mt-1.f-m-light
                      | Use 
                      code  active
                      |  class on the
                      code  nav-link
                      |  and backdrop tab with the 
                      code  new-pills
                      |  class.
                    .card-header-right
                      ul.list-unstyled.card-option
                        li
                          i.fa-solid.fa-gear.fa-spin
                        li
                          i.view-html.fa-solid.fa-code
                        li
                          i.icofont.icofont-maximize.full-card
                        li
                          i.icofont.icofont-minus.minimize-card
                        li
                          i.icofont.icofont-refresh.reload-card
                        li
                          i.icofont.icofont-error.close-card
                  .card-body 
                    .bg-navbar.tabs
                      ul.tab-links.flex.nav-primary
                        li.tab-link(data-tabfilter="1")
                                | Sofa
                        li.tab-link(data-tabfilter="2") Chairs
                        li.tab-link.active(data-tabfilter="3") Tables
                      .tab-content.mt-3
                        .tab-pan.fade(data-tabcontent="1")
                          .grid.grid-cols-12.gap-3
                            div(class="col-span-4")
                              img.max-w-full.h-auto(src="../assets/images/switch/s1.jpg", class="[@media(max-width:355px)]:!h-[80px]" alt="sofa") 
                            div(class="col-span-4")
                              img.max-w-full.h-auto(src="../assets/images/switch/s2.jpg", class="[@media(max-width:355px)]:!h-[80px]" alt="sofa") 
                            div(class="col-span-4")
                              img.max-w-full.h-auto(src="../assets/images/switch/s3.jpg", class="[@media(max-width:355px)]:!h-[80px]" alt="sofa") 
                        .tab-pan.fade(data-tabcontent="2")
                          .grid.grid-cols-12.gap-3
                            div(class="col-span-4")
                              img.max-w-full.h-auto(src="../assets/images/switch/c1.jpg", class="[@media(max-width:355px)]:!h-[80px]" alt="chairs") 
                            div(class="col-span-4")
                              img.max-w-full.h-auto(src="../assets/images/switch/c2.jpg", class="[@media(max-width:355px)]:!h-[80px]" alt="chairs") 
                            div(class="col-span-4")
                              img.max-w-full.h-auto(src="../assets/images/switch/c3.jpg", class="[@media(max-width:355px)]:!h-[80px]" alt="chairs") 
                        .tab-pan.fade.show.active(data-tabcontent="3")
                          .grid.grid-cols-12.gap-3
                            div(class="col-span-4")
                              img.max-w-full.h-auto(src="../assets/images/switch/t1.jpg", class="[@media(max-width:355px)]:!h-[80px]" alt="table") 
                            div(class="col-span-4")
                              img.max-w-full.h-auto(src="../assets/images/switch/t2.jpg", class="[@media(max-width:355px)]:!h-[80px]" alt="table") 
                            div(class="col-span-4")
                              img.max-w-full.h-auto(src="../assets/images/switch/t3.jpg", class="[@media(max-width:355px)]:!h-[80px]" alt="table")
                    .code-box-copy
                      button.code-box-copy__btn.btn-clipboard(data-clipboard-target='#background-pill-tab-copy', title='Copy')
                        i.icofont.icofont-copy-alt
                      pre.custom-scrollbar
                        code.language-html#background-pill-tab-copy 
                          | &lt;div class="bg-navbar"&gt;
                          |   &lt;ul class="nav nav-pills nav-primary" id="bg-pill-tab" role="tablist"&gt;
                          |     &lt;li class="nav-item"&gt;&lt;a class="nav-link" id="pills-sofa-tab" data-bs-toggle="pill" href="#pills-sofa" role="tab" aria-controls="pills-sofa" aria-selected="true"&gt;Sofa&lt;/a&gt;&lt;/li&gt;
                          |     &lt;li class="nav-item"&gt;&lt;a class="nav-link" id="pills-chairs-tab" data-bs-toggle="pill" href="#pills-chairs" role="tab" aria-controls="pills-chairs" aria-selected="false"&gt;Chairs&lt;/a&gt;&lt;/li&gt;
                          |     &lt;li class="nav-item"&gt;&lt;a class="nav-link active" id="pills-tables-tab" data-bs-toggle="pill" href="#pills-tables" role="tab" aria-controls="pills-tables" aria-selected="false"&gt;Tables&lt;/a&gt;&lt;/li&gt;
                          |   &lt;/ul&gt;
                          |   &lt;div class="tab-content" id="bg-pill-tabContent"&gt;
                          |     &lt;div class="tab-pane fade" id="pills-sofa" role="tabpanel" aria-labelledby="pills-sofa-tab"&gt;
                          |       &lt;div class="grid grid-cols-12 gap-3 pt-3"&gt;
                          |         &lt;div class="col-span-4"&gt;&lt;img class="max-w-full.h-auto" src="../assets/images/switch/s1.jpg" alt="sofa"&gt;&lt;/div&gt;
                          |         &lt;div class="col-span-4"&gt;&lt;img class="max-w-full.h-auto" src="../assets/images/switch/s2.jpg" alt="sofa"&gt;&lt;/div&gt;
                          |         &lt;div class="col-span-4"&gt;&lt;img class="max-w-full.h-auto" src="../assets/images/switch/s3.jpg" alt="sofa"&gt;&lt;/div&gt;
                          |       &lt;/div&gt;
                          |     &lt;/div&gt;
                          |     &lt;div class="tab-pane fade" id="pills-chairs" role="tabpanel" aria-labelledby="pills-chairs-tab"&gt;
                          |       &lt;div class="grid grid-cols-12 gap-3 pt-3"&gt;
                          |         &lt;div class="col-span-4"&gt;&lt;img class="max-w-full.h-auto" src="../assets/images/switch/c1.jpg" alt="chairs"&gt;&lt;/div&gt;
                          |         &lt;div class="col-span-4"&gt;&lt;img class="max-w-full.h-auto" src="../assets/images/switch/c2.jpg" alt="chairs"&gt;&lt;/div&gt;
                          |         &lt;div class="col-span-4"&gt;&lt;img class="max-w-full.h-auto" src="../assets/images/switch/c3.jpg" alt="chairs"&gt;&lt;/div&gt;
                          |       &lt;/div&gt;
                          |     &lt;/div&gt;
                          |     &lt;div class="tab-pane fade show active" id="pills-tables" role="tabpanel" aria-labelledby="pills-tables-tab"&gt;
                          |       &lt;div class="grid grid-cols-12 gap-3 pt-3"&gt;
                          |         &lt;div class="col-span-4"&gt;&lt;img class="max-w-full.h-auto" src="../assets/images/switch/t1.jpg" alt="table"&gt;&lt;/div&gt;
                          |         &lt;div class="col-span-4"&gt;&lt;img class="max-w-full.h-auto" src="../assets/images/switch/t2.jpg" alt="table"&gt;&lt;/div&gt;
                          |         &lt;div class="col-span-4"&gt;&lt;img class="max-w-full.h-auto" src="../assets/images/switch/t3.jpg" alt="table"&gt;&lt;/div&gt;
                          |       &lt;/div&gt;
                          |     &lt;/div&gt;
                          |   &lt;/div&gt;
                          | &lt;/div&gt;

              div(class="col-span-6 xxl:col-span-12") 
                .card 
                  .card-header
                    h5 Arrow Tabs
                    p.mt-1.f-m-light
                      | Use 
                      code  active 
                      |  class on the
                      code  nav-link
                      |  and arrow tab with the 
                      code  new-item
                      |  class. 
                    .card-header-right
                      ul.list-unstyled.card-option
                        li
                          i.fa-solid.fa-gear.fa-spin
                        li
                          i.view-html.fa-solid.fa-code
                        li
                          i.icofont.icofont-maximize.full-card
                        li
                          i.icofont.icofont-minus.minimize-card
                        li
                          i.icofont.icofont-refresh.reload-card
                        li
                          i.icofont.icofont-error.close-card
                  .card-body 
                    .bg-navbar.arrow-tabs.tabs
                      ul.tab-links.flex.mb-3
                        li.tab-link(data-tabfilter="1")
                                | Account Info
                        li.tab-link.active(data-tabfilter="2") Portfolio
                        li.tab-link(data-tabfilter="3") Skills
                        li.tab-link(data-tabfilter="4") Installment
                      .tab-content
                        .tab-pan.fade(data-tabcontent="1")
                          .common-box
                            i.fa-solid.fa-circle-arrow-right
                            p Your account details serve as the digital gateway to safe, customized online experiences. Modern security measures are in place to safeguard your data, and we have given top priority to the smooth handling of your account details during the building of our website.
                          .common-box
                            i.fa-solid.fa-circle-arrow-right
                            p We design systems that enable customers to easily update and access their account information, from user-friendly interfaces to simple navigation. Because of our dedication to openness, you have easy access to change settings, see transaction history, and customize your preferences while being informed. With our website solutions, you can take account management to the next level. Your information is protected, and your digital trip is customized to meet your demands.
                        .tab-pan.fade.show.active(data-tabcontent="2")
                          .grid.grid-cols-12.gap-3
                            div(class="col-span-4")
                              img.max-w-full.h-auto(src="../assets/images/switch/t4.jpg", class="[@media(max-width:355px)]:!h-[80px]" alt="table") 
                            div(class="col-span-4")
                              img.max-w-full.h-auto(src="../assets/images/switch/t5.jpg", class="[@media(max-width:355px)]:!h-[80px]" alt="table") 
                            div(class="col-span-4")
                              img.max-w-full.h-auto(src="../assets/images/switch/t6.jpg", class="[@media(max-width:355px)]:!h-[80px]" alt="table") 
                        .tab-pan.fade(data-tabcontent="3")
                          .skill-tab
                            h6.pb-1 In what area are you an expert?
                            p Summarize your expertise for us in a few crucial terms. Make careful to select these tags carefully, since they will appear on your portfolio page.
                            ul 
                              li HTML5
                              li CSS3
                              li Javascript
                              li React
                              li SQL
                        .tab-pan.fade(data-tabcontent="5")
                          .common-box
                            i.fa-solid.fa-circle-arrow-right
                            p We will handle your payment procedure, saving you the trouble of following up with clients after each assignment. We'll try our hardest to make sure you receive your money promptly and equitably.
                          .common-box
                            i.fa-solid.fa-circle-arrow-right
                            p Seamless website development requires a foundation that's reliable and efficient. Enter the installment process – the bedrock of building a powerful online presence. Installments in website development refer to the strategic implementation of features, functionalities, and updates in a phased manner, ensuring smooth integration and optimal performance. 
                    .code-box-copy
                      button.code-box-copy__btn.btn-clipboard(data-clipboard-target='#arrows-tab-copy', title='Copy')
                        i.icofont.icofont-copy-alt
                      pre.custom-scrollbar
                        code.language-html#arrows-tab-copy 
                          | &lt;div class="bg-navbar arrow-tabs"&gt;
                          |   &lt;ul class="nav nav-pills mb-3" id="pills-bg-tab" role="tablist"&gt;
                          |     &lt;li class="nav-item"&gt;&lt;a class="nav-link" id="pills-account-tab" data-bs-toggle="pill" href="#pills-account" role="tab" aria-controls="pills-account" aria-selected="true"&gt;Account Info&lt;/a&gt;&lt;/li&gt;
                          |     &lt;li class="nav-item"&gt;&lt;a class="nav-link active" id="pills-portfolio-tab" data-bs-toggle="pill" href="#pills-portfolio" role="tab" aria-controls="pills-portfolio" aria-selected="false"&gt;Portfolio&lt;/a&gt;&lt;/li&gt;
                          |     &lt;li class="nav-item"&gt;&lt;a class="nav-link" id="pills-skills-tab" data-bs-toggle="pill" href="#pills-skills" role="tab" aria-controls="pills-skills" aria-selected="false"&gt;Skills&lt;/a&gt;&lt;/li&gt;
                          |     &lt;li class="nav-item"&gt;&lt;a class="nav-link" id="pills-installment-tab" data-bs-toggle="pill" href="#pills-installment" role="tab" aria-controls="pills-installment" aria-selected="false"&gt;Installment&lt;/a&gt;&lt;/li&gt;
                          |   &lt;/ul&gt;
                          |   &lt;div class="tab-content" id="pills-bg-tabContent"&gt;
                          |     &lt;div class="tab-pane fade" id="pills-account" role="tabpanel" aria-labelledby="pills-account-tab"&gt;
                          |       &lt;div class="common-box"&gt;&lt;i class="fa-solid fa-circle-arrow-right"&gt;&lt;/i&gt;
                          |         &lt;p&gt;...&lt;/p&gt;
                          |       &lt;/div&gt;
                          |     &lt;div class="common-box"&gt;&lt;i class="fa-solid fa-circle-arrow-right"&gt;&lt;/i&gt;
                          |       &lt;p&gt;...&lt;/p&gt;
                          |     &lt;/div&gt;
                          |   &lt;/div&gt;
                          |   &lt;div class="tab-pane fade show active" id="pills-portfolio" role="tabpanel" aria-labelledby="pills-portfolio-tab"&gt;
                          |     &lt;div class="grid grid-cols-12 gap-3"&gt;
                          |       &lt;div class="col-span-4"&gt;&lt;img class="max-w-full.h-auto" src="../assets/images/switch/t4.jpg" alt="table"&gt;&lt;/div&gt;
                          |       &lt;div class="col-span-4"&gt;&lt;img class="max-w-full.h-auto" src="../assets/images/switch/t5.jpg" alt="table"&gt;&lt;/div&gt;
                          |       &lt;div class="col-span-4"&gt;&lt;img class="max-w-full.h-auto" src="../assets/images/switch/t6.jpg" alt="table"&gt;&lt;/div&gt;
                          |     &lt;/div&gt;
                          |   &lt;/div&gt;
                          |   &lt;div class="tab-pane fade" id="pills-skills" role="tabpanel" aria-labelledby="pills-skills-tab"&gt;
                          |     &lt;div class="skill-tab"&gt;
                          |       &lt;h6 class="pb-1"&gt;In what area are you an expert?&lt;/h6&gt;
                          |       &lt;p&gt;...&lt;/p&gt;
                          |       &lt;ul&gt;
                          |         &lt;li&gt;HTML5&lt;/li&gt;
                          |         &lt;li&gt;CSS3&lt;/li&gt;
                          |         &lt;li&gt;Javascript&lt;/li&gt;
                          |         &lt;li&gt;React&lt;/li&gt;
                          |         &lt;li&gt;SQL&lt;/li&gt;
                          |       &lt;/ul&gt;
                          |     &lt;/div&gt;
                          |   &lt;/div&gt;
                          |   &lt;div class="tab-pane fade" id="pills-installment" role="tabpanel" aria-labelledby="pills-installment-tab"&gt;
                          |     &lt;div class="common-box"&gt;&lt;i class="fa-solid fa-circle-arrow-right"&gt;&lt;/i&gt;
                          |       &lt;p&gt;...&lt;/p&gt;
                          |     &lt;/div&gt;
                          |     &lt;div class="common-box"&gt;&lt;i class="fa-solid fa-circle-arrow-right"&gt;&lt;/i&gt;
                          |       &lt;p&gt;...&lt;/p&gt;
                          |     &lt;/div&gt;
                          |   &lt;/div&gt;
                          | &lt;/div&gt;
                          | &lt;/div&gt;

              div(class="col-span-6 xxl:col-span-12") 
                .card 
                  .card-header
                    h5 Bottom Tabs
                    p.mt-1.f-m-light
                      | Use 
                      code  active 
                      |  class on the
                      code  nav-link
                      | . It is possible to build a arrow tab with the 
                      code new-item
                      |  class. 
                    .card-header-right
                      ul.list-unstyled.card-option
                        li
                          i.fa-solid.fa-gear.fa-spin
                        li
                          i.view-html.fa-solid.fa-code
                        li
                          i.icofont.icofont-maximize.full-card
                        li
                          i.icofont.icofont-minus.minimize-card
                        li
                          i.icofont.icofont-refresh.reload-card
                        li
                          i.icofont.icofont-error.close-card
                  .card-body 
                    .bg-navbar.bottom-navbar.tabs
                      .tab-content
                        .tab-pan.fade(data-tabcontent="1")
                          .common-flex
                            img(src="../assets/images/tree/css.png", alt="")
                            H5 CSS
                          .tab-paragraph
                            i.fa-solid.fa-circle-arrow-right
                            P "One of the three main web technologies is CSS. The terms "cascading" and "style," with cascading indicating how one style can cascade from another, are actually the key to understanding CSS, which stands for Cascading Style Sheets."
                          .tab-paragraph
                            i.fa-solid.fa-circle-arrow-right
                            p To specify how HTML code will appear on a website, utilize CSS.
                        .tab-pan.fade.show.active(data-tabcontent="2")
                          .common-flex
                            img(src="../assets/images/tree/vendor.png", alt="#")
                            H5 Vendors
                          .tab-paragraph
                            i.fa-solid.fa-circle-arrow-right
                            P To improve the development of your website, find a carefully chosen list of premier suppliers. Use our dependable network to locate the ideal partners for the accomplishment of your project.
                          .tab-paragraph
                            i.fa-solid.fa-circle-arrow-right
                            p Cutting-edge design tools, or specialized services, our curated list ensures you have access to the best resources for a seamless and successful website development experience.
                        .tab-pan.fade(data-tabcontent="3")
                          .common-flex
                            img(src="../assets/images/tree/js.png", alt="")
                            H5 Javascript
                          .tab-paragraph
                            i.fa-solid.fa-circle-arrow-right
                            P Development of interactive and adaptable websites is made possible by JavaScript, the web's dynamic programming language.
                          .tab-paragraph
                            i.fa-solid.fa-circle-arrow-right
                            p Building strong and interactive online apps requires JavaScript, which is essential for everything from enabling asynchronous requests to designing captivating user interfaces.
                      ul.tab-links.nav-primary
                        li.tab-link(data-tabfilter="1")
                              img(src="../assets/images/tree/css.png", alt="")
                              | CSS
                        li.tab-link.active(data-tabfilter="2") 
                              img(src="../assets/images/tree/vendor.png", alt="")
                              | Vendors
                        li.tab-link(data-tabfilter="3") 
                              img(src="../assets/images/tree/js.png", alt="")
                              | Javascript
                    .code-box-copy
                      button.code-box-copy__btn.btn-clipboard(data-clipboard-target='#bottom-tab-copy', title='Copy')
                        i.icofont.icofont-copy-alt
                      pre.custom-scrollbar
                        code.language-html#bottom-tab-copy 
                          | &lt;div class="bg-navbar bottom-navbar"&gt;
                          |   &lt;div class="tab-content" id="bottom-pill-tabContent"&gt;
                          |     &lt;div class="tab-pane fade" id="pills-css" role="tabpanel" aria-labelledby="pills-css-tab"&gt;
                          |       &lt;div class="common-flex"&gt;&lt;img src="../assets/images/tree/css.png" alt=""&gt;
                          |         &lt;H5&gt;CSS&lt;/H5&gt;
                          |       &lt;/div&gt;
                          |       &lt;div class="tab-paragraph"&gt;&lt;i class="fa-solid fa-circle-arrow-right"&gt;&lt;/i&gt;
                          |         &lt;P&gt;"..."&lt;/P&gt;
                          |       &lt;/div&gt;
                          |       &lt;div class="tab-paragraph"&gt;&lt;i class="fa-solid fa-circle-arrow-right"&gt;&lt;/i&gt;
                          |         &lt;p&gt;...&lt;/p&gt;
                          |       &lt;/div&gt;
                          |     &lt;/div&gt;
                          |     &lt;div class="tab-pane fade show active" id="pills-vendor" role="tabpanel" aria-labelledby="pills-vendor-tab"&gt;
                          |       &lt;div class="common-flex"&gt;&lt;img src="../assets/images/tree/vendor.png" alt="#"&gt;
                          |         &lt;H5&gt;Vendors&lt;/H5&gt;
                          |       &lt;/div&gt;
                          |       &lt;div class="tab-paragraph"&gt;&lt;i class="fa-solid fa-circle-arrow-right"&gt;&lt;/i&gt;
                          |         &lt;P&gt;...&lt;/P&gt;
                          |       &lt;/div&gt;
                          |       &lt;div class="tab-paragraph"&gt;&lt;i class="fa-solid fa-circle-arrow-right"&gt;&lt;/i&gt;
                          |         &lt;p&gt;...&lt;/p&gt;
                          |       &lt;/div&gt;
                          |     &lt;/div&gt;
                          |     &lt;div class="tab-pane fade" id="pills-js" role="tabpanel" aria-labelledby="pills-js-tab"&gt;
                          |       &lt;div class="common-flex"&gt;&lt;img src="../assets/images/tree/js.png" alt=""&gt;
                          |         &lt;H5&gt;Javascript&lt;/H5&gt;
                          |       &lt;/div&gt;
                          |       &lt;div class="tab-paragraph"&gt;&lt;i class="fa-solid fa-circle-arrow-right"&gt;&lt;/i&gt;
                          |         &lt;P&gt;...&lt;/P&gt;
                          |       &lt;/div&gt;
                          |       &lt;div class="tab-paragraph"&gt;&lt;i class="fa-solid fa-circle-arrow-right"&gt;&lt;/i&gt;
                          |         &lt;p&gt;...&lt;/p&gt;
                          |       &lt;/div&gt;
                          |     &lt;/div&gt;
                          |   &lt;/div&gt;
                          |   &lt;ul class="nav nav-pills nav-primary" id="bottom-pill-tab" role="tablist"&gt;
                          |     &lt;li class="nav-item"&gt;&lt;a class="nav-link" id="pills-css-tab" data-bs-toggle="pill" href="#pills-css" role="tab" aria-controls="pills-css" aria-selected="true"&gt;&lt;img src="../assets/images/tree/css.png" alt=""&gt;CSS&lt;/a&gt;&lt;/li&gt;
                          |     &lt;li class="nav-item"&gt;&lt;a class="nav-link active" id="pills-vendor-tab" data-bs-toggle="pill" href="#pills-vendor" role="tab" aria-controls="pills-vendor" aria-selected="false"&gt; &lt;img src="../assets/images/tree/vendor.png" alt=""&gt;Vendors&lt;/a&gt;&lt;/li&gt;
                          |     &lt;li class="nav-item"&gt;&lt;a class="nav-link" id="pills-js-tab" data-bs-toggle="pill" href="#pills-js" role="tab" aria-controls="pills-js" aria-selected="false"&gt; &lt;img src="../assets/images/tree/js.png" alt=""&gt;Javascript&lt;/a&gt;&lt;/li&gt;
                          |   &lt;/ul&gt;
                          | &lt;/div&gt;

              div(class="col-span-6 xxl:col-span-12") 
                .card 
                  .card-header
                    h5 Animated Tabs
                    p.mt-1.f-m-light
                        | Use 
                        code  active
                        |   class on the 
                        code  nav-link
                        | . It is possible to build a animated tab with the 
                        code horizontal-icons-tab 
                        |  class.
                    .card-header-right
                      ul.list-unstyled.card-option
                        li
                          i.fa-solid.fa-gear.fa-spin
                        li
                          i.view-html.fa-solid.fa-code
                        li
                          i.icofont.icofont-maximize.full-card
                        li
                          i.icofont.icofont-minus.minimize-card
                        li
                          i.icofont.icofont-refresh.reload-card
                        li
                          i.icofont.icofont-error.close-card
                  .card-body.horizontal-icons-tab.tabs
                    ul.tab-links.border-tab.mb-0
                      li.tab-link.tab-info(data-tabfilter="1")
                              i.icofont.icofont-building-alt
                              span Home
                      li.tab-link.tab-info.active(data-tabfilter="2")
                              i.icofont.icofont-user-male
                              span Profile
                      li.tab-link.tab-info(data-tabfilter="3")
                              i.icofont.icofont-business-man
                              span About Us
                      li.tab-link.tab-info(data-tabfilter="4")
                        i.icofont.icofont-picture
                        span Gallery
                      li.tab-link.tab-info(data-tabfilter="5")
                              i.icofont.icofont-question-circle
                              span FAQ
                    .tab-content
                      .tab-pan.fade(data-tabcontent="1")
                          p.pt-3
                            | This is some placeholder content for the 
                            b Home tab's 
                            | associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav-powered navigation. Bootstrap provides a flexible and easy-to-use tab component that allows developers to create tabbed navigation effortlessly.
                      .tab-pan.fade.show.active(rdata-tabcontent="2")
                          p.pt-3
                            | This is some placeholder content the 
                            b Profile tab's
                            |  associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav-powered navigation. Bootstrap provides a flexible and easy-to-use tab component that allows developers to create tabbed navigation effortlessly.
                      .tab-pan.fade(data-tabcontent="3")
                          p.pt-3
                            | This is some placeholder content the 
                            b About tab's 
                            | associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav-powered navigation. Bootstrap provides a flexible and easy-to-use tab component that allows developers to create tabbed navigation effortlessly.
                      .tab-pan.fade(data-tabcontent="4")
                          p.pt-3
                            | This is some placeholder content the 
                            b Gallery tab's 
                            | associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav-powered navigation. Bootstrap provides a flexible and easy-to-use tab component that allows developers to create tabbed navigation effortlessly.
                      .tab-pan.fade(data-tabcontent="5")
                          p.pt-3
                            | This is some placeholder content the 
                            b FAQ tab's 
                            | associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav-powered navigation. Bootstrap provides a flexible and easy-to-use tab component that allows developers to create tabbed navigation effortlessly.
                    .code-box-copy
                      button.code-box-copy__btn.btn-clipboard(data-clipboard-target='#animated-tab-copy', title='Copy')
                        i.icofont.icofont-copy-alt
                      pre.custom-scrollbar
                        code.language-html#animated-tab-copy
                            |&lt;ul class="nav nav-tabs border-tab mb-0" id="animated-tab" role="tablist"&gt;
                            |  &lt;li class="nav-item"&gt;&lt;a class="nav-link tab-info" id="h-home-tab" data-bs-toggle="tab" href="#h-home" role="tab" aria-controls="h-home" aria-selected="true"&gt;&lt;i class="icofont icofont-building-alt"&gt;&lt;/i&gt;<span>Home</span>&lt;/a&gt;&lt;/li&gt;
                            |  &lt;li class="nav-item"&gt;&lt;a class="nav-link tab-info active" id="h-profile-tab" data-bs-toggle="tab" href="#h-profile" role="tab" aria-controls="h-profile" aria-selected="false"&gt;&lt;i class="icofont icofont-user-male"&gt;&lt;/i&gt;<span>Profile</span>&lt;/a&gt;&lt;/li&gt;
                            |  &lt;li class="nav-item"&gt;&lt;a class="nav-link tab-info" id="h-about-tab" data-bs-toggle="tab" href="#h-about" role="tab" aria-controls="h-about" aria-selected="false"&gt;&lt;i class="icofont icofont-business-man"&gt;&lt;/i&gt;<span>About Us</span>&lt;/a&gt;&lt;/li&gt;
                            |  &lt;li class="nav-item"&gt;&lt;a class="nav-link tab-info" id="h-gallery-tab" data-bs-toggle="tab" href="#h-gallery" role="tab" aria-controls="h-gallery" aria-selected="false"&gt;&lt;i class="icofont icofont-picture"&gt;&lt;/i&gt;<span>Gallery</span>&lt;/a&gt;&lt;/li&gt;
                            |  &lt;li class="nav-item"&gt;&lt;a class="nav-link tab-info" id="h-faq-tab" data-bs-toggle="tab" href="#h-faq" role="tab" aria-controls="h-faq" aria-selected="false"&gt;&lt;i class="icofont icofont-question-circle"&gt;&lt;/i&gt;<span>FAQ</span>&lt;/a&gt;&lt;/li&gt;
                            |&lt;/ul&gt;
                            |&lt;div class="tab-content" id="animated-tabContent"&gt;
                            |  &lt;div class="tab-pane fade" id="h-home" role="tabpanel" aria-labelledby="h-home-tab"&gt;
                            |    &lt;p class="pt-3"&gt;...&lt;/p&gt;
                            |  &lt;/div&gt;
                            |  &lt;div class="tab-pane fade show active" id="h-profile" role="tabpanel" aria-labelledby="h-profile-tab"&gt;
                            |    &lt;p class="pt-3"&gt;..&lt;/p&gt;
                            |  &lt;/div&gt;
                            |  &lt;div class="tab-pane fade" id="h-about" role="tabpanel" aria-labelledby="h-about-tab"&gt;
                            |    &lt;p class="pt-3"&gt;...&lt;/p&gt;
                            |  &lt;/div&gt;
                            |  &lt;div class="tab-pane fade" id="h-gallery" role="tabpanel" aria-labelledby="h-gallery-tab"&gt;
                            |    &lt;p class="pt-3"&gt;...&lt;/p&gt;
                            |  &lt;/div&gt;
                            |  &lt;div class="tab-pane fade" id="h-faq" role="tabpanel" aria-labelledby="h-faq-tab"&gt;
                            |    &lt;p class="pt-3"&gt;...&lt;/p&gt;
                            |  &lt;/div&gt;
                            |&lt;/div&gt; 
                            
          // Container-fluid Ends
        include ../../components/footer
    include ../../components/footer-files   
