Welcome! To UI Kits

    • map English
    • map Française
    • map English
    • map Русская
    • map Italia
  • 3
Basic Tabs
General information is shown here to give a quick understanding of the section. It highlights the main idea without going into details.Key points and important updates are summarized in this section
Relevant data and key values are displayed in an organized way. This section helps users quickly review important information. This area provides background information to help understand the main content.
Additional remarks or supporting details appear here. Useful for extra context or reference information. Use this space to provide supporting details or extra context.Extra details or explanations can be included for better understanding 
                                                    
  <ul class="nav nav-tabs app-tabs-primary d-inline-flex gap-2 p-1 b-r-20 bg-light-primary"
    id="Basic" role="tablist">
    <li class="nav-item" role="presentation">
        <button aria-controls="html-tab-pane" aria-selected="true"
            class="nav-link active b-r-15 b-r-20" data-bs-target="#html-tab-pane"
            data-bs-toggle="tab" id="html-tab" role="tab" type="button">Info</button>
    </li>
    <li class="nav-item" role="presentation">
        <button aria-controls="css-tab-pane" aria-selected="false"
            class="nav-link b-r-15 b-r-20" data-bs-target="#css-tab-pane"
            data-bs-toggle="tab" id="css-tab" role="tab" type="button">Data</button>
    </li>
    <li class="nav-item" role="presentation">
        <button aria-controls="php-tab-pane" aria-selected="false"
            class="nav-link b-r-15 b-r-20" data-bs-target="#php-tab-pane"
            data-bs-toggle="tab" id="php-tab" role="tab" type="button">Notes</button>
    </li>
</ul>

<div class="tab-content" id="BasicContent">
    <div aria-labelledby="html-tab" class="tab-pane fade show active"
        id="html-tab-pane" role="tabpanel" tabindex="0">
        General information is shown here to give a quick understanding of the section.
        It highlights the main idea without going into details. Key points and
        important updates are summarized in this section.
    </div>

    <div aria-labelledby="css-tab" class="tab-pane fade" id="css-tab-pane"
        role="tabpanel" tabindex="0">
        Relevant data and key values are displayed in an organized way. This section
        helps users quickly review important information.
        This area provides background information to help understand the main content.
    </div>

    <div aria-labelledby="php-tab" class="tab-pane fade" id="php-tab-pane"
        role="tabpanel" tabindex="0">
        Additional remarks or supporting details appear here. Useful for extra
        context or reference information.
        Use this space to provide supporting details or extra context. Extra details
        or explanations can be included for better understanding.
    </div>
</div>
Some Implements
This is the content of tab one.

The idea is to use :target pseudoclass to show tabs, use anchors with fragment identifiers to switch between them. The idea is to use pseudoclass to show tabs, use anchors with fragment identifiers to switch between them.

This is the content of tab two.
  1. Show only the last tab.
  2. If :target matches a tab, show it and hide all following siblings.
  3. Matches a tab, show it and hide all following siblings.
This is the content of tab three.

The idea is to use :target pseudoclass to show tabs, use anchors with fragment identifiers to switch between them. The idea is to use pseudoclass to show tabs, use anchors with fragment identifiers to switch between them.

                                
 <ul class="nav nav-tabs tab-outline-secondary bg-none d-inline-flex gap-2 p-1"
    id="custom" role="tablist">
    <li class="nav-item" role="presentation">
        <button aria-controls="connect-tab-pane" aria-selected="true"
            class="nav-link active b-r-20" data-bs-target="#connect-tab-pane"
            data-bs-toggle="tab" id="connect-tab" role="tab" type="button">
            <span class="bg-dark-700 me-2 h-35 w-35 overflow-hidden d-flex-center b-r-20">
                <img alt="avatar" class="img-fluid" src="https://pinmeets.com/assets/images/avatar/02.png">
            </span>Guthry
        </button>
    </li>

    <li class="nav-item" role="presentation">
        <button aria-controls="discover-tab-pane" aria-selected="false"
            class="nav-link b-r-20" data-bs-target="#discover-tab-pane"
            data-bs-toggle="tab" id="discover-tab" role="tab" type="button">
            <span class="bg-warning-700 me-2 h-35 w-35 overflow-hidden d-flex-center b-r-20">
                <img alt="avatar" class="img-fluid" src="https://pinmeets.com/assets/images/avatar/06.png">
            </span>Olive
        </button>
    </li>

    <li class="nav-item" role="presentation">
        <button aria-controls="order-tab-pane" aria-selected="false"
            class="nav-link b-r-20" data-bs-target="#order-tab-pane"
            data-bs-toggle="tab" id="order-tab" role="tab" type="button">
            <span class="bg-success-700 me-2 h-35 w-35 overflow-hidden d-flex-center b-r-20">
                <img alt="avatar" class="img-fluid" src="https://pinmeets.com/assets/images/avatar/10.png">
            </span>Lily
        </button>
    </li>
</ul>

<div class="tab-content" id="someTabs">
    <div aria-labelledby="connect-tab" class="tab-pane fade show active"
        id="connect-tab-pane" role="tabpanel" tabindex="0">
        <h6 class="mb-1">This is the content of tab one.</h6>
        <p class="mb-0">The idea is to use <code>:target</code> pseudoclass to show
            tabs, use anchors with fragment identifiers to switch between them. The idea is to use pseudoclass to
            show tabs, use anchors with fragment identifiers to switch between them.</p>
    </div>

    <div aria-labelledby="discover-tab" class="tab-pane fade" id="discover-tab-pane"
        role="tabpanel" tabindex="0">
        <h6 class="mb-1">This is the content of tab two.</h6>
        <ol>
            <li>Show only the last tab.</li>
            <li>If <code>:target</code> matches a tab, show it and hide all following siblings.</li>
            <li>Matches a tab, show it and hide all following siblings.</li>
        </ol>
    </div>

    <div aria-labelledby="order-tab" class="tab-pane fade" id="order-tab-pane"
        role="tabpanel" tabindex="0">
        <h6 class="mb-1">This is the content of tab three.</h6>
        <p class="mb-0">The idea is to use <code>:target</code> pseudoclass to show
            tabs, use anchors with fragment identifiers to switch between them. The idea is to use pseudoclass to
            show tabs, use anchors with fragment identifiers to switch between them.</p>
    </div>
</div>
Variants of directions
Additional remarks or supporting details appear here. Useful for extra context or reference information. Use this space to provide supporting details or extra context.Extra details or explanations can be included for better understanding
Additional remarks or supporting details appear here. Useful for extra context or reference information. Use this space to provide supporting details or extra context.Extra details or explanations can be included for better understanding
Additional remarks or supporting details appear here. Useful for extra context or reference information. Use this space to provide supporting details or extra context.Extra details or explanations can be included for better understanding 
                                
<div class="card-body" id="cardBody">
    <ul class="nav nav-tabs app-tabs-secondary p-1 b-r-20 bg-light-secondary" id="tabs"
        role="tablist">
        <li class="nav-item" role="presentation">
            <button class="nav-link active b-r-20" id="info-tab" data-bs-toggle="tab"
                data-bs-target="#info" type="button" role="tab">Info</button>
        </li>
        <li class="nav-item" role="presentation">
            <button class="nav-link b-r-20" id="data-tab" data-bs-toggle="tab"
                data-bs-target="#data" type="button" role="tab">Data</button>
        </li>
        <li class="nav-item" role="presentation">
            <button class="nav-link b-r-20" id="notes-tab" data-bs-toggle="tab"
                data-bs-target="#notes" type="button" role="tab">Notes</button>
        </li>
    </ul>

    <div class="tab-content mt-3 flex-grow-1" id="tabContent">
        <div class="tab-pane fade show active" id="info" role="tabpanel"
            aria-labelledby="info-tab">
            Additional remarks or supporting details appear here. Useful for extra
            context or reference information.
            Use this space to provide supporting details or extra context. Extra details
            or explanations can be included for better understanding
        </div>

        <div class="tab-pane fade" id="data" role="tabpanel" aria-labelledby="data-tab">
            Additional remarks or supporting details appear here. Useful for extra
            context or reference information.
            Use this space to provide supporting details or extra context. Extra details
            or explanations can be included for better understanding
        </div>

        <div class="tab-pane fade" id="notes" role="tabpanel"
            aria-labelledby="notes-tab">
            Additional remarks or supporting details appear here. Useful for extra
            context or reference information.
            Use this space to provide supporting details or extra context. Extra details
            or explanations can be included for better understanding
        </div>
    </div>
</div>
Tabs with icons
General information is shown here to give a quick understanding of the section. It highlights the main idea without going into details.Key points and important updates are summarized in this section
Relevant data and key values are displayed in an organized way. This section helps users quickly review important information. This area provides background information to help understand the main content.
Additional remarks or supporting details appear here. Useful for extra context or reference information. Use this space to provide supporting details or extra context.Extra details or explanations can be included for better understanding 
                                                    
 <ul class="nav nav-tabs tab-light-dark bg-none b-r-20" id="icon" role="tablist">
    <li class="nav-item" role="presentation">
        <button aria-controls="home-tab-pane" aria-selected="true"
            class="nav-link active b-r-15 b-r-20" data-bs-target="#home-tab-pane"
            data-bs-toggle="tab" id="home-tab" role="tab" type="button">
            <span class="bg-dark h-30 w-30 d-flex-center b-r-50 me-1">
                <i class="ti ti-lifebuoy pe-1 ps-1"></i>
            </span>Info
        </button>
    </li>

    <li class="nav-item" role="presentation">
        <button aria-controls="profile-tab-pane" aria-selected="false"
            class="nav-link b-r-15 b-r-20" data-bs-target="#profile-tab-pane"
            data-bs-toggle="tab" id="profile-tab" role="tab" type="button">
            <span class="bg-dark h-30 w-30 d-flex-center b-r-50 me-1">
                <i class="ti ti-keyboard-show pe-1 ps-1 text-white"></i>
            </span>Data
        </button>
    </li>

    <li class="nav-item" role="presentation">
        <button aria-controls="about-tab-pane" aria-selected="false"
            class="nav-link b-r-15 b-r-20" data-bs-target="#about-tab-pane"
            data-bs-toggle="tab" id="about-tab" role="tab" type="button">
            <span class="bg-dark h-30 w-30 d-flex-center b-r-50 me-1">
                <i class="ti ti-ball-basketball pe-1 ps-1"></i>
            </span>Notes
        </button>
    </li>
</ul>

<div class="tab-content" id="iconContent">
    <div aria-labelledby="home-tab" class="tab-pane fade show active"
        id="home-tab-pane" role="tabpanel" tabindex="0">
        General information is shown here to give a quick understanding of the section.
        It highlights the main idea without going into details. Key points and
        important updates are summarized in this section
    </div>

    <div aria-labelledby="profile-tab" class="tab-pane fade" id="profile-tab-pane"
        role="tabpanel" tabindex="0">
        Relevant data and key values are displayed in an organized way. This section
        helps users quickly review important information.
        This area provides background information to help understand the main content.
    </div>

    <div aria-labelledby="about-tab" class="tab-pane fade" id="about-tab-pane"
        role="tabpanel" tabindex="0">
        Additional remarks or supporting details appear here. Useful for extra
        context or reference information.
        Use this space to provide supporting details or extra context. Extra details
        or explanations can be included for better understanding
    </div>
</div>
Size
                                                    
   <ul class="nav nav-tabs tab-outline-info bg-light-info d-inline-flex gap-2 p-1 b-r-20"
    role="tablist">
    <li class="nav-item" role="presentation">
        <button aria-controls="car1-tab-pane" aria-selected="true"
            class="nav-link active b-r-15" data-bs-target="#car1-tab-pane"
            data-bs-toggle="tab" id="car1-tab" role="tab" type="button">
            <span class="text-info">Car</span>
        </button>
    </li>
    <li class="nav-item" role="presentation">
        <button aria-controls="bike1-tab-pane" aria-selected="false"
            class="nav-link b-r-15" data-bs-target="#bike1-tab-pane"
            data-bs-toggle="tab" id="bike1-tab" role="tab" type="button">
            <span class="text-info">Bike</span>
        </button>
    </li>
    <li class="nav-item" role="presentation">
        <button aria-controls="cycle1-tab-pane" aria-selected="false"
            class="nav-link b-r-15" data-bs-target="#cycle1-tab-pane"
            data-bs-toggle="tab" id="cycle1-tab" role="tab" type="button">
            <span class="text-info">Cycle</span>
        </button>
    </li>
</ul>

<ul class="nav nav-tabs tab-outline-info bg-light-info size-md d-inline-flex p-1 b-r-20"
    role="tablist">
    <li class="nav-item" role="presentation">
        <button aria-controls="car2-tab-pane" aria-selected="true"
            class="nav-link active b-r-15 b-r-20" data-bs-target="#car2-tab-pane"
            data-bs-toggle="tab" id="car2-tab" role="tab" type="button">
            <span class="text-info">Car</span>
        </button>
    </li>
    <li class="nav-item" role="presentation">
        <button aria-controls="bike2-tab-pane" aria-selected="false"
            class="nav-link b-r-15" data-bs-target="#bike2-tab-pane"
            data-bs-toggle="tab" id="bike2-tab" role="tab" type="button">
            <span class="text-info">Bike</span>
        </button>
    </li>
    <li class="nav-item" role="presentation">
        <button aria-controls="cycle2-tab-pane" aria-selected="false"
            class="nav-link b-r-15" data-bs-target="#cycle2-tab-pane"
            data-bs-toggle="tab" id="cycle2-tab" role="tab" type="button">
            <span class="text-info">Cycle</span>
        </button>
    </li>
</ul>

<ul class="nav nav-tabs tab-outline-info bg-light-info size-lg d-inline-flex p-1 b-r-20"
    role="tablist">
    <li class="nav-item" role="presentation">
        <button aria-controls="car3-tab-pane" aria-selected="true"
            class="nav-link active b-r-15" data-bs-target="#car3-tab-pane"
            data-bs-toggle="tab" id="car3-tab" role="tab" type="button">
            <span class="text-info">Car</span>
        </button>
    </li>
    <li class="nav-item" role="presentation">
        <button aria-controls="bike3-tab-pane" aria-selected="false"
            class="nav-link b-r-15" data-bs-target="#bike3-tab-pane"
            data-bs-toggle="tab" id="bike3-tab" role="tab" type="button">
            <span class="text-info">Bike</span>
        </button>
    </li>
    <li class="nav-item" role="presentation">
        <button aria-controls="cycle3-tab-pane" aria-selected="false"
            class="nav-link b-r-15" data-bs-target="#cycle3-tab-pane"
            data-bs-toggle="tab" id="cycle3-tab" role="tab" type="button">
            <span class="text-info">Cycle</span>
        </button>
    </li>
</ul>
Variants
                                                    
<ul class="nav nav-tabs app-tabs-secondary bg-light-secondary d-inline-flex p-1 b-r-20"
    role="tablist">
    <li class="nav-item" role="presentation">
        <button aria-controls="first-tab-pane" aria-selected="true"
            class="nav-link active b-r-15" data-bs-target="#first-tab-pane"
            data-bs-toggle="tab" id="first-tab" role="tab" type="button">
            <span class="bg-text-white">first</span>
        </button>
    </li>
    <li class="nav-item" role="presentation">
        <button aria-controls="second-tab-pane" aria-selected="false"
            class="nav-link b-r-15" data-bs-target="#second-tab-pane"
            data-bs-toggle="tab" id="second-tab" role="tab" type="button">
            <span class="bg-text-white">second</span>
        </button>
    </li>
    <li class="nav-item" role="presentation">
        <button aria-controls="third-tab-pane" aria-selected="false"
            class="nav-link b-r-15" data-bs-target="#third-tab-pane"
            data-bs-toggle="tab" id="third-tab" role="tab" type="button">
            <span class="bg-text-white">third</span>
        </button>
    </li>
</ul>

<ul class="nav nav-tabs app-tabs-secondary b-b-3-secondary d-inline-flex p-1 b-r-20"
    role="tablist">
    <li class="nav-item" role="presentation">
        <button aria-controls="first1-tab-pane" aria-selected="true"
            class="nav-link b-r-15" data-bs-target="#first1-tab-pane"
            data-bs-toggle="tab" id="first1-tab" role="tab" type="button">
            <span>first</span>
        </button>
    </li>
    <li class="nav-item" role="presentation">
        <button aria-controls="second1-tab-pane" aria-selected="false"
            class="nav-link active b-r-15" data-bs-target="#second1-tab-pane"
            data-bs-toggle="tab" id="second1-tab" role="tab" type="button">
            <span>second</span>
        </button>
    </li>
    <li class="nav-item" role="presentation">
        <button aria-controls="third1-tab-pane" aria-selected="false"
            class="nav-link b-r-15" data-bs-target="#third1-tab-pane"
            data-bs-toggle="tab" id="third1-tab" role="tab" type="button">
            <span>third</span>
        </button>
    </li>
</ul>

<ul class="nav nav-tabs tab-border-secondary bg-none d-inline-flex p-1 b-r-20"
    role="tablist">
    <li class="nav-item" role="presentation">
        <button aria-controls="first3-tab-pane" aria-selected="true"
            class="nav-link b-r-0" data-bs-target="#first3-tab-pane"
            data-bs-toggle="tab" id="first3-tab" role="tab" type="button">
            <span>first</span>
        </button>
    </li>
    <li class="nav-item" role="presentation">
        <button aria-controls="second3-tab-pane" aria-selected="false"
            class="nav-link active b-r-0" data-bs-target="#second3-tab-pane"
            data-bs-toggle="tab" id="second3-tab" role="tab" type="button">
            <span>second</span>
        </button>
    </li>
    <li class="nav-item" role="presentation">
        <button aria-controls="third3-tab-pane" aria-selected="false"
            class="nav-link b-r-0" data-bs-target="#third3-tab-pane"
            data-bs-toggle="tab" id="third3-tab" role="tab" type="button">
            <span>third</span>
        </button>
    </li>
</ul>