Tabs | Cuba - Premium Admin Template By Pixelstrap

Loading...

###### Don't Miss Out! Our new update has been released.

###### Something you love is now on sale!

Buy now !

### Bootstrap Tabs

##### Simple Tabs

Use `tab-link` with `active` class to jump particular tabs.

- Home
- Profile
- Contact

This is some placeholder content the 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.

- Visit Us: 2600 Hollywood Blvd,Florida, United States-33020
- Mail Us: contact@us@gmail.com
- Contact Number: (954) 357-7760

- 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.
- Visit Us: 2600 Hollywood Blvd,Florida, United States- 33020
- Mail Us: contact@us@gmail.com
- Contact Number: (954) 357-7760

    <ul class="simple-wrapper nav nav-tabs" id="myTab" role="tablist">
     <li class="nav-item"><a class="nav-link txt-primary" id="home-tab" data-bs-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a></li>
     <li class="nav-item"><a class="nav-link active txt-primary" id="profile-tabs" data-bs-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a></li>
     <li class="nav-item"><a class="nav-link txt-primary" id="contact-tab" data-bs-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">Contact</a></li>
    </ul>
    <div class="tab-content" id="myTabContent">
     <div class="tab-pane fade" id="home" role="tabpanel" aria-labelledby="home-tab">
       <p class="pt-3">This is some placeholder content the<b>Home tab's</b>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.</p>
     </div>
     <div class="tab-pane fade show active" id="profile" role="tabpanel" aria-labelledby="profile-tabs">
       <div class="pt-3 mb-0">
         <div class="flex-space flex-wrap align-items-center"><img class="tab-img" src="../assets/images/avtar/3.jpg" alt="profile">
           <ul class="flex flex-col gap-1">
             <li>
               <strong>Visit Us:</strong>2600 Hollywood Blvd,Florida, United States-33020
             </li>
             <li>
               <strong>Mail Us:</strong>contact@us@gmail.com
             </li>
             <li>
               <strong>Contact Number:</strong>(954) 357-7760
             </li>
           </ul>
         </div>
       </div>
     </div>
     <div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">
       <ul class="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>
         <li>
           <strong>Visit Us:</strong>2600 Hollywood Blvd,Florida, United States-33020
         </li>
         <li>
           <strong>Mail Us:</strong>contact@us@gmail.com
         </li>
         <li>
           <strong>Contact Number:</strong>(954) 357-7760
         </li>
       </ul>
     </div>
    </div>

##### Icons with Tabs

Use `tab-link`with `active` class to switch particular tabs and with `"Ico"` icons you can take `"tab".`

- Home
- Profile
- Contact

This is some placeholder content the 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.

- Visit Us: 278 Green Avenue Oakland, CA 94612
- Mail Us: MichaelMMcGowan@teleworm.us
- Contact Number: 510-767-0025

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.

Email Address

    <ul class="nav nav-tabs" id="icon-tab" role="tablist">
     <li class="nav-item">
       <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">
         <i class="icofont icofont-ui-home"></i>Home
       </a>
     </li>
     <li class="nav-item">
       <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">
         <i class="icofont icofont-man-in-glasses"></i>Profile
       </a>
     </li>
     <li class="nav-item">
       <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">
         <i class="icofont icofont-contacts"></i>Contact
       </a>
     </li>
    </ul>
    <div class="tab-content" id="icon-tabContent">
     <div class="tab-pane fade show active" id="icon-home" role="tabpanel" aria-labelledby="icon-home-tab">
       <p class="pt-3">This is some placeholder content the<b>home tab's</b>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.</p>
     </div>
     <div class="tab-pane fade" id="profile-icon" role="tabpanel" aria-labelledby="profile-icon-tabs">
       <div class="pt-3 mb-0">
         <div class="flex-space flex-wrap align-items-center">
           <img class="tab-img" src="../assets/images/avtar/7.jpg" alt="profile">
           <ul class="flex flex-col gap-1">
             <li>
               <strong>Visit Us:</strong>278 Green Avenue Oakland, CA 94612
             </li>
             <li>
               <strong>Mail Us:</strong>MichaelMMcGowan@teleworm.us
             </li>
             <li>
               <strong>Contact Number:</strong>510-767-0025
             </li>
           </ul>
         </div>
       </div>
     </div>
     <div class="tab-pane fade" id="contact-icon" role="tabpanel" aria-labelledby="contact-icon-tab">
       <p class="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.</p>
       <label class="form-label" for="exampleFormControlone">Email Address</label>
       <input class="form-control" id="exampleFormControlone" type="email" placeholder="youremail@gmail.com">
     </div>
    </div>

##### Vertical Tabs

Use `#var-pills-tab` id to change vertical tabs.

This is some placeholder content the 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.

This is some placeholder content the 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 .nav-powered navigation.

This is some placeholder content the 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 .nav-powered navigation.

This is some placeholder content the 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 .nav-powered navigation.

    <div class="grid grid-cols-12">
     <div class="col-span-4 md:col-span-12">
       <div class="nav flex-col nav-pills nav-secondary" id="ver-pills-tab" role="tablist" aria-orientation="vertical"><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">Home</a><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">Components</a><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">Pages<span class="badge badge-light-light p-1 px-2">3</span></a><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">Settings</a></div>
     </div>
     <div class="col-span-8 md:col-span-12">
       <div class="tab-content" id="ver-pills-tabContent">
         <div class="tab-pane fade" id="ver-pills-home" role="tabpanel" aria-labelledby="ver-pills-home-tab">
           <p>This is some placeholder content the<b>Home tab's</b>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</b>-powered navigation.</p>
         </div>
         <div class="tab-pane fade show active" id="ver-pills-components" role="tabpanel" aria-labelledby="ver-pills-components-tab">
           <p>This is some placeholder content the<b>Component tab's</b>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</b>-powered navigation.</p>
         </div>
         <div class="tab-pane fade" id="ver-pills-pages" role="tabpanel" aria-labelledby="ver-pills-pages-tab">
           <p>This is some placeholder content the<b>Page tab's</b>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</b>-powered navigation.</p>
         </div>
         <div class="tab-pane fade" id="ver-pills-settings" role="tabpanel" aria-labelledby="ver-pills-settings-tab">
           <p>This is some placeholder content the<b>Setting tab's</b>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</b>-powered navigation.</p>
         </div>
       </div>
     </div>
    </div>

##### Pills Tabs

Use `data-bs-toggle="pill"` for tabs pill shape.

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.

- 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.
- Visit Us: 4 Marigold Close, Glenmore Park, New South Wales, 2745 Australia- 2745
- Mail Us: SamuelMario@armyspy.com
- Contact Number: (02) 4733 6337

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.

    <ul class="nav nav-pills nav-primary" id="pills-tab" role="tablist">
     <li class="nav-item">
       <a class="nav-link" id="pills-aboutus-tab" data-bs-toggle="pill" href="#pills-aboutus" role="tab" aria-controls="pills-aboutus" aria-selected="true">About us
       </a>
     </li>
     <li class="nav-item">
       <a class="nav-link" id="pills-contactus-tab" data-bs-toggle="pill" href="#pills-contactus" role="tab" aria-controls="pills-contactus" aria-selected="false">Contact us
       </a>
     </li>
     <li class="nav-item">
       <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">Blog
       </a>
     </li>
    </ul>
    <div class="tab-content" id="pills-tabContent">
     <div class="tab-pane fade" id="pills-aboutus" role="tabpanel" aria-labelledby="pills-aboutus-tab">
       <p class="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.</p>
     </div>
     <div class="tab-pane fade" id="pills-contactus" role="tabpanel" aria-labelledby="pills-contactus-tab">
       <ul class="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>
         <li>
           <strong>Visit Us:</strong>4 Marigold Close, Glenmore Park, New South Wales, 2745 Australia- 2745
         </li>
         <li>
           <strong>Mail Us:</strong>SamuelMario@armyspy.com
         </li>
         <li>
           <strong>Contact Number:</strong>(02) 4733 6337
         </li>
       </ul>
     </div>
     <div class="tab-pane fade show active" id="pills-blog" role="tabpanel" aria-labelledby="pills-blog-tab">
       <div class="pt-3 flex align-items-center gap-3 pills-blogger">
         <div class="blog-wrapper">
           <img class="blog-img" src="../assets/images/dashboard-2/headphones.png" alt="head-phone">
         </div>
         <div class="blog-content">
           <p>
             <strong>Smart headphones</strong> — 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.
           </p>
         </div>
       </div>
     </div>
    </div>

##### Justify Tabs

Use `nav-link` with `active` class and set content using flex property.

CUBA Profiles For New Employees:

###### Kathy M. Anderson

440-494-0729

###### Lillian J. Goodfellow

239-664-7751

###### Carolyn A. Sutton

218-793-6609

###### Mary O. Miller

720-744-0921

###### Patricia H. Hummel

314-445-1451

###### Minnie F. Evans

718-740-8438

###### Thomas A. Leroy

305-539-6871

###### Mark S. Ward

303-561-8880

###### Emily T. Hooper

301-553-1836

###### Natasha W. Watson

267-605-4499

###### Jennifer A. Camacho

770-527-7554

###### Ann J. Strickland

469-218-4678

###### Jaclyn T. Duncan

413-618-9222

###### Christine H. Lin

909-219-0342

###### Ronnie S. Mountain

978-426-9732

###### Louise A. Hilliard

502-262-5600

###### Kayla Hutt

312-456-8275

###### Amber Cecil

802-662-2407

    <div class="tab-content" id="j-pills-tabContent">
     <div class="tab-pane fade" id="j-pills-web-designer" role="tabpanel" aria-labelledby="j-pills-web-designer-tab">
       <div class="designer-details">
         <div class="designer-profile">
           <div class="designer-wrap"><img class="designer-img" src="../assets/images/user/3.png" alt="profile">
             <div class="designer-content">
               <h6>Kathy M. Anderson</h6>
               <p>440-494-0729</p>
             </div>
           </div>
         </div>
         <div class="designer-profile">
           <div class="designer-wrap"><img class="designer-img" src="../assets/images/avtar/4.jpg" alt="profile">
             <div class="designer-content">
               <h6>Lillian J. Goodfellow</h6>
               <p>239-664-7751</p>
             </div>
           </div>
         </div>
         <div class="designer-profile">
           <div class="designer-wrap"><img class="designer-img" src="../assets/images/user/2.jpg" alt="profile">
             <div class="designer-content">
               <h6>Carolyn A. Sutton</h6>
               <p>218-793-6609</p>
             </div>
           </div>
         </div>
         <div class="designer-profile">
           <div class="designer-wrap"><img class="designer-img" src="../assets/images/avtar/11.jpg" alt="profile">
             <div class="designer-content">
               <h6>Mary O. Miller</h6>
               <p>720-744-0921</p>
             </div>
           </div>
         </div>
         <div class="designer-profile">
           <div class="designer-wrap"><img class="designer-img" src="../assets/images/avtar/16.jpg" alt="profile">
             <div class="designer-content">
               <h6>Patricia H. Hummel</h6>
               <p>314-445-1451</p>
             </div>
           </div>
         </div>
         <div class="designer-profile">
           <div class="designer-wrap"><img class="designer-img" src="../assets/images/blog/4.jpg" alt="profile">
             <div class="designer-content">
               <h6>Minnie F. Evans</h6>
               <p>718-740-8438</p>
             </div>
           </div>
         </div>
       </div>
     </div>
     <div class="tab-pane fade show active" id="j-pills-UX-designer" role="tabpanel" aria-labelledby="j-pills-UX-designer-tab">
       <div class="designer-details">
         <div class="designer-profile">
           <div class="designer-wrap"><img class="designer-img" src="../assets/images/dashboard-11/user/1.jpg" alt="profile">
             <div class="designer-content">
               <h6>Thomas A. Leroy</h6>
               <p>305-539-6871</p>
             </div>
           </div>
         </div>
         <div class="designer-profile">
           <div class="designer-wrap"><img class="designer-img" src="../assets/images/dashboard-11/user/4.jpg" alt="profile">
             <div class="designer-content">
               <h6>Mark S. Ward</h6>
               <p>303-561-8880</p>
             </div>
           </div>
         </div>
         <div class="designer-profile">
           <div class="designer-wrap"><img class="designer-img" src="../assets/images/dashboard-11/user/2.jpg" alt="profile">
             <div class="designer-content">
               <h6>Emily T. Hooper</h6>
               <p>301-553-1836</p>
             </div>
           </div>
         </div>
         <div class="designer-profile">
           <div class="designer-wrap"><img class="designer-img" src="../assets/images/dashboard-11/user/7.jpg" alt="profile">
             <div class="designer-content">
               <h6>Natasha W. Watson</h6>
               <p>267-605-4499</p>
             </div>
           </div>
         </div>
         <div class="designer-profile">
           <div class="designer-wrap"><img class="designer-img" src="../assets/images/dashboard-11/user/10.jpg" alt="profile">
             <div class="designer-content">
               <h6>Jennifer A. Camacho</h6>
               <p>770-527-7554</p>
             </div>
           </div>
         </div>
         <div class="designer-profile">
           <div class="designer-wrap"><img class="designer-img" src="../assets/images/dashboard-11/user/11.jpg" alt="profile">
             <div class="designer-content">
               <h6>Ann J. Strickland</h6>
               <p>469-218-4678</p>
             </div>
           </div>
         </div>
       </div>
     </div>
     <div class="tab-pane fade" id="j-pills-IOT-developer" role="tabpanel" aria-labelledby="j-pills-IOT-developer-tab">
       <div class="designer-details">
         <div class="designer-profile">
           <div class="designer-wrap"><img class="designer-img" src="../assets/images/dashboard-11/user/3.jpg" alt="profile">
             <div class="designer-content">
               <h6>Jaclyn T. Duncan</h6>
               <p>413-618-9222</p>
             </div>
           </div>
         </div>
         <div class="designer-profile">
           <div class="designer-wrap"><img class="designer-img" src="../assets/images/dashboard-11/user/8.jpg" alt="profile">
             <div class="designer-content">
               <h6>Christine H. Lin</h6>
               <p>909-219-0342</p>
             </div>
           </div>
         </div>
         <div class="designer-profile">
           <div class="designer-wrap"><img class="designer-img" src="../assets/images/dashboard-11/user/12.jpg" alt="profile">
             <div class="designer-content">
               <h6>Ronnie S. Mountain</h6>
               <p>978-426-9732</p>
             </div>
           </div>
         </div>
         <div class="designer-profile">
           <div class="designer-wrap"><img class="designer-img" src="../assets/images/dashboard-11/user/5.jpg" alt="profile">
             <div class="designer-content">
               <h6>Louise A. Hilliard</h6>
               <p>502-262-5600</p>
             </div>
           </div>
         </div>
         <div class="designer-profile">
           <div class="designer-wrap"><img class="designer-img" src="../assets/images/dashboard-9/user/3.png" alt="profile">
             <div class="designer-content">
               <h6>Kayla Hutt</h6>
               <p>312-456-8275</p>
             </div>
           </div>
         </div>
         <div class="designer-profile">
           <div class="designer-wrap"><img class="designer-img" src="../assets/images/dashboard-11/user/9.jpg" alt="profile">
             <div class="designer-content">
               <h6>Amber Cecil</h6>
               <p>802-662-2407</p>
             </div>
           </div>
         </div>
       </div>
     </div>
    </div>

##### Material Style Left Tabs

Use `nav-link` with `active` class for switching to another tabs and`aria-orientation='vertical'`for vertical tabs.

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.

- Name: Jake Catlin
- Visit Us: 50006 Ehrenberg/Parker,Arkansas-85334
- Mail Us: Jake.@gmail.com
- Contact Number: (928) 923-7940

###### Dalbult Caslin

stroman.rogers@gmail.com

Compare Prices Find the Best Computer Assessors Fronted Issue.

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.

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.

    <div class="tabs-responsive-side">
     <div class="material-wrapper">
       <div class="flex">
         <div class="nav flex-col nav-secondary border-tab nav-left" id="sideline-tab" role="tablist" aria-orientation="vertical"><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">Home</a><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">Profile</a><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">Inbox</a><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">Settings</a></div>
       </div>
       <div class="material-content">
         <div class="tab-content" id="sideline-tabContent">
           <div class="tab-pane fade show active" id="sideline-home" role="tabpanel" aria-labelledby="sideline-home-tab">
             <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.</p>
           </div>
           <div class="tab-pane fade" id="sideline-profile" role="tabpanel" aria-labelledby="sideline-profile-tab">
             <div class="flex-space flex-wrap align-items-center"><img class="tab-img" src="../assets/images/ecommerce/08.jpg" alt="profile">
               <ul class="flex flex-col gap-1">
                 <li><strong>Name:</strong>Jake Catlin</li>
                 <li><strong>Visit Us:</strong>50006 Ehrenberg/Parker,Arkansas-85334</li>
                 <li><strong>Mail Us:</strong>Jake.@gmail.com</li>
                 <li><strong>Contact Number:</strong>(928) 923-7940</li>
               </ul>
             </div>
           </div>
           <div class="tab-pane fade" id="sideline-messages" role="tabpanel" aria-labelledby="sideline-messages-tab">
             <div class="card-body p-0">
               <div class="main-inbox">
                 <div class="header-inbox justify-start gap-2">
                   <div class="header-left-inbox">
                     <div class="inbox-img"><img src="../assets/images/ecommerce/07.jpg" alt="profile"></div>
                   </div>
                   <div class="inbox-content">
                     <h6>Dalbult Caslin</h6>
                     <p class="text-muted">stroman.rogers@gmail.com</p>
                   </div>
                 </div>
                 <div class="body-inbox mt-2">
                   <div class="body-h-wrapper"><i class="me-2 tab-space icofont icofont-star"></i><em>Compare Prices Find the Best Computer Assessors Fronted Issue.</em></div>
                   <p class="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.</p>
                 </div>
               </div>
             </div>
           </div>
           <div class="tab-pane fade" id="sideline-settings" role="tabpanel" aria-labelledby="sideline-settings-tab">
             <p><strong>In this situation, you would probably do two things:</strong> 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.</p>
           </div>
         </div>
       </div>
     </div>
    </div>

##### Material Style Tabs

Use `nav-link` with `active` class to switch and customize tabs.

###### User Details:

# | Name | Country | Contact No
--- | --- | --- | ---
1 | Neha | India | 5698741236
2 | Jacklin | Thailand | 7800030320

###### Description:

Technology | Interests | Salary Expected
--- | --- | ---
Web Designer | HTML,CSS,JS,SCSS | 45000
UX Designer | Figma,Photoshop,Sketch | 20000

###### Review:

# | Name | Country | Rating
--- | --- | --- | ---
1 | Neha | India |
2 | Irfan | India |

    <ul class="nav nav-tabs border-tab border-0 mb-0 nav-secondary" id="topline-tab" role="tablist">
     <li class="nav-item"><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"><i class="icofont icofont-man-in-glasses"></i>User</a></li>
     <li class="nav-item"><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"><i class="icofont icofont-file-document"></i>Description</a></li>
     <li class="nav-item"><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"><i class="icofont icofont-star"></i>Review</a></li>
    </ul>
    <div class="tab-content" id="topline-tabContent">
     <div class="tab-pane fade show active" id="topline-top-user" role="tabpanel" aria-labelledby="topline-top-user-tab">
       <div class="card-body px-0 pb-0">
         <div class="user-header pb-2">
           <h6 class="fw-bold">User Details:</h6>
         </div>
         <div class="user-content">
           <div class="overflow-x-auto custom-scrollbar">
             <table class="table mb-0">
               <thead>
                 <tr>
                   <th scope="col">#</th>
                   <th scope="col">Name</th>
                   <th scope="col">Country</th>
                   <th scope="col">Contact No</th>
                 </tr>
               </thead>
               <tbody>
                 <tr>
                   <th scope="row">1</th>
                   <td>Neha</td>
                   <td>India </td>
                   <td>5698741236</td>
                 </tr>
                 <tr>
                   <th scope="row">2</th>
                   <td>Jacklin</td>
                   <td>Thailand</td>
                   <td>7800030320</td>
                 </tr>
               </tbody>
             </table>
           </div>
         </div>
       </div>
     </div>
     <div class="tab-pane fade" id="topline-top-description" role="tabpanel" aria-labelledby="topline-top-description-tab">
       <div class="card-body px-0 pb-0">
         <div class="user-header pb-2">
           <h6 class="fw-bold">Description:</h6>
         </div>
         <div class="user-content">
           <div class="overflow-x-auto custom-scrollbar">
             <table class="table mb-0">
               <thead>
                 <tr>
                   <th scope="col">Technology</th>
                   <th scope="col">Interests</th>
                   <th scope="col">Salary Expected</th>
                 </tr>
               </thead>
               <tbody>
                 <tr>
                   <td>Web Designer</td>
                   <td>HTML,CSS,JS,SCSS</td>
                   <td>45000</td>
                 </tr>
                 <tr>
                   <td>UX Designer</td>
                   <td>Figma,Photoshop,Sketch</td>
                   <td>20000</td>
                 </tr>
               </tbody>
             </table>
           </div>
         </div>
       </div>
     </div>
     <div class="tab-pane fade" id="topline-top-review" role="tabpanel" aria-labelledby="topline-top-review-tab">
       <div class="card-body px-0 pb-0">
         <div class="user-header pb-2">
           <h6 class="fw-bold">Review:</h6>
         </div>
         <div class="user-content">
           <div class="overflow-x-auto custom-scrollbar">
             <table class="table mb-0">
               <thead>
                 <tr>
                   <th scope="col">#</th>
                   <th scope="col">Name</th>
                   <th scope="col">Country</th>
                   <th scope="col">Rating</th>
                 </tr>
               </thead>
               <tbody>
                 <tr>
                   <th scope="row">1</th>
                   <td>Neha</td>
                   <td>India </td>
                   <td><i class="ico-color icofont icofont-star"></i><i class="ico-color icofont icofont-star"></i><i class="ico-color icofont icofont-star"></i><i class="ico-color icofont icofont-star"></i><i class="ico-color icofont icofont-star"></i></td>
                 </tr>
                 <tr>
                   <th scope="row">2</th>
                   <td>Irfan</td>
                   <td>India</td>
                   <td><i class="ico-color icofont icofont-star"></i><i class="ico-color icofont icofont-star"></i><i class="ico-color icofont icofont-star"></i></td>
                 </tr>
               </tbody>
             </table>
           </div>
         </div>
       </div>
     </div>
    </div>

##### Border Tabs

Use `nav-link` with `active` class to add bottom border styles.

This is some placeholder content the 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.To convey the active state to assistive technologies, use the aria-current attribute — using the page value for current page, or true for the current item in a set. The base nav component is built with flexbox and provide a strong foundation for building all types of navigation components.

###### Dalbult Caslin

stroman.rogers@gmail.com

- 8 JAN 11:30PM

Compare Prices Find the Best Computer Assessors Fronted Issue.

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.

Email Address
Example Textarea

    <ul class="nav nav-tabs border-tab mb-0" id="border-tab" role="tablist">
     <li class="nav-item"><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"><i class="icofont icofont-ui-home"> </i>Home</a></li>
     <li class="nav-item"><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"><i class="icofont icofont-ui-message"></i>Inbox</a></li>
     <li class="nav-item"><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"><i class="icofont icofont-man-in-glasses"></i>Contact</a></li>
    </ul>
    <div class="tab-content" id="border-tabContent">
     <div class="tab-pane fade" id="bottom-home" role="tabpanel" aria-labelledby="bottom-home-tab">
       <p class="pt-3">This is some placeholder content the<strong>Home tab's</strong>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</strong>-powered navigation.To convey the<strong>active</strong> state to assistive technologies, use the<strong>aria-current</strong> attribute — using the page value for current page, or true for the current item in a set. The base<strong>nav</strong> component is built with flexbox and provide a strong foundation for building all types of navigation components.</p>
     </div>
     <div class="tab-pane fade show active" id="bottom-inbox" role="tabpanel" aria-labelledby="bottom-inbox-tab">
       <div class="card-body pb-0">
         <div class="main-inbox">
           <div class="header-inbox">
             <div class="header-left-inbox">
               <div class="inbox-img"><img src="../assets/images/ecommerce/06.jpg" alt="profile"></div>
               <div class="inbox-content">
                 <h6>Dalbult Caslin </h6>
                 <p class="text-muted">stroman.rogers@gmail.com</p>
               </div>
             </div>
             <ul class="header-right-inbox">
               <li>
                 <p>8 JAN 11:30PM</p>
               </li>
               <li><i class="txt-danger icofont icofont-ui-delete"></i></li>
               <li><i class="icofont icofont-telegram"></i></li>
             </ul>
           </div>
           <div class="body-inbox mt-2">
             <div class="body-h-wrapper"><i class="me-2 tab-space icofont icofont-star"></i><em>Compare Prices Find the Best Computer Assessors Fronted Issue.</em></div>
             <p class="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.</p>
           </div>
         </div>
       </div>
     </div>
     <div class="tab-pane fade" id="bottom-contact" role="tabpanel" aria-labelledby="bottom-contact-tab">
       <div class="card-body px-0 pb-0">
         <div class="form">
           <div class="mb-3">
             <label class="form-label" for="exampleFormControltwo">Email Address</label>
             <input class="form-control" id="exampleFormControltwo" type="email" placeholder="youremail@gmail.com">
           </div>
           <div class="mb-0">
             <label class="form-label" for="exampleFormControlTextarea1">Example Textarea</label>
             <textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
           </div>
         </div>
       </div>
     </div>
    </div>

##### Background Pill Tabs

Use `active` class on the`nav-link` and backdrop tab with the `new-pills` class.

     <div class="bg-navbar">
      <ul class="nav nav-pills nav-primary" id="bg-pill-tab" role="tablist">
        <li class="nav-item"><a class="nav-link" id="pills-sofa-tab" data-bs-toggle="pill" href="#pills-sofa" role="tab" aria-controls="pills-sofa" aria-selected="true">Sofa</a></li>
        <li class="nav-item"><a class="nav-link" id="pills-chairs-tab" data-bs-toggle="pill" href="#pills-chairs" role="tab" aria-controls="pills-chairs" aria-selected="false">Chairs</a></li>
        <li class="nav-item"><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">Tables</a></li>
      </ul>
      <div class="tab-content" id="bg-pill-tabContent">
        <div class="tab-pane fade" id="pills-sofa" role="tabpanel" aria-labelledby="pills-sofa-tab">
          <div class="grid grid-cols-12 gap-3 pt-3">
            <div class="col-span-4"><img class="max-w-full.h-auto" src="../assets/images/switch/s1.jpg" alt="sofa"></div>
            <div class="col-span-4"><img class="max-w-full.h-auto" src="../assets/images/switch/s2.jpg" alt="sofa"></div>
            <div class="col-span-4"><img class="max-w-full.h-auto" src="../assets/images/switch/s3.jpg" alt="sofa"></div>
          </div>
        </div>
        <div class="tab-pane fade" id="pills-chairs" role="tabpanel" aria-labelledby="pills-chairs-tab">
          <div class="grid grid-cols-12 gap-3 pt-3">
            <div class="col-span-4"><img class="max-w-full.h-auto" src="../assets/images/switch/c1.jpg" alt="chairs"></div>
            <div class="col-span-4"><img class="max-w-full.h-auto" src="../assets/images/switch/c2.jpg" alt="chairs"></div>
            <div class="col-span-4"><img class="max-w-full.h-auto" src="../assets/images/switch/c3.jpg" alt="chairs"></div>
          </div>
        </div>
        <div class="tab-pane fade show active" id="pills-tables" role="tabpanel" aria-labelledby="pills-tables-tab">
          <div class="grid grid-cols-12 gap-3 pt-3">
            <div class="col-span-4"><img class="max-w-full.h-auto" src="../assets/images/switch/t1.jpg" alt="table"></div>
            <div class="col-span-4"><img class="max-w-full.h-auto" src="../assets/images/switch/t2.jpg" alt="table"></div>
            <div class="col-span-4"><img class="max-w-full.h-auto" src="../assets/images/switch/t3.jpg" alt="table"></div>
          </div>
        </div>
      </div>
    </div>

##### Arrow Tabs

Use `active` class on the`nav-link` and arrow tab with the `new-item` class.

     <div class="bg-navbar arrow-tabs">
      <ul class="nav nav-pills mb-3" id="pills-bg-tab" role="tablist">
        <li class="nav-item"><a class="nav-link" id="pills-account-tab" data-bs-toggle="pill" href="#pills-account" role="tab" aria-controls="pills-account" aria-selected="true">Account Info</a></li>
        <li class="nav-item"><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">Portfolio</a></li>
        <li class="nav-item"><a class="nav-link" id="pills-skills-tab" data-bs-toggle="pill" href="#pills-skills" role="tab" aria-controls="pills-skills" aria-selected="false">Skills</a></li>
        <li class="nav-item"><a class="nav-link" id="pills-installment-tab" data-bs-toggle="pill" href="#pills-installment" role="tab" aria-controls="pills-installment" aria-selected="false">Installment</a></li>
      </ul>
      <div class="tab-content" id="pills-bg-tabContent">
        <div class="tab-pane fade" id="pills-account" role="tabpanel" aria-labelledby="pills-account-tab">
          <div class="common-box"><i class="fa-solid fa-circle-arrow-right"></i>
            <p>...</p>
          </div>
        <div class="common-box"><i class="fa-solid fa-circle-arrow-right"></i>
          <p>...</p>
        </div>
      </div>
      <div class="tab-pane fade show active" id="pills-portfolio" role="tabpanel" aria-labelledby="pills-portfolio-tab">
        <div class="grid grid-cols-12 gap-3">
          <div class="col-span-4"><img class="max-w-full.h-auto" src="../assets/images/switch/t4.jpg" alt="table"></div>
          <div class="col-span-4"><img class="max-w-full.h-auto" src="../assets/images/switch/t5.jpg" alt="table"></div>
          <div class="col-span-4"><img class="max-w-full.h-auto" src="../assets/images/switch/t6.jpg" alt="table"></div>
        </div>
      </div>
      <div class="tab-pane fade" id="pills-skills" role="tabpanel" aria-labelledby="pills-skills-tab">
        <div class="skill-tab">
          <h6 class="pb-1">In what area are you an expert?</h6>
          <p>...</p>
          <ul>
            <li>HTML5</li>
            <li>CSS3</li>
            <li>Javascript</li>
            <li>React</li>
            <li>SQL</li>
          </ul>
        </div>
      </div>
      <div class="tab-pane fade" id="pills-installment" role="tabpanel" aria-labelledby="pills-installment-tab">
        <div class="common-box"><i class="fa-solid fa-circle-arrow-right"></i>
          <p>...</p>
        </div>
        <div class="common-box"><i class="fa-solid fa-circle-arrow-right"></i>
          <p>...</p>
        </div>
      </div>
    </div>
    </div>

##### Bottom Tabs

Use `active` class on the`nav-link`. It is possible to build a arrow tab with the `new-item` class.

     <div class="bg-navbar bottom-navbar">
      <div class="tab-content" id="bottom-pill-tabContent">
        <div class="tab-pane fade" id="pills-css" role="tabpanel" aria-labelledby="pills-css-tab">
          <div class="common-flex"><img src="../assets/images/tree/css.png" alt="">
            <H5>CSS</H5>
          </div>
          <div class="tab-paragraph"><i class="fa-solid fa-circle-arrow-right"></i>
            <P>"..."</P>
          </div>
          <div class="tab-paragraph"><i class="fa-solid fa-circle-arrow-right"></i>
            <p>...</p>
          </div>
        </div>
        <div class="tab-pane fade show active" id="pills-vendor" role="tabpanel" aria-labelledby="pills-vendor-tab">
          <div class="common-flex"><img src="../assets/images/tree/vendor.png" alt="#">
            <H5>Vendors</H5>
          </div>
          <div class="tab-paragraph"><i class="fa-solid fa-circle-arrow-right"></i>
            <P>...</P>
          </div>
          <div class="tab-paragraph"><i class="fa-solid fa-circle-arrow-right"></i>
            <p>...</p>
          </div>
        </div>
        <div class="tab-pane fade" id="pills-js" role="tabpanel" aria-labelledby="pills-js-tab">
          <div class="common-flex"><img src="../assets/images/tree/js.png" alt="">
            <H5>Javascript</H5>
          </div>
          <div class="tab-paragraph"><i class="fa-solid fa-circle-arrow-right"></i>
            <P>...</P>
          </div>
          <div class="tab-paragraph"><i class="fa-solid fa-circle-arrow-right"></i>
            <p>...</p>
          </div>
        </div>
      </div>
      <ul class="nav nav-pills nav-primary" id="bottom-pill-tab" role="tablist">
        <li class="nav-item"><a class="nav-link" id="pills-css-tab" data-bs-toggle="pill" href="#pills-css" role="tab" aria-controls="pills-css" aria-selected="true"><img src="../assets/images/tree/css.png" alt="">CSS</a></li>
        <li class="nav-item"><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"> <img src="../assets/images/tree/vendor.png" alt="">Vendors</a></li>
        <li class="nav-item"><a class="nav-link" id="pills-js-tab" data-bs-toggle="pill" href="#pills-js" role="tab" aria-controls="pills-js" aria-selected="false"> <img src="../assets/images/tree/js.png" alt="">Javascript</a></li>
      </ul>
    </div>

##### Animated Tabs

Use `active` class on the `nav-link`. It is possible to build a animated tab with the `horizontal-icons-tab` class.

- Home
- Profile
- About Us
- Gallery
- FAQ

This is some placeholder content for the 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.

This is some placeholder content the 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.

This is some placeholder content the 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.

This is some placeholder content the 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.

This is some placeholder content the 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.

    <ul class="nav nav-tabs border-tab mb-0" id="animated-tab" role="tablist">
     <li class="nav-item"><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"><i class="icofont icofont-building-alt"></i>Home</a></li>
     <li class="nav-item"><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"><i class="icofont icofont-user-male"></i>Profile</a></li>
     <li class="nav-item"><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"><i class="icofont icofont-business-man"></i>About Us</a></li>
     <li class="nav-item"><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"><i class="icofont icofont-picture"></i>Gallery</a></li>
     <li class="nav-item"><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"><i class="icofont icofont-question-circle"></i>FAQ</a></li>
    </ul>
    <div class="tab-content" id="animated-tabContent">
     <div class="tab-pane fade" id="h-home" role="tabpanel" aria-labelledby="h-home-tab">
       <p class="pt-3">...</p>
     </div>
     <div class="tab-pane fade show active" id="h-profile" role="tabpanel" aria-labelledby="h-profile-tab">
       <p class="pt-3">..</p>
     </div>
     <div class="tab-pane fade" id="h-about" role="tabpanel" aria-labelledby="h-about-tab">
       <p class="pt-3">...</p>
     </div>
     <div class="tab-pane fade" id="h-gallery" role="tabpanel" aria-labelledby="h-gallery-tab">
       <p class="pt-3">...</p>
     </div>
     <div class="tab-pane fade" id="h-faq" role="tabpanel" aria-labelledby="h-faq-tab">
       <p class="pt-3">...</p>
     </div>
    </div>