Default page

Edit File: base-navtab.html

<!DOCTYPE html>
<html lang="zxx">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="x-ua-compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta
      name="description"
      content="Fully Responsive Admin & Dashboard Template"
    />
    <meta name="keyword" content="" />
    <meta name="author" content="WRAPCODERS" />

<link
      rel="preconnect"
      href="https://fonts.googleapis.com"
    />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Inter:wght@100..900&family=Public+Sans:ital,wght@0,100..900;1,100..900&display=swap"
      rel="stylesheet"
    />

<link
      rel="shortcut icon"
      type="image/x-icon"
      href="./../assets/images/favicon.ico"
    />

<title>NavTab | Expodash - Admin & Dashboard Template</title>

<link rel="stylesheet" href="./../assets/vendors/metismenu/metisMenu.min.css">

<link rel="stylesheet" href="./../assets/vendors/@flaticon/flaticon-uicons/css/all/all.css">

<link rel="stylesheet" type="text/css" href="./../assets/css/theme.min.css">

<script src="./../assets/js/color-modes.min.js"></script>

</head>

<body>
    
    
    
    <div class="main-wrapper">
      
      
      
      <aside
        class="edash-menu position-fixed z-1030 start-0 top-0 end-0 bottom-0 bg-body-tertiary border-end"
        id="edash-menu"
      >
        
        <div
          class="edash-menu-header ht-80 d-flex align-items-center px-5 py-4 position-relative"
        >
          <a href="index.html" class="edash-logo">
            <img
              src="./../assets/images/logo-main.png"
              alt="logo"
              class="img-fluid edash-logo-main"
            />
            <img
              src="./../assets/images/logo-abbr.png"
              alt="logo"
              class="img-fluid edash-logo-abbr"
            />
          </a>
        </div>
        
        
        <nav
          class="edash-sidebar-nav position-relative z-2"
          id="edash-sidebar-nav"
          style="height: calc(100vh - 5rem)"
        >
          <ul class="edash-metismenu" id="edash-metismenu">
            <li
              class="nav-label mb-2 mt-4 px-5 fs-11 fw-semibold text-muted text-uppercase"
              style="letter-spacing: 1px"
            >
              Navigations
            </li>
            <li>
              <a class="has-arrow" href="javascript:void(0);">
                <i class="fi fi-rr-airplay"></i>
                <span class="mm-text">Dashboards</span>
              </a>
              <ul>
                <li><a class="sub-menu" href="index.html">eCommerce</a></li>
                <li>
                  <a class="sub-menu" href="./index-analytics.html">Analytics</a>
                </li>
              </ul>
            </li>
            <li
              class="nav-label mb-2 mt-4 px-5 fs-11 fw-semibold text-muted text-uppercase"
              style="letter-spacing: 1px"
            >
              Webapps
            </li>
            <li>
              <a href="./app-chat.html">
                <i class="fi fi-rr-comment-alt-dots"></i>
                <span class="mm-text">Chat</span>
              </a>
            </li>
            <li>
              <a href="./app-email.html">
                <i class="fi fi-rr-envelope-dot"></i>
                <span class="mm-text">Email</span>
              </a>
            </li>
            <li>
              <a href="./app-invoice.html">
                <i class="fi fi-rr-file-invoice"></i>
                <span class="mm-text">Invoice</span>
              </a>
            </li>
            <li>
              <a href="./app-kanban.html">
                <i class="fi fi-rr-square-kanban"></i>
                <span class="mm-text">Kanban</span>
              </a>
            </li>
            <li>
              <a href="./app-calendar.html">
                <i class="fi fi-rr-calendar"></i>
                <span class="mm-text">Calendar</span>
              </a>
            </li>
            <li>
              <a href="./app-file-manager.html">
                <i class="fi fi-rr-move-to-folder"></i>
                <span class="mm-text">File Manager</span>
              </a>
            </li>
            <li
              class="nav-label mb-2 mt-4 px-5 fs-11 fw-semibold text-muted text-uppercase"
              style="letter-spacing: 1px"
            >
              Components
            </li>
            <li>
              <a class="has-arrow" href="javascript:void(0);">
                <i class="fi fi-rr-layers"></i>
                <span class="mm-text">Base</span>
              </a>
              <ul>
                <li>
                  <a href="./base-accordion.html" class="sub-menu">Accordion</a>
                </li>
                <li><a href="./base-avatar.html" class="sub-menu">Avatar</a></li>
                <li><a href="./base-button.html" class="sub-menu">Button</a></li>
                <li><a href="./base-card.html" class="sub-menu">Card</a></li>
                <li><a href="./base-carousel.html" class="sub-menu">Carousel</a></li>
                <li><a href="./base-dropdown.html" class="sub-menu">Dropdown</a></li>
                <li><a href="./base-modal.html" class="sub-menu">Modal</a></li>
                <li><a href="./base-navtab.html" class="sub-menu">NavTab</a></li>
                <li><a href="./base-toast.html" class="sub-menu">Toast</a></li>
                <li>
                  <a href="./base-miscellaneous.html" class="sub-menu"
                    >Miscellaneous</a
                  >
                </li>
              </ul>
            </li>
            <li>
              <a class="has-arrow" href="javascript:void(0);">
                <i class="fi fi-rr-heart"></i>
                <span class="mm-text">Icons</span>
              </a>
              <ul>
                <li><a href="./icon-feather.html" class="sub-menu">Feather</a></li>
                <li><a href="./icon-flaticon.html" class="sub-menu">Flaticon</a></li>
                <li>
                  <a href="./icon-bootstrap.html" class="sub-menu">Bootstrap</a>
                </li>
                <li>
                  <a href="./icon-fontawesome.html" class="sub-menu">Fontawesome</a>
                </li>
              </ul>
            </li>
            <li>
              <a class="has-arrow" href="javascript:void(0);">
                <i class="fi fi-rr-table-list"></i>
                <span class="mm-text">Tables</span>
              </a>
              <ul>
                <li><a href="./table-default.html" class="sub-menu">Default</a></li>
                <li><a href="./table-bstable.html" class="sub-menu">bsTable</a></li>
                <li><a href="./table-footable.html" class="sub-menu">fooTable</a></li>
                <li>
                  <a href="./table-datatable.html" class="sub-menu">dataTable</a>
                </li>
              </ul>
            </li>
            <li>
              <a class="has-arrow" href="javascript:void(0);">
                <i class="fi fi-rr-chart-histogram"></i>
                <span class="mm-text">Charts</span>
              </a>
              <ul>
                <li><a href="./chart-apex.html" class="sub-menu">Apex</a></li>
                <li><a href="./chart-float.html" class="sub-menu">Float</a></li>
                <li><a href="./chart-chartjs.html" class="sub-menu">ChartJS</a></li>
                <li><a href="./chart-peity.html" class="sub-menu">Peity</a></li>
                <li><a href="./chart-progress.html" class="sub-menu">Progress</a></li>
              </ul>
            </li>
            <li>
              <a class="has-arrow" href="javascript:void(0);">
                <i class="fi fi-rr-table-layout"></i>
                <span class="mm-text">Forms</span>
              </a>
              <ul>
                <li>
                  <a class="sub-menu has-arrow" href="javascript:void(0);"
                    >Advanced</a
                  >
                  <ul>
                    <li>
                      <a href="./form-adv-radio.html" class="sub-menu">Radios</a>
                    </li>
                    <li>
                      <a href="./form-adv-switch.html" class="sub-menu">Switchs</a>
                    </li>
                    <li>
                      <a href="./form-adv-check.html" class="sub-menu">Checkbox</a>
                    </li>
                  </ul>
                </li>
                <li><a href="./form-elements.html" class="sub-menu">Elements</a></li>
                <li>
                  <a href="./form-validation.html" class="sub-menu">Validation</a>
                </li>
                <li>
                  <a href="./form-touchspin.html" class="sub-menu">TouchSpin</a>
                </li>
                <li>
                  <a href="./form-inputmask.html" class="sub-menu">InputMask</a>
                </li>
                <li><a href="./form-repeater.html" class="sub-menu">Repeater</a></li>
                <li>
                  <a href="./form-nouislider.html" class="sub-menu">noUiSlider</a>
                </li>
                <li>
                  <a href="./form-maxlength.html" class="sub-menu">Maxlength</a>
                </li>
                <li>
                  <a href="./form-clipboard.html" class="sub-menu">Clipboard</a>
                </li>
              </ul>
            </li>
            <li>
              <a class="has-arrow" href="javascript:void(0);">
                <i class="fi fi-rr-list-dropdown"></i>
                <span class="mm-text">Selects</span>
              </a>
              <ul>
                <li><a href="./select-select2.html" class="sub-menu">Select2</a></li>
                <li>
                  <a href="./select-selectize.html" class="sub-menu">Selectize</a>
                </li>
                <li><a href="./select-tagify.html" class="sub-menu">Tagify</a></li>
                <li><a href="./select-choices.html" class="sub-menu">Choices</a></li>
              </ul>
            </li>
            <li>
              <a class="has-arrow" href="javascript:void(0);">
                <i class="fi fi-rr-object-group"></i>
                <span class="mm-text">Editors</span>
              </a>
              <ul>
                <li><a href="./editor-quill.html" class="sub-menu">Quill</a></li>
                <li><a href="./editor-tinymce.html" class="sub-menu">TinyMCE</a></li>
                <li>
                  <a href="./editor-summernote.html" class="sub-menu">Summernote</a>
                </li>
              </ul>
            </li>
            <li>
              <a class="has-arrow" href="javascript:void(0);">
                <i class="fi fi-rr-eye-dropper"></i>
                <span class="mm-text">Pickers</span>
              </a>
              <ul>
                <li>
                  <a href="./picker-flatpickr.html" class="sub-menu">Flatpickr</a>
                </li>
                <li>
                  <a href="./picker-selectpicker.html" class="sub-menu"
                    >SelectPicker</a
                  >
                </li>
                <li>
                  <a href="./picker-timepicker.html" class="sub-menu">TimePicker</a>
                </li>
                <li>
                  <a href="./picker-bsdatepicker.html" class="sub-menu"
                    >BsDatePicker</a
                  >
                </li>
                <li>
                  <a href="./picker-daterangepicker.html" class="sub-menu"
                    >DaterangePicker</a
                  >
                </li>
              </ul>
            </li>
            <li>
              <a class="has-arrow" href="javascript:void(0);">
                <i class="fi fi-rr-marker"></i>
                <span class="mm-text">Maps</span>
              </a>
              <ul>
                <li><a href="./map-gmaps.html" class="sub-menu">Google Maps</a></li>
                <li><a href="./map-vector.html" class="sub-menu">Vector Maps</a></li>
              </ul>
            </li>
            <li>
              <a class="has-arrow" href="javascript:void(0);">
                <i class="fi fi-rr-apps-add"></i>
                <span class="mm-text">Extended</span>
              </a>
              <ul>
                <li>
                  <a href="./extended-sweetalert2.html" class="sub-menu"
                    >SweetAlert2</a
                  >
                </li>
                <li>
                  <a href="./extended-gLightbox.html" class="sub-menu">GLightbox</a>
                </li>
                <li>
                  <a href="./extended-owlcarousel.html" class="sub-menu"
                    >owlCarousel</a
                  >
                </li>
                <li><a href="./extended-swiper.html" class="sub-menu">Swiper</a></li>
                <li><a href="./extended-jstree.html" class="sub-menu">jsTree</a></li>
              </ul>
            </li>
            <li
              class="nav-label mb-2 mt-4 px-5 fs-11 fw-semibold text-muted text-uppercase"
              style="letter-spacing: 1px"
            >
              Pages
            </li>
            <li>
              <a class="has-arrow" href="javascript:void(0);">
                <i class="fi fi-rr-circle-user"></i>
                <span class="mm-text">Account</span>
              </a>
              <ul>
                <li>
                  <a href="./account-overview.html" class="sub-menu">Overview</a>
                </li>
                <li>
                  <a href="./account-activity.html" class="sub-menu">Activity</a>
                </li>
                <li><a href="./account-contact.html" class="sub-menu">Contact</a></li>
                <li><a href="./account-project.html" class="sub-menu">Project</a></li>
                <li><a href="./account-billing.html" class="sub-menu">Billing</a></li>
              </ul>
            </li>
            <li>
              <a class="has-arrow" href="javascript:void(0);">
                <i class="fi fi-rr-user-gear"></i>
                <span class="mm-text">Settings</span>
              </a>
              <ul>
                <li>
                  <a href="./settings-account.html" class="sub-menu">Account</a>
                </li>
                <li>
                  <a href="./settings-security.html" class="sub-menu">Security</a>
                </li>
                <li>
                  <a href="./settings-billing.html" class="sub-menu"
                    >Billing & Plans</a
                  >
                </li>
                <li>
                  <a href="./settings-notification.html" class="sub-menu"
                    >Notification</a
                  >
                </li>
                <li>
                  <a href="./settings-integration.html" class="sub-menu"
                    >Integration</a
                  >
                </li>
              </ul>
            </li>
            <li>
              <a class="has-arrow" href="javascript:void(0);">
                <i class="fi fi-rr-browser"></i>
                <span class="mm-text">General</span>
              </a>
              <ul>
                <li><a href="./general-starter.html" class="sub-menu">Starter</a></li>
                <li><a href="./general-pricing.html" class="sub-menu">Pricing</a></li>
                <li>
                  <a href="./general-helpdesk.html" class="sub-menu">Helpdesk</a>
                </li>
                <li>
                  <a href="general-maintenance.html" class="sub-menu">Maintenance</a>
                </li>
                <li>
                  <a href="general-commingsoon.html" class="sub-menu">Comming Soon</a>
                </li>
                <li>
                  <a href="./general-privacy.html" class="sub-menu"
                    >Privacy & Policy</a
                  >
                </li>
                <li>
                  <a href="./general-terms.html" class="sub-menu"
                    >Terms of Services</a
                  >
                </li>
              </ul>
            </li>
            <li>
              <a class="has-arrow" href="javascript:void(0);">
                <i class="fi fi-rr-lock"></i>
                <span class="mm-text">Authentication</span>
              </a>
              <ul>
                <li><a href="./auth-login.html" class="sub-menu">Login</a></li>
                <li><a href="./auth-register.html" class="sub-menu">Register</a></li>
                <li><a href="./auth-reset.html" class="sub-menu">Resetting</a></li>
                <li><a href="./auth-recover.html" class="sub-menu">Recovery</a></li>
                <li>
                  <a href="./auth-otp.html" class="sub-menu">Two-factor (OTP)</a>
                </li>
                <li>
                  <a href="./auth-lockscreen.html" class="sub-menu">Lock Screen</a>
                </li>
                <li><a href="auth-404.html" class="sub-menu">Error-404</a></li>
              </ul>
            </li>
            <li>
              <a class="has-arrow" href="javascript:void(0);">
                <i class="fi fi-rr-settings-sliders"></i>
                <span class="mm-text">Menu Level</span>
              </a>
              <ul>
                <li><a class="sub-menu" href="javascript:void(0);">Level-1</a></li>
                <li>
                  <a class="sub-menu has-arrow" href="javascript:void(0);">Level-1</a>
                  <ul>
                    <li>
                      <a class="sub-menu" href="javascript:void(0);">Level-2</a>
                    </li>
                    <li>
                      <a class="sub-menu has-arrow" href="javascript:void(0);"
                        >Level-2</a
                      >
                      <ul>
                        <li>
                          <a class="sub-menu" href="javascript:void(0);">Level-3</a>
                        </li>
                        <li>
                          <a class="sub-menu" href="javascript:void(0);">Level-3</a>
                        </li>
                      </ul>
                    </li>
                  </ul>
                </li>
              </ul>
            </li>
            <li class="disabled">
              <a href="javascript:void(0);">
                <i class="fi fi-rr-ban"></i>
                <span class="mm-text">Disabled</span>
              </a>
            </li>
            <li
              class="nav-label mb-2 mt-4 px-5 fs-11 fw-semibold text-muted text-uppercase"
              style="letter-spacing: 1px"
            >
              Supports
            </li>
            <li>
              <a href="mailto:wrapcoders@gmail.com">
                <i class="fi fi-rr-life-ring"></i>
                <span class="mm-text">Supports</span>
              </a>
            </li>
            <li>
              <a href="./../../docs/documentation.html" target="_blank">
                <i class="fi fi-rr-book-alt"></i>
                <span class="mm-text">Documentation</span>
              </a>
            </li>
          </ul>
          <div class="card text-center mx-3 mt-6 mb-4 bg-primary-subtle">
            <div class="card-body vstack gap-4">
              <i
                class="fi fi-rr-rocket-lunch fs-1 text-primary"
                style="transform: rotate(320deg)"
              ></i>
              <div>
                <h5 class="mb-2 text-primary">Help Center</h5>
                <p class="fs-13 fw-light mb-0 text-primary">
                  Expodash is a production ready multi dashboard to get started up and
                  running easily.
                </p>
              </div>
              <a
                href="mailto:wrapcoders@gmail.com"
                class="btn btn-primary text-white w-100"
                >Get Support</a
              >
            </div>
          </div>
        </nav>
        
      </aside>

<main id="edash-main">
        
        
        
        <header
          class="edash-header sticky-top d-flex align-items-end ht-80"
          id="edash-header-sticky"
        >
          <div
            class="edash-header-container container-xxl w-100 ht-70 px-4 bg-body-tertiary border rounded-3 d-flex align-items-center justify-content-between position-relative"
            id="edash-header-container"
          >
            
            <div class="edash-header-left d-flex align-items-center gap-2">
              
              <div class="edash-minimenu-toggle d-none d-xl-flex">
                <div id="edash-menu-mini">
                  <a
                    href="javascript:void(0);"
                    class="edash-drop-item d-flex align-items-center justify-content-center rounded-pill ht-40"
                  >
                    <i class="fi fi-sr-menu-burger"></i>
                  </a>
                </div>
                <div id="edash-menu-expand" style="display: none">
                  <a
                    href="javascript:void(0);"
                    class="edash-drop-item d-flex align-items-center justify-content-center rounded-pill ht-40"
                  >
                    <i class="fi fi-rr-arrow-right"></i>
                  </a>
                </div>
              </div>
              
              
              <div class="edash-menu-toggle d-xl-none">
                <a
                  href="javascript:void(0);"
                  class="edash-drop-item d-flex align-items-center justify-content-center rounded-pill ht-40"
                  id="edash-menu-show"
                >
                  <i class="fi fi-sr-menu-burger"></i>
                </a>
              </div>
              
              
              <div class="edash-search-wrapper">
                <a
                  href="javascript:void(0);"
                  class="edash-drop-item d-flex align-items-center justify-content-center rounded-pill wd-40 ht-40 ms-1"
                  id="edash-search-show"
                >
                  <i class="fi fi-rr-search"></i>
                </a>
                <form
                  action="#"
                  class="edash-search position-absolute start-0 top-0 end-0 bottom-0 w-100 z-1090"
                >
                  <div
                    class="input-group ps-3 ps-md-4 pe-md-2 bg-body-tertiary rounded-3"
                    style="height: calc(5rem - 0.75rem)"
                  >
                    <span class="input-group-text border-0">
                      <i class="fi fi-rr-search"></i>
                    </span>
                    <input
                      type="text"
                      class="form-control border-0 fw-medium text-muted"
                      placeholder="Search...."
                    />
                    <span class="input-group-text border-0" id="edash-search-hide">
                      <button type="button" class="btn-close"></button>
                    </span>
                  </div>
                </form>
              </div>
              
            </div>
            
            
            <div class="edash-header-right d-flex align-items-center gap-1 gap-sm-2">
              
              <div class="dropdown">
                <a
                  href="javascript:void(0);"
                  class="edash-drop-item d-flex align-items-center justify-content-center rounded-pill wd-40 ht-40"
                  data-bs-toggle="dropdown"
                  data-bs-auto-close="outside"
                  data-bs-offset="0, 19"
                >
                  <img
                    src="./../assets/images/flags/1x1/us.svg"
                    class="img-fluid rounded-circle wd-20 ht-20"
                    alt=""
                  />
                </a>
                <ul class="dropdown-menu dropdown-menu-end">
                  <li>
                    <a href="javascript:void(0);" class="dropdown-item">
                      <img
                        src="./../assets/images/flags/1x1/us.svg"
                        alt=""
                        class="img-fluid rounded-circle wd-20 ht-20"
                      />
                      <span class="ms-3">English (US)</span>
                    </a>
                  </li>
                  <li>
                    <a href="javascript:void(0);" class="dropdown-item">
                      <img
                        src="./../assets/images/flags/1x1/fr.svg"
                        alt=""
                        class="img-fluid rounded-circle wd-20 ht-20"
                      />
                      <span class="ms-3">Français</span>
                    </a>
                  </li>
                  <li>
                    <a href="javascript:void(0);" class="dropdown-item">
                      <img
                        src="./../assets/images/flags/1x1/ru.svg"
                        alt=""
                        class="img-fluid rounded-circle wd-20 ht-20"
                      />
                      <span class="ms-3">Russian</span>
                    </a>
                  </li>
                  <li>
                    <a href="javascript:void(0);" class="dropdown-item">
                      <img
                        src="./../assets/images/flags/1x1/de.svg"
                        alt=""
                        class="img-fluid rounded-circle wd-20 ht-20"
                      />
                      <span class="ms-3">Deutsch</span>
                    </a>
                  </li>
                  <li>
                    <a href="javascript:void(0);" class="dropdown-item">
                      <img
                        src="./../assets/images/flags/1x1/bd.svg"
                        alt=""
                        class="img-fluid rounded-circle wd-20 ht-20"
                      />
                      <span class="ms-3">Bangeli</span>
                    </a>
                  </li>
                  <li>
                    <a href="javascript:void(0);" class="dropdown-item">
                      <img
                        src="./../assets/images/flags/1x1/gb.svg"
                        alt=""
                        class="img-fluid rounded-circle wd-20 ht-20"
                      />
                      <span class="ms-3">English (UK)</span>
                    </a>
                  </li>
                </ul>
              </div>
              
              
              <div class="dropdown">
                <svg xmlns="http://www.w3.org/2000/svg" class="d-none">
                  <symbol id="sun-fill" viewBox="0 0 24 24">
                    <path
                      d="M12,17c-2.76,0-5-2.24-5-5s2.24-5,5-5,5,2.24,5,5-2.24,5-5,5Zm0-8c-1.65,0-3,1.35-3,3s1.35,3,3,3,3-1.35,3-3-1.35-3-3-3Zm1-5V1c0-.55-.45-1-1-1s-1,.45-1,1v3c0,.55,.45,1,1,1s1-.45,1-1Zm0,19v-3c0-.55-.45-1-1-1s-1,.45-1,1v3c0,.55,.45,1,1,1s1-.45,1-1ZM5,12c0-.55-.45-1-1-1H1c-.55,0-1,.45-1,1s.45,1,1,1h3c.55,0,1-.45,1-1Zm19,0c0-.55-.45-1-1-1h-3c-.55,0-1,.45-1,1s.45,1,1,1h3c.55,0,1-.45,1-1ZM6.71,6.71c.39-.39,.39-1.02,0-1.41l-2-2c-.39-.39-1.02-.39-1.41,0s-.39,1.02,0,1.41l2,2c.2,.2,.45,.29,.71,.29s.51-.1,.71-.29Zm14,14c.39-.39,.39-1.02,0-1.41l-2-2c-.39-.39-1.02-.39-1.41,0s-.39,1.02,0,1.41l2,2c.2,.2,.45,.29,.71,.29s.51-.1,.71-.29Zm-16,0l2-2c.39-.39,.39-1.02,0-1.41s-1.02-.39-1.41,0l-2,2c-.39,.39-.39,1.02,0,1.41,.2,.2,.45,.29,.71,.29s.51-.1,.71-.29ZM18.71,6.71l2-2c.39-.39,.39-1.02,0-1.41s-1.02-.39-1.41,0l-2,2c-.39,.39-.39,1.02,0,1.41,.2,.2,.45,.29,.71,.29s.51-.1,.71-.29Z"
                    ></path>
                  </symbol>
                  <symbol id="moon-stars-fill" viewBox="0 0 24 24">
                    <path
                      d="M15,24a12.021,12.021,0,0,1-8.914-3.966,11.9,11.9,0,0,1-3.02-9.309A12.122,12.122,0,0,1,13.085.152a13.061,13.061,0,0,1,5.031.205,2.5,2.5,0,0,1,1.108,4.226c-4.56,4.166-4.164,10.644.807,14.41a2.5,2.5,0,0,1-.7,4.32A13.894,13.894,0,0,1,15,24Zm.076-22a10.793,10.793,0,0,0-1.677.127,10.093,10.093,0,0,0-8.344,8.8A9.927,9.927,0,0,0,7.572,18.7,10.476,10.476,0,0,0,18.664,21.43a.5.5,0,0,0,.139-.857c-5.929-4.478-6.4-12.486-.948-17.449a.459.459,0,0,0,.128-.466.49.49,0,0,0-.356-.361A10.657,10.657,0,0,0,15.076,2Z"
                    ></path>
                  </symbol>
                  <symbol id="circle-half" viewBox="0 0 24 24">
                    <path
                      d="M12,0C5.38,0,0,5.38,0,12s5.38,12,12,12,12-5.38,12-12S18.62,0,12,0Zm0,22V2c5.51,0,10,4.49,10,10s-4.49,10-10,10Z"
                    ></path>
                  </symbol>
                </svg>
                <a
                  href="javascript:void(0);"
                  class="edash-drop-item d-flex align-items-center justify-content-center rounded-pill wd-40 ht-40"
                  id="bd-theme"
                  aria-expanded="false"
                  data-bs-toggle="dropdown"
                  aria-label="Toggle theme (dark)"
                  data-bs-auto-close="outside"
                  data-bs-offset="0, 19"
                >
                  <svg class="theme-icon-active wd-20 ht-20" fill="currentColor">
                    <use href="#moon-stars-fill"></use>
                  </svg>
                </a>
                <ul class="dropdown-menu dropdown-menu-end min-wd-200">
                  <li>
                    <a
                      href="javascript:void(0);"
                      class="dropdown-item"
                      data-bs-theme-value="light"
                    >
                      <svg
                        class="theme-icon"
                        fill="currentColor"
                        width="16"
                        height="16"
                      >
                        <use href="#sun-fill"></use>
                      </svg>
                      <span class="ms-3">Light</span>
                    </a>
                  </li>
                  <li>
                    <a
                      href="javascript:void(0);"
                      class="dropdown-item"
                      data-bs-theme-value="dark"
                    >
                      <svg
                        class="theme-icon"
                        fill="currentColor"
                        width="16"
                        height="16"
                      >
                        <use href="#moon-stars-fill"></use>
                      </svg>
                      <span class="ms-3">Dark</span>
                    </a>
                  </li>
                  <li>
                    <a
                      href="javascript:void(0);"
                      class="dropdown-item"
                      data-bs-theme-value="auto"
                    >
                      <svg
                        class="theme-icon"
                        fill="currentColor"
                        width="16"
                        height="16"
                      >
                        <use href="#circle-half"></use>
                      </svg>
                      <span class="ms-3">Auto</span>
                    </a>
                  </li>
                </ul>
              </div>
              
              
              <div class="dropdown">
                <a
                  href="javascript:void(0);"
                  class="edash-drop-item d-flex align-items-center justify-content-center rounded-pill wd-40 ht-40"
                  data-bs-toggle="dropdown"
                  data-bs-auto-close="outside"
                  data-bs-offset="0, 19"
                >
                  <i class="fi fi-rr-bell"></i>
                  <div
                    class="position-absolute top-10 start-50 translate-middle wd-6 ht-6 bg-danger rounded-circle"
                    data-bs-toggle="tooltip"
                    data-bs-trigger="hover"
                    title="12+ Unread Notification"
                  ></div>
                </a>
                <div
                  class="dropdown-menu dropdown-menu-end dropdown-xl p-0 overflow-hidden"
                >
                  <div class="bg-primary text-white px-4 py-4">
                    <h5 class="fw-semibold text-white mb-1">
                      <span>Notifications</span>
                      <span class="badge bg-warning ms-1 rounded-pill">12+</span>
                    </h5>
                    <p class="fs-13 mb-0">You have 12+ unread notification</p>
                  </div>
                  <div
                    class="list-group list-group-flush ht-300 position-relative init-perfect-scroll-bar"
                  >
                    <a
                      href="javascript:void(0);"
                      class="list-group-item d-flex position-relative"
                    >
                      <div
                        class="avatar avatar-lg bg-danger-subtle rounded flex-shrink-0"
                      >
                        <i class="fi fi-rr-megaphone text-danger"></i>
                      </div>
                      <div class="media-body flex-grow-1 ms-3">
                        <p class="fw-normal mb-1">
                          Congratulate
                          <span class="fw-semibold text-dark">Socrates Itumay</span> for
                          work anniversaries
                        </p>
                        <span class="fs-12 fw-normal text-muted">Mar 15 12:32pm</span>
                      </div>
                      <div
                        class="position-absolute top-40 translate-middle wd-5 ht-5 bg-primary rounded-circle"
                        style="left: 0.75rem"
                        data-bs-toggle="tooltip"
                        data-bs-trigger="hover"
                        title="Unread Notification"
                      ></div>
                    </a>
                    <a
                      href="javascript:void(0);"
                      class="list-group-item d-flex position-relative"
                    >
                      <div
                        class="avatar avatar-lg bg-warning-subtle rounded flex-shrink-0"
                      >
                        <i class="fi fi-rr-edit text-warning"></i>
                      </div>
                      <div class="media-body flex-grow-1 ms-3">
                        <p class="fw-normal mb-1">
                          <span class="fw-semibold text-dark">Althea Cabardo</span> just
                          created a new blog post
                        </p>
                        <span class="fs-12 fw-normal text-muted">Mar 13 02:56am</span>
                      </div>
                      <div
                        class="position-absolute top-40 translate-middle wd-5 ht-5 bg-primary rounded-circle"
                        style="left: 0.75rem"
                        data-bs-toggle="tooltip"
                        data-bs-trigger="hover"
                        title="Unread Notification"
                      ></div>
                    </a>
                    <a href="javascript:void(0);" class="list-group-item d-flex">
                      <div
                        class="avatar avatar-lg bg-info-subtle rounded flex-shrink-0"
                      >
                        <i class="fi fi-rr-comment-alt-dots text-info"></i>
                      </div>
                      <div class="media-body flex-grow-1 ms-3">
                        <p class="fw-normal mb-1">
                          <span class="fw-semibold text-dark">Adrian Monino</span> added
                          new comment on your photo
                        </p>
                        <span class="fs-12 fw-normal text-muted">Mar 12 10:40pm</span>
                      </div>
                    </a>
                    <a href="javascript:void(0);" class="list-group-item d-flex">
                      <div
                        class="avatar avatar-lg bg-success-subtle rounded flex-shrink-0"
                      >
                        <i class="fi fi-rr-badge-check text-success"></i>
                      </div>
                      <div class="media-body flex-grow-1 ms-3">
                        <p class="fw-normal mb-1">
                          <span class="fw-semibold text-dark">Kenneth Hune</span>
                          accepted your request
                        </p>
                        <span class="fs-12 fw-normal text-muted">Mar 13 02:56am</span>
                      </div>
                    </a>
                    <a
                      href="javascript:void(0);"
                      class="list-group-item d-flex border-bottom-0"
                    >
                      <div
                        class="avatar avatar-lg bg-warning-subtle rounded flex-shrink-0"
                      >
                        <i class="fi fi-rr-file-medical-alt text-warning"></i>
                      </div>
                      <div class="media-body flex-grow-1 ms-3">
                        <p class="fw-normal mb-1">
                          December monthly financial <strong>report</strong> is
                          generated
                        </p>
                        <span class="fs-12 fw-normal text-muted">Mar 12 10:40pm</span>
                      </div>
                    </a>
                  </div>
                  <div
                    class="px-4 py-3 border-top d-flex justify-content-between align-items-center"
                  >
                    <a href="javascript:void(0);">Make as Read</a>
                    <a href="javascript:void(0);" class="icon-link icon-link-hover">
                      <span>View Alls</span>
                      <i class="fi fi-rr-arrow-small-right bi"></i>
                    </a>
                  </div>
                </div>
              </div>
              
              
              <div class="dropdown">
                <a
                  href="javascript:void(0);"
                  class="edash-drop-item d-flex align-items-center justify-content-center rounded-pill wd-40 ht-40"
                  data-bs-toggle="dropdown"
                  data-bs-auto-close="outside"
                  data-bs-offset="0, 19"
                >
                  <i class="fi fi-rr-interrogation"></i>
                </a>
                <div
                  class="dropdown-menu dropdown-menu-end dropdown-xl p-0 overflow-hidden"
                >
                  <div class="bg-primary text-white text-center px-6 py-12">
                    <h4 class="fw-semibold text-white mb-2">Help Center</h4>
                    <p class="fs-13">
                      This greeting is courteous and professional, setting a positive
                      tone for your ticket.
                    </p>
                    <a href="javascript:void(0);" class="btn btn-sm btn-warning"
                      >Get Support</a
                    >
                  </div>
                  <div class="row g-2 p-3">
                    <div class="col-6">
                      <a href="javascript:void(0);" class="dropdown-item"
                        >Introduction</a
                      >
                      <a href="javascript:void(0);" class="dropdown-item">Orders</a>
                      <a href="javascript:void(0);" class="dropdown-item">Products</a>
                      <a href="javascript:void(0);" class="dropdown-item">Customers</a>
                      <a href="javascript:void(0);" class="dropdown-item">Suppliers</a>
                      <a href="javascript:void(0);" class="dropdown-item"
                        >Customization</a
                      >
                    </div>
                    <div class="col-6">
                      <a href="javascript:void(0);" class="dropdown-item">Partners</a>
                      <a href="javascript:void(0);" class="dropdown-item">Members</a>
                      <a href="javascript:void(0);" class="dropdown-item">Components</a>
                      <a href="javascript:void(0);" class="dropdown-item">Projects</a>
                      <a href="javascript:void(0);" class="dropdown-item">Records</a>
                      <a href="javascript:void(0);" class="dropdown-item">Support</a>
                    </div>
                  </div>
                </div>
              </div>
              
              
              <div class="dropdown">
                <a
                  href="javascript:void(0);"
                  class="edash-drop-item d-flex align-items-center justify-content-center rounded-pill wd-40 ht-40"
                  data-bs-toggle="dropdown"
                  data-bs-auto-close="outside"
                  data-bs-offset="0, 19"
                >
                  <i class="fi fi-rr-apps-add"></i>
                </a>
                <div class="dropdown-menu dropdown-menu-end dropdown-lg">
                  <div class="row text-center align-items-center gx-0 gy-0">
                    <div class="col-4 hstack">
                      <a
                        href="javascript:void(0);"
                        class="w-100 d-block px-2 py-3 text-center text-decoration-none mb-3 rounded"
                      >
                        <img
                          src="./../assets/images/brand/gmail.png"
                          alt=""
                          class="img-fluid wd-20 ht-20"
                        />
                        <p class="fs-12 fw-medium text-truncate mb-0 mt-1 pt-1">
                          Gmail
                        </p>
                      </a>
                    </div>
                    <div class="col-4 hstack">
                      <a
                        href="javascript:void(0);"
                        class="w-100 d-block px-2 py-3 text-center text-decoration-none mb-3 rounded"
                      >
                        <img
                          src="./../assets/images/brand/dropbox.png"
                          alt=""
                          class="img-fluid wd-20 ht-20"
                        />
                        <p class="fs-12 fw-medium text-truncate mb-0 mt-1 pt-1">
                          Dropbox
                        </p>
                      </a>
                    </div>
                    <div class="col-4 hstack">
                      <a
                        href="javascript:void(0);"
                        class="w-100 d-block px-2 py-3 text-center text-decoration-none mb-3 rounded"
                      >
                        <img
                          src="./../assets/images/brand/google-drive.png"
                          alt=""
                          class="img-fluid wd-20 ht-20"
                        />
                        <p class="fs-12 fw-medium text-truncate mb-0 mt-1 pt-1">
                          Gdrive
                        </p>
                      </a>
                    </div>
                    <div class="col-4 hstack">
                      <a
                        href="javascript:void(0);"
                        class="w-100 d-block px-2 py-3 text-center text-decoration-none mb-3 rounded"
                      >
                        <img
                          src="./../assets/images/brand/figma.png"
                          alt=""
                          class="img-fluid wd-20 ht-20"
                        />
                        <p class="fs-12 fw-medium text-truncate mb-0 mt-1 pt-1">
                          Figma
                        </p>
                      </a>
                    </div>
                    <div class="col-4 hstack">
                      <a
                        href="javascript:void(0);"
                        class="w-100 d-block px-2 py-3 text-center text-decoration-none mb-3 rounded"
                      >
                        <img
                          src="./../assets/images/brand/github.png"
                          alt=""
                          class="img-fluid wd-20 ht-20"
                        />
                        <p class="fs-12 fw-medium text-truncate mb-0 mt-1 pt-1">
                          Github
                        </p>
                      </a>
                    </div>
                    <div class="col-4 hstack">
                      <a
                        href="javascript:void(0);"
                        class="w-100 d-block px-2 py-3 text-center text-decoration-none mb-3 rounded"
                      >
                        <img
                          src="./../assets/images/brand/gitlab.png"
                          alt=""
                          class="img-fluid wd-20 ht-20"
                        />
                        <p class="fs-12 fw-medium text-truncate mb-0 mt-1 pt-1">
                          Gitlab
                        </p>
                      </a>
                    </div>
                    <div class="col-4 hstack">
                      <a
                        href="javascript:void(0);"
                        class="w-100 d-block px-2 py-3 text-center text-decoration-none mb-3 rounded"
                      >
                        <img
                          src="./../assets/images/brand/instagram.png"
                          alt=""
                          class="img-fluid wd-20 ht-20"
                        />
                        <p class="fs-12 fw-medium text-truncate mb-0 mt-1 pt-1">
                          Instagram
                        </p>
                      </a>
                    </div>
                    <div class="col-4 hstack">
                      <a
                        href="javascript:void(0);"
                        class="w-100 d-block px-2 py-3 text-center text-decoration-none mb-3 rounded"
                      >
                        <img
                          src="./../assets/images/brand/pinterest.png"
                          alt=""
                          class="img-fluid wd-20 ht-20"
                        />
                        <p class="fs-12 fw-medium text-truncate mb-0 mt-1 pt-1">
                          Pinterest
                        </p>
                      </a>
                    </div>
                    <div class="col-4 hstack">
                      <a
                        href="javascript:void(0);"
                        class="w-100 d-block px-2 py-3 text-center text-decoration-none mb-3 rounded"
                      >
                        <img
                          src="./../assets/images/brand/facebook.png"
                          alt=""
                          class="img-fluid wd-20 ht-20"
                        />
                        <p class="fs-12 fw-medium text-truncate mb-0 mt-1 pt-1">
                          Facebook
                        </p>
                      </a>
                    </div>
                    <div class="col-4 hstack">
                      <a
                        href="javascript:void(0);"
                        class="w-100 d-block px-2 py-3 text-center text-decoration-none mb-0"
                      >
                        <img
                          src="./../assets/images/brand/shopify.png"
                          alt=""
                          class="img-fluid wd-20 ht-20"
                        />
                        <p class="fs-12 fw-medium text-truncate mb-0 mt-1 pt-1">
                          Shopify
                        </p>
                      </a>
                    </div>
                    <div class="col-4 hstack">
                      <a
                        href="javascript:void(0);"
                        class="w-100 d-block px-2 py-3 text-center text-decoration-none mb-0"
                      >
                        <img
                          src="./../assets/images/brand/spotify.png"
                          alt=""
                          class="img-fluid wd-20 ht-20"
                        />
                        <p class="fs-12 fw-medium text-truncate mb-0 mt-1 pt-1">
                          Spotify
                        </p>
                      </a>
                    </div>
                    <div class="col-4 hstack">
                      <a
                        href="javascript:void(0);"
                        class="w-100 d-block px-2 py-3 text-center text-decoration-none mb-0"
                      >
                        <img
                          src="./../assets/images/brand/whatsapp.png"
                          alt=""
                          class="img-fluid wd-20 ht-20"
                        />
                        <p class="fs-12 fw-medium text-truncate mb-0 mt-1 pt-1">
                          Whatsapp
                        </p>
                      </a>
                    </div>
                  </div>
                </div>
              </div>
              
              
              <div class="dropdown">
                <a
                  href="javascript:void(0);"
                  class="edash-drop-item d-flex align-items-center justify-content-center rounded-pill wd-40 ht-40"
                  data-bs-toggle="dropdown"
                  data-bs-auto-close="outside"
                  data-bs-offset="0, 19"
                >
                  <div class="avatar avatar-md rounded-circle">
                    <img
                      src="./../assets/images/avatar/1.png"
                      alt="Avatar"
                      class="img-fluid rounded-circle"
                    />
                    <div class="avatar-indicator active"></div>
                  </div>
                </a>
                <div class="dropdown-menu dropdown-menu-end dropdown-md p-0">
                  <div class="px-4 py-3 d-flex border-bottom">
                    <div class="avatar avatar-md flex-shrink-0">
                      <img
                        src="./../assets/images/avatar/1.png"
                        alt="Avatar"
                        class="img-fluid rounded"
                      />
                    </div>
                    <div class="flex-grow-1 ms-3">
                      <h6 class="text-dark mb-1">Alexandra Della</h6>
                      <span class="fs-13 text-muted">Premium Member</span>
                    </div>
                  </div>
                  <div class="px-2 py-3">
                    <a href="./account-overview.html" class="dropdown-item">
                      <i class="fi fi-rs-user"></i>
                      <span class="ms-3">Profile</span>
                    </a>
                    <a href="./account-activity.html" class="dropdown-item">
                      <i class="fi fi-rr-pulse"></i>
                      <span class="ms-3">Activity</span>
                    </a>
                    <a href="./account-project.html" class="dropdown-item">
                      <i class="fi fi-rr-file-invoice-dollar"></i>
                      <span class="ms-3">Projects</span>
                    </a>
                    <div class="dropdown-divider"></div>
                    <a href="./general-pricing.html" class="dropdown-item">
                      <i class="fi fi-rr-usd-circle"></i>
                      <span class="ms-3">Pricing</span>
                    </a>
                    <a href="./settings-account.html" class="dropdown-item">
                      <i class="fi fi-rr-settings"></i>
                      <span class="ms-3">Settings</span>
                    </a>
                    <a href="./general-helpdesk.html" class="dropdown-item">
                      <i class="fi fi-rr-seal-question"></i>
                      <span class="ms-3">Helpdesk</span>
                    </a>
                    <div class="dropdown-divider"></div>
                    <a href="./auth-login.html" class="dropdown-item text-danger">
                      <i class="fi fi-rr-exit"></i>
                      <span class="ms-3">Logout</span>
                    </a>
                  </div>
                </div>
              </div>
              
            </div>
            
          </div>
        </header>

<div
          class="edash-page-container container-xxl"
          id="edash-page-container"
        >
          
          <div class="edash-content-breadcumb row mb-4 mb-md-6 pt-md-2">
            <div class="col-12">
              <div class="d-flex align-items-center justify-content-between">
                <div>
                  <h2 class="h4 fw-semibold text-dark">NavTab</h2>
                  <nav aria-label="breadcrumb">
                    <ol class="breadcrumb mb-0">
                      <li class="breadcrumb-item">
                        <a href="javascript:void(0);">Components</a>
                      </li>
                      <li class="breadcrumb-item">
                        <a href="javascript:void(0);">Base UI</a>
                      </li>
                      <li class="breadcrumb-item active" aria-current="page">
                        NavTab
                      </li>
                    </ol>
                  </nav>
                </div>
                <div class="d-flex align-items-center gap-2">
                  <a
                    href="https://getbootstrap.com/docs/5.3/components/navs-tabs/"
                    class="btn btn-md btn-primary"
                    target="_blank"
                    >Official Docs</a
                  >
                </div>
              </div>
            </div>
          </div>
          
          
          <div class="edash-content-section row g-3 g-md-4">
            
            <div class="col-lg-6 col-xl-12 col-xxl-6">
              <div class="card">
                <div class="card-header">
                  <h4 class="card-title">Basic</h4>
                </div>
                <div class="card-body">
                  <ul class="nav nav-tabs mb-3" role="tablist">
                    <li class="nav-item">
                      <a
                        href="javascript:void(0);"
                        class="nav-link active"
                        aria-current="page"
                        data-bs-toggle="tab"
                        data-bs-target="#edash-tab-tabs-pane-1"
                        aria-selected="false"
                        role="tab"
                        tabindex="-1"
                        >Active</a
                      >
                    </li>
                    <li class="nav-item">
                      <a
                        href="javascript:void(0);"
                        class="nav-link"
                        data-bs-toggle="tab"
                        data-bs-target="#edash-tab-tabs-pane-2"
                        aria-selected="false"
                        role="tab"
                        tabindex="-1"
                        >Link 1</a
                      >
                    </li>
                    <li class="nav-item">
                      <a
                        href="javascript:void(0);"
                        class="nav-link"
                        data-bs-toggle="tab"
                        data-bs-target="#edash-tab-tabs-pane-3"
                        aria-selected="false"
                        role="tab"
                        tabindex="-1"
                        >Link 2</a
                      >
                    </li>
                    <li class="nav-item">
                      <a
                        href="javascript:void(0);"
                        class="nav-link"
                        data-bs-toggle="tab"
                        data-bs-target="#edash-tab-tabs-pane-4"
                        aria-selected="false"
                        role="tab"
                        tabindex="-1"
                        >Link 3</a
                      >
                    </li>
                    <li class="nav-item">
                      <a
                        href="javascript:void(0);"
                        class="nav-link disabled"
                        data-bs-toggle="tab"
                        data-bs-target="#edash-tab-tabs-pane-4"
                        aria-selected="false"
                        role="tab"
                        tabindex="-1"
                        >Disabled</a
                      >
                    </li>
                  </ul>
                  <div class="tab-content">
                    <div
                      class="tab-pane fade active show"
                      id="edash-tab-tabs-pane-1"
                      role="tabpanel"
                    >
                      Et et consectetur ipsum labore excepteur est proident
                      excepteur ad velit occaecat qui minim occaecat veniam.
                      Fugiat veniam incididunt anim aliqua enim pariatur veniam
                      sunt est aute sit dolor anim. Velit non irure adipisicing
                      aliqua ullamco irure incididunt irure non esse consectetur
                      nostrud minim non minim occaecat. Amet duis do nisi duis
                      veniam non est eiusmod tempor incididunt tempor dolor
                      ipsum in qui sit.
                    </div>

<div
                      class="tab-pane fade"
                      id="edash-tab-tabs-pane-2"
                      role="tabpanel"
                    >
                      Nulla est ullamco ut irure incididunt nulla Lorem Lorem
                      minim irure officia enim reprehenderit. Magna duis labore
                      cillum sint adipisicing exercitation ipsum. Nostrud ut
                      anim non exercitation velit laboris fugiat cupidatat.
                      Commodo esse dolore fugiat sint velit ullamco magna
                      consequat voluptate minim amet aliquip ipsum aute laboris
                      nisi. Labore labore veniam irure irure ipsum pariatur
                      mollit magna in cupidatat dolore magna irure esse tempor
                      ad mollit. Dolore commodo nulla minim amet ipsum officia
                      consectetur amet ullamco voluptate nisi commodo ea sit eu.
                    </div>

<div
                      class="tab-pane fade"
                      id="edash-tab-tabs-pane-3"
                      role="tabpanel"
                    >
                      Sint sit mollit irure quis est nostrud cillum consequat
                      Lorem esse do quis dolor esse fugiat sunt do. Eu ex
                      commodo veniam Lorem aliquip laborum occaecat qui Lorem
                      esse mollit dolore anim cupidatat. eserunt officia id
                      Lorem nostrud aute id commodo elit eiusmod enim irure amet
                      eiusmod qui reprehenderit nostrud tempor. Fugiat ipsum
                      excepteur in aliqua non et quis aliquip ad irure in labore
                      cillum elit enim. Consequat aliquip incididunt ipsum et
                      minim laborum laborum laborum et cillum labore. Deserunt
                      adipisicing cillum id nulla minim nostrud labore eiusmod
                      et amet.
                    </div>

<div
                      class="tab-pane fade"
                      id="edash-tab-tabs-pane-4"
                      role="tabpanel"
                    >
                      Sint sit mollit irure quis est nostrud cillum consequat
                      Lorem esse do quis dolor esse fugiat sunt do. Eu ex
                      commodo veniam Lorem aliquip laborum occaecat qui Lorem
                      esse mollit dolore anim cupidatat. eserunt officia id
                      Lorem nostrud aute id commodo elit eiusmod enim irure amet
                      eiusmod qui reprehenderit nostrud tempor. Fugiat ipsum
                      excepteur in aliqua non et quis aliquip ad irure in labore
                      cillum elit enim. Consequat aliquip incididunt ipsum et
                      minim laborum laborum laborum et cillum labore. Deserunt
                      adipisicing cillum id nulla minim nostrud labore eiusmod
                      et amet.
                    </div>
                  </div>
                </div>
              </div>
            </div>
            
            
            <div class="col-lg-6 col-xl-12 col-xxl-6">
              <div class="card">
                <div class="card-header">
                  <h4 class="card-title">Pills</h4>
                </div>
                <div class="card-body">
                  <ul class="nav nav-pills mb-3" role="tablist">
                    <li class="nav-item">
                      <a
                        href="javascript:void(0);"
                        class="nav-link active"
                        aria-current="page"
                        data-bs-toggle="tab"
                        data-bs-target="#edash-tab-pills-pane-1"
                        aria-selected="false"
                        role="tab"
                        tabindex="-1"
                        >Active</a
                      >
                    </li>
                    <li class="nav-item">
                      <a
                        href="javascript:void(0);"
                        class="nav-link"
                        data-bs-toggle="tab"
                        data-bs-target="#edash-tab-pills-pane-2"
                        aria-selected="false"
                        role="tab"
                        tabindex="-1"
                        >Link 1</a
                      >
                    </li>
                    <li class="nav-item">
                      <a
                        href="javascript:void(0);"
                        class="nav-link"
                        data-bs-toggle="tab"
                        data-bs-target="#edash-tab-pills-pane-3"
                        aria-selected="false"
                        role="tab"
                        tabindex="-1"
                        >Link 2</a
                      >
                    </li>
                    <li class="nav-item">
                      <a
                        href="javascript:void(0);"
                        class="nav-link"
                        data-bs-toggle="tab"
                        data-bs-target="#edash-tab-pills-pane-4"
                        aria-selected="false"
                        role="tab"
                        tabindex="-1"
                        >Link 3</a
                      >
                    </li>
                    <li class="nav-item">
                      <a
                        href="javascript:void(0);"
                        class="nav-link disabled"
                        data-bs-toggle="tab"
                        data-bs-target="#edash-tab-pills-pane-5"
                        aria-selected="false"
                        role="tab"
                        tabindex="-1"
                        >Disabled</a
                      >
                    </li>
                  </ul>
                  <div class="tab-content">
                    <div
                      class="tab-pane fade active show"
                      id="edash-tab-pills-pane-1"
                      role="tabpanel"
                    >
                      Et et consectetur ipsum labore excepteur est proident
                      excepteur ad velit occaecat qui minim occaecat veniam.
                      Fugiat veniam incididunt anim aliqua enim pariatur veniam
                      sunt est aute sit dolor anim. Velit non irure adipisicing
                      aliqua ullamco irure incididunt irure non esse consectetur
                      nostrud minim non minim occaecat. Amet duis do nisi duis
                      veniam non est eiusmod tempor incididunt tempor dolor
                      ipsum in qui sit.
                    </div>

<div
                      class="tab-pane fade"
                      id="edash-tab-pills-pane-2"
                      role="tabpanel"
                    >
                      Nulla est ullamco ut irure incididunt nulla Lorem Lorem
                      minim irure officia enim reprehenderit. Magna duis labore
                      cillum sint adipisicing exercitation ipsum. Nostrud ut
                      anim non exercitation velit laboris fugiat cupidatat.
                      Commodo esse dolore fugiat sint velit ullamco magna
                      consequat voluptate minim amet aliquip ipsum aute laboris
                      nisi. Labore labore veniam irure irure ipsum pariatur
                      mollit magna in cupidatat dolore magna irure esse tempor
                      ad mollit. Dolore commodo nulla minim amet ipsum officia
                      consectetur amet ullamco voluptate nisi commodo ea sit eu.
                    </div>

<div
                      class="tab-pane fade"
                      id="edash-tab-pills-pane-3"
                      role="tabpanel"
                    >
                      Nulla est ullamco ut irure incididunt nulla Lorem Lorem
                      minim irure officia enim reprehenderit. Magna duis labore
                      cillum sint adipisicing exercitation ipsum. Nostrud ut
                      anim non exercitation velit laboris fugiat cupidatat.
                      Commodo esse dolore fugiat sint velit ullamco magna
                      consequat voluptate minim amet aliquip ipsum aute laboris
                      nisi. Labore labore veniam irure irure ipsum pariatur
                      mollit magna in cupidatat dolore magna irure esse tempor
                      ad mollit. Dolore commodo nulla minim amet ipsum officia
                      consectetur amet ullamco voluptate nisi commodo ea sit eu.
                    </div>

<div
                      class="tab-pane fade"
                      id="edash-tab-pills-pane-4"
                      role="tabpanel"
                    >
                      Sint sit mollit irure quis est nostrud cillum consequat
                      Lorem esse do quis dolor esse fugiat sunt do. Eu ex
                      commodo veniam Lorem aliquip laborum occaecat qui Lorem
                      esse mollit dolore anim cupidatat. eserunt officia id
                      Lorem nostrud aute id commodo elit eiusmod enim irure amet
                      eiusmod qui reprehenderit nostrud tempor. Fugiat ipsum
                      excepteur in aliqua non et quis aliquip ad irure in labore
                      cillum elit enim. Consequat aliquip incididunt ipsum et
                      minim laborum laborum laborum et cillum labore. Deserunt
                      adipisicing cillum id nulla minim nostrud labore eiusmod
                      et amet.
                    </div>
                  </div>
                </div>
              </div>
            </div>
            
            
            <div class="col-lg-6 col-xl-12 col-xxl-6">
              <div class="card">
                <div class="card-header">
                  <h4 class="card-title">Underline</h4>
                </div>
                <div class="card-body">
                  <ul class="nav nav-underline mb-3" role="tablist">
                    <li class="nav-item">
                      <a
                        href="javascript:void(0);"
                        class="nav-link active"
                        aria-current="page"
                        data-bs-toggle="tab"
                        data-bs-target="#edash-tab-underline-pane-1"
                        aria-selected="false"
                        role="tab"
                        tabindex="-1"
                        >Active</a
                      >
                    </li>
                    <li class="nav-item">
                      <a
                        href="javascript:void(0);"
                        class="nav-link"
                        data-bs-toggle="tab"
                        data-bs-target="#edash-tab-underline-pane-2"
                        aria-selected="false"
                        role="tab"
                        tabindex="-1"
                        >Link 1</a
                      >
                    </li>
                    <li class="nav-item">
                      <a
                        href="javascript:void(0);"
                        class="nav-link"
                        data-bs-toggle="tab"
                        data-bs-target="#edash-tab-underline-pane-3"
                        aria-selected="false"
                        role="tab"
                        tabindex="-1"
                        >Link 2</a
                      >
                    </li>
                    <li class="nav-item">
                      <a
                        href="javascript:void(0);"
                        class="nav-link"
                        data-bs-toggle="tab"
                        data-bs-target="#edash-tab-underline-pane-4"
                        aria-selected="false"
                        role="tab"
                        tabindex="-1"
                        >Link 3</a
                      >
                    </li>
                    <li class="nav-item">
                      <a
                        href="javascript:void(0);"
                        class="nav-link disabled"
                        data-bs-toggle="tab"
                        data-bs-target="#edash-tab-underline-pane-5"
                        aria-selected="false"
                        role="tab"
                        tabindex="-1"
                        >Disabled</a
                      >
                    </li>
                  </ul>
                  <div class="tab-content">
                    <div
                      class="tab-pane fade active show"
                      id="edash-tab-underline-pane-1"
                      role="tabpanel"
                    >
                      Et et consectetur ipsum labore excepteur est proident
                      excepteur ad velit occaecat qui minim occaecat veniam.
                      Fugiat veniam incididunt anim aliqua enim pariatur veniam
                      sunt est aute sit dolor anim. Velit non irure adipisicing
                      aliqua ullamco irure incididunt irure non esse consectetur
                      nostrud minim non minim occaecat. Amet duis do nisi duis
                      veniam non est eiusmod tempor incididunt tempor dolor
                      ipsum in qui sit.
                    </div>

<div
                      class="tab-pane fade"
                      id="edash-tab-underline-pane-2"
                      role="tabpanel"
                    >
                      Nulla est ullamco ut irure incididunt nulla Lorem Lorem
                      minim irure officia enim reprehenderit. Magna duis labore
                      cillum sint adipisicing exercitation ipsum. Nostrud ut
                      anim non exercitation velit laboris fugiat cupidatat.
                      Commodo esse dolore fugiat sint velit ullamco magna
                      consequat voluptate minim amet aliquip ipsum aute laboris
                      nisi. Labore labore veniam irure irure ipsum pariatur
                      mollit magna in cupidatat dolore magna irure esse tempor
                      ad mollit. Dolore commodo nulla minim amet ipsum officia
                      consectetur amet ullamco voluptate nisi commodo ea sit eu.
                    </div>

<div
                      class="tab-pane fade"
                      id="edash-tab-underline-pane-3"
                      role="tabpanel"
                    >
                      Nulla est ullamco ut irure incididunt nulla Lorem Lorem
                      minim irure officia enim reprehenderit. Magna duis labore
                      cillum sint adipisicing exercitation ipsum. Nostrud ut
                      anim non exercitation velit laboris fugiat cupidatat.
                      Commodo esse dolore fugiat sint velit ullamco magna
                      consequat voluptate minim amet aliquip ipsum aute laboris
                      nisi. Labore labore veniam irure irure ipsum pariatur
                      mollit magna in cupidatat dolore magna irure esse tempor
                      ad mollit. Dolore commodo nulla minim amet ipsum officia
                      consectetur amet ullamco voluptate nisi commodo ea sit eu.
                    </div>

<div
                      class="tab-pane fade"
                      id="edash-tab-underline-pane-4"
                      role="tabpanel"
                    >
                      Sint sit mollit irure quis est nostrud cillum consequat
                      Lorem esse do quis dolor esse fugiat sunt do. Eu ex
                      commodo veniam Lorem aliquip laborum occaecat qui Lorem
                      esse mollit dolore anim cupidatat. eserunt officia id
                      Lorem nostrud aute id commodo elit eiusmod enim irure amet
                      eiusmod qui reprehenderit nostrud tempor. Fugiat ipsum
                      excepteur in aliqua non et quis aliquip ad irure in labore
                      cillum elit enim. Consequat aliquip incididunt ipsum et
                      minim laborum laborum laborum et cillum labore. Deserunt
                      adipisicing cillum id nulla minim nostrud labore eiusmod
                      et amet.
                    </div>
                  </div>
                </div>
              </div>
            </div>
            
            
            <div class="col-lg-6 col-xl-12 col-xxl-6">
              <div class="card">
                <div class="card-header">
                  <h4 class="card-title">Dropdowns</h4>
                </div>
                <div class="card-body">
                  <ul class="nav nav-tabs mb-3" role="tablist">
                    <li class="nav-item" role="presentation">
                      <a
                        href="javascript:void(0);"
                        class="nav-link"
                        data-bs-toggle="tab"
                        data-bs-target="#edash-tab-dropdown-pane-1"
                        aria-selected="false"
                        role="tab"
                        tabindex="-1"
                        >Link 1</a
                      >
                    </li>
                    <li class="nav-item" role="presentation">
                      <a
                        href="javascript:void(0);"
                        class="nav-link"
                        data-bs-toggle="tab"
                        data-bs-target="#edash-tab-dropdown-pane-2"
                        aria-selected="false"
                        role="tab"
                        tabindex="-1"
                        >Link 2</a
                      >
                    </li>
                    <li class="nav-item" role="presentation">
                      <a
                        href="javascript:void(0);"
                        class="nav-link"
                        data-bs-toggle="tab"
                        data-bs-target="#edash-tab-dropdown-pane-3"
                        aria-selected="false"
                        role="tab"
                        tabindex="-1"
                        >Link 3</a
                      >
                    </li>
                    <li class="nav-item dropdown" role="presentation">
                      <a
                        class="nav-link dropdown-toggle active"
                        data-bs-toggle="dropdown"
                        href="#"
                        role="button"
                        aria-expanded="false"
                        >Dropdown</a
                      >
                      <ul class="dropdown-menu">
                        <li>
                          <a
                            href="javascript:void(0);"
                            class="dropdown-item active"
                            data-bs-toggle="tab"
                            data-bs-target="#edash-tab-dropdown-pane-4"
                            aria-selected="false"
                            role="tab"
                            tabindex="-1"
                            >Action</a
                          >
                        </li>
                        <li>
                          <a
                            href="javascript:void(0);"
                            class="dropdown-item"
                            data-bs-toggle="tab"
                            data-bs-target="#edash-tab-dropdown-pane-5"
                            aria-selected="false"
                            role="tab"
                            tabindex="-1"
                            >Another action</a
                          >
                        </li>
                        <li>
                          <a
                            href="javascript:void(0);"
                            class="dropdown-item"
                            data-bs-toggle="tab"
                            data-bs-target="#edash-tab-dropdown-pane-6"
                            aria-selected="false"
                            role="tab"
                            tabindex="-1"
                            >Something else here</a
                          >
                        </li>
                        <li>
                          <a
                            href="javascript:void(0);"
                            class="dropdown-item"
                            data-bs-toggle="tab"
                            data-bs-target="#edash-tab-dropdown-pane-7"
                            aria-selected="true"
                            role="tab"
                            >Separated link</a
                          >
                        </li>
                      </ul>
                    </li>
                  </ul>
                  <div class="tab-content">
                    <div
                      class="tab-pane fade"
                      id="edash-tab-dropdown-pane-1"
                      role="tabpanel"
                    >
                      Et et consectetur ipsum labore excepteur est proident
                      excepteur ad velit occaecat qui minim occaecat veniam.
                      Fugiat veniam incididunt anim aliqua enim pariatur veniam
                      sunt est aute sit dolor anim. Velit non irure adipisicing
                      aliqua ullamco irure incididunt irure non esse consectetur
                      nostrud minim non minim occaecat. Amet duis do nisi duis
                      veniam non est eiusmod tempor incididunt tempor dolor
                      ipsum in qui sit.
                    </div>

<div
                      class="tab-pane fade"
                      id="edash-tab-dropdown-pane-2"
                      role="tabpanel"
                    >
                      Nulla est ullamco ut irure incididunt nulla Lorem Lorem
                      minim irure officia enim reprehenderit. Magna duis labore
                      cillum sint adipisicing exercitation ipsum. Nostrud ut
                      anim non exercitation velit laboris fugiat cupidatat.
                      Commodo esse dolore fugiat sint velit ullamco magna
                      consequat voluptate minim amet aliquip ipsum aute laboris
                      nisi. Labore labore veniam irure irure ipsum pariatur
                      mollit magna in cupidatat dolore magna irure esse tempor
                      ad mollit. Dolore commodo nulla minim amet ipsum officia
                      consectetur amet ullamco voluptate nisi commodo ea sit eu.
                    </div>

<div
                      class="tab-pane fade"
                      id="edash-tab-dropdown-pane-3"
                      role="tabpanel"
                    >
                      Sint sit mollit irure quis est nostrud cillum consequat
                      Lorem esse do quis dolor esse fugiat sunt do. Eu ex
                      commodo veniam Lorem aliquip laborum occaecat qui Lorem
                      esse mollit dolore anim cupidatat. eserunt officia id
                      Lorem nostrud aute id commodo elit eiusmod enim irure amet
                      eiusmod qui reprehenderit nostrud tempor. Fugiat ipsum
                      excepteur in aliqua non et quis aliquip ad irure in labore
                      cillum elit enim. Consequat aliquip incididunt ipsum et
                      minim laborum laborum laborum et cillum labore. Deserunt
                      adipisicing cillum id nulla minim nostrud labore eiusmod
                      et amet.
                    </div>

<div
                      class="tab-pane fade active show"
                      id="edash-tab-dropdown-pane-4"
                      role="tabpanel"
                    >
                      Et et consectetur ipsum labore excepteur est proident
                      excepteur ad velit occaecat qui minim occaecat veniam.
                      Fugiat veniam incididunt anim aliqua enim pariatur veniam
                      sunt est aute sit dolor anim. Velit non irure adipisicing
                      aliqua ullamco irure incididunt irure non esse consectetur
                      nostrud minim non minim occaecat. Amet duis do nisi duis
                      veniam non est eiusmod tempor incididunt tempor dolor
                      ipsum in qui sit.
                    </div>

<div
                      class="tab-pane fade"
                      id="edash-tab-dropdown-pane-5"
                      role="tabpanel"
                    >
                      Nulla est ullamco ut irure incididunt nulla Lorem Lorem
                      minim irure officia enim reprehenderit. Magna duis labore
                      cillum sint adipisicing exercitation ipsum. Nostrud ut
                      anim non exercitation velit laboris fugiat cupidatat.
                      Commodo esse dolore fugiat sint velit ullamco magna
                      consequat voluptate minim amet aliquip ipsum aute laboris
                      nisi. Labore labore veniam irure irure ipsum pariatur
                      mollit magna in cupidatat dolore magna irure esse tempor
                      ad mollit. Dolore commodo nulla minim amet ipsum officia
                      consectetur amet ullamco voluptate nisi commodo ea sit eu.
                    </div>

<div
                      class="tab-pane fade"
                      id="edash-tab-dropdown-pane-6"
                      role="tabpanel"
                    >
                      Sint sit mollit irure quis est nostrud cillum consequat
                      Lorem esse do quis dolor esse fugiat sunt do. Eu ex
                      commodo veniam Lorem aliquip laborum occaecat qui Lorem
                      esse mollit dolore anim cupidatat. eserunt officia id
                      Lorem nostrud aute id commodo elit eiusmod enim irure amet
                      eiusmod qui reprehenderit nostrud tempor. Fugiat ipsum
                      excepteur in aliqua non et quis aliquip ad irure in labore
                      cillum elit enim. Consequat aliquip incididunt ipsum et
                      minim laborum laborum laborum et cillum labore. Deserunt
                      adipisicing cillum id nulla minim nostrud labore eiusmod
                      et amet.
                    </div>

<div
                      class="tab-pane fade"
                      id="edash-tab-dropdown-pane-7"
                      role="tabpanel"
                    >
                      Et et consectetur ipsum labore excepteur est proident
                      excepteur ad velit occaecat qui minim occaecat veniam.
                      Fugiat veniam incididunt anim aliqua enim pariatur veniam
                      sunt est aute sit dolor anim. Velit non irure adipisicing
                      aliqua ullamco irure incididunt irure non esse consectetur
                      nostrud minim non minim occaecat. Amet duis do nisi duis
                      veniam non est eiusmod tempor incididunt tempor dolor
                      ipsum in qui sit.
                    </div>
                  </div>
                </div>
              </div>
            </div>
            
            
            <div class="col-lg-6 col-xl-12 col-xxl-6">
              <div class="card">
                <div class="card-header">
                  <h4 class="card-title">withIcon</h4>
                </div>
                <div class="card-body">
                  <ul
                    class="nav nav-tabs nav-withicon-tabs mb-3"
                    role="tablist"
                  >
                    <li>
                      <button
                        class="nav-link active"
                        id="edash-withIcon-home-tab"
                        data-bs-toggle="pill"
                        data-bs-target="#edash-withIcon-home"
                        type="button"
                        role="tab"
                        aria-controls="edash-withIcon-home"
                        aria-selected="true"
                      >
                        <i class="fi fi-rr-home"></i>
                        <span class="ms-2">Home</span>
                      </button>
                    </li>
                    <li>
                      <button
                        class="nav-link"
                        id="edash-withIcon-profile-tab"
                        data-bs-toggle="pill"
                        data-bs-target="#edash-withIcon-profile"
                        type="button"
                        role="tab"
                        aria-controls="edash-withIcon-profile"
                        aria-selected="false"
                      >
                        <i class="fi fi-rr-user"></i>
                        <span class="ms-2">Profile</span>
                      </button>
                    </li>
                    <li>
                      <button
                        class="nav-link"
                        id="edash-withIcon-messages-tab"
                        data-bs-toggle="pill"
                        data-bs-target="#edash-withIcon-messages"
                        type="button"
                        role="tab"
                        aria-controls="edash-withIcon-messages"
                        aria-selected="false"
                      >
                        <i class="fi fi-rr-comment-alt"></i>
                        <span class="ms-2">Messages</span>
                      </button>
                    </li>
                    <li>
                      <button
                        class="nav-link"
                        id="edash-withIcon-settings-tab"
                        data-bs-toggle="pill"
                        data-bs-target="#edash-withIcon-settings"
                        type="button"
                        role="tab"
                        aria-controls="edash-withIcon-settings"
                        aria-selected="false"
                      >
                        <i class="fi fi-rr-settings"></i>
                        <span class="ms-2">Settings</span>
                      </button>
                    </li>
                    <li>
                      <button
                        class="nav-link"
                        id="edash-withIcon-disabled-tab"
                        data-bs-toggle="pill"
                        data-bs-target="#edash-withIcon-disabled"
                        type="button"
                        role="tab"
                        aria-controls="edash-withIcon-disabled"
                        aria-selected="false"
                        disabled
                      >
                        <i class="fi fi-rr-ban"></i>
                        <span class="ms-2">Disabled</span>
                      </button>
                    </li>
                  </ul>
                  <div class="tab-content">
                    <div
                      class="tab-pane fade show active"
                      id="edash-withIcon-home"
                      role="tabpanel"
                      aria-labelledby="edash-withIcon-home-tab"
                      tabindex="0"
                    >
                      <p>
                        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 <code>.nav</code>-powered
                        navigation.
                      </p>
                    </div>
                    <div
                      class="tab-pane fade"
                      id="edash-withIcon-profile"
                      role="tabpanel"
                      aria-labelledby="edash-withIcon-profile-tab"
                      tabindex="0"
                    >
                      <p>
                        This is some placeholder content the
                        <strong>Profile 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
                        <code>.nav</code>-powered navigation.
                      </p>
                    </div>
                    <div
                      class="tab-pane fade"
                      id="edash-withIcon-messages"
                      role="tabpanel"
                      aria-labelledby="edash-withIcon-messages-tab"
                      tabindex="0"
                    >
                      <p>
                        This is some placeholder content the
                        <strong>Messages 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
                        <code>.nav</code>-powered navigation.
                      </p>
                    </div>
                    <div
                      class="tab-pane fade"
                      id="edash-withIcon-settings"
                      role="tabpanel"
                      aria-labelledby="edash-withIcon-settings-tab"
                      tabindex="0"
                    >
                      <p>
                        This is some placeholder content the
                        <strong>Settings 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
                        <code>.nav</code>-powered navigation.
                      </p>
                    </div>
                    <div
                      class="tab-pane fade"
                      id="edash-withIcon-disabled"
                      role="tabpanel"
                      aria-labelledby="edash-withIcon-disabled-tab"
                      tabindex="0"
                    >
                      <p>
                        This is some placeholder content the
                        <strong>Disabled tab's</strong> associated content.
                      </p>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            
            
            <div class="col-lg-6 col-xl-12 col-xxl-6">
              <div class="card">
                <div class="card-header">
                  <h4 class="card-title">Line</h4>
                </div>
                <div class="card-body">
                  <ul class="nav nav-tabs nav-line-tabs mb-3" role="tablist">
                    <li class="nav-item">
                      <button
                        class="nav-link active"
                        id="edash-Line-home-tab"
                        data-bs-toggle="pill"
                        data-bs-target="#edash-Line-home"
                        type="button"
                        role="tab"
                        aria-controls="edash-Line-home"
                        aria-selected="true"
                      >
                        <i class="fi fi-rr-home"></i>
                        <span class="ms-2">Home</span>
                      </button>
                    </li>
                    <li class="nav-item">
                      <button
                        class="nav-link"
                        id="edash-Line-profile-tab"
                        data-bs-toggle="pill"
                        data-bs-target="#edash-Line-profile"
                        type="button"
                        role="tab"
                        aria-controls="edash-Line-profile"
                        aria-selected="false"
                      >
                        <i class="fi fi-rr-user"></i>
                        <span class="ms-2">Profile</span>
                      </button>
                    </li>
                    <li class="nav-item">
                      <button
                        class="nav-link"
                        id="edash-Line-messages-tab"
                        data-bs-toggle="pill"
                        data-bs-target="#edash-Line-messages"
                        type="button"
                        role="tab"
                        aria-controls="edash-Line-messages"
                        aria-selected="false"
                      >
                        <i class="fi fi-rr-comment-alt"></i>
                        <span class="ms-2">Messages</span>
                      </button>
                    </li>
                    <li class="nav-item">
                      <button
                        class="nav-link"
                        id="edash-Line-settings-tab"
                        data-bs-toggle="pill"
                        data-bs-target="#edash-Line-settings"
                        type="button"
                        role="tab"
                        aria-controls="edash-Line-settings"
                        aria-selected="false"
                      >
                        <i class="fi fi-rr-settings"></i>
                        <span class="ms-2">Settings</span>
                      </button>
                    </li>
                    <li class="nav-item">
                      <button
                        class="nav-link"
                        id="edash-Line-disabled-tab"
                        data-bs-toggle="pill"
                        data-bs-target="#edash-Line-disabled"
                        type="button"
                        role="tab"
                        aria-controls="edash-Line-disabled"
                        aria-selected="false"
                        disabled
                      >
                        <i class="fi fi-rr-ban"></i>
                        <span class="ms-2">Disabled</span>
                      </button>
                    </li>
                  </ul>
                  <div class="tab-content">
                    <div
                      class="tab-pane fade show active"
                      id="edash-Line-home"
                      role="tabpanel"
                      aria-labelledby="edash-Line-home-tab"
                      tabindex="0"
                    >
                      <p>
                        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 <code>.nav</code>-powered
                        navigation.
                      </p>
                    </div>
                    <div
                      class="tab-pane fade"
                      id="edash-Line-profile"
                      role="tabpanel"
                      aria-labelledby="edash-Line-profile-tab"
                      tabindex="0"
                    >
                      <p>
                        This is some placeholder content the
                        <strong>Profile 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
                        <code>.nav</code>-powered navigation.
                      </p>
                    </div>
                    <div
                      class="tab-pane fade"
                      id="edash-Line-messages"
                      role="tabpanel"
                      aria-labelledby="edash-Line-messages-tab"
                      tabindex="0"
                    >
                      <p>
                        This is some placeholder content the
                        <strong>Messages 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
                        <code>.nav</code>-powered navigation.
                      </p>
                    </div>
                    <div
                      class="tab-pane fade"
                      id="edash-Line-settings"
                      role="tabpanel"
                      aria-labelledby="edash-Line-settings-tab"
                      tabindex="0"
                    >
                      <p>
                        This is some placeholder content the
                        <strong>Settings 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
                        <code>.nav</code>-powered navigation.
                      </p>
                    </div>
                    <div
                      class="tab-pane fade"
                      id="edash-Line-disabled"
                      role="tabpanel"
                      aria-labelledby="edash-Line-disabled-tab"
                      tabindex="0"
                    >
                      <p>
                        This is some placeholder content the
                        <strong>Disabled tab's</strong> associated content.
                      </p>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            
            
            <div class="col-12">
              <div class="card">
                <div class="card-header">
                  <h4 class="card-title">Themes</h4>
                </div>
                <div class="card-body">
                  <ul
                    class="nav nav-tabs nav-theme-tabs-primary mb-3"
                    role="tablist"
                  >
                    <li class="nav-item">
                      <button
                        class="nav-link active"
                        id="edash-theme-primary-home-tab"
                        data-bs-toggle="pill"
                        data-bs-target="#edash-theme-primary-home"
                        type="button"
                        role="tab"
                        aria-controls="edash-theme-primary-home"
                        aria-selected="true"
                      >
                        <i class="fi fi-rr-home"></i>
                        <span class="ms-2">Home</span>
                      </button>
                    </li>
                    <li class="nav-item">
                      <button
                        class="nav-link"
                        id="edash-theme-primary-profile-tab"
                        data-bs-toggle="pill"
                        data-bs-target="#edash-theme-primary-profile"
                        type="button"
                        role="tab"
                        aria-controls="edash-theme-primary-profile"
                        aria-selected="false"
                      >
                        <i class="fi fi-rr-user"></i>
                        <span class="ms-2">Profile</span>
                      </button>
                    </li>
                    <li class="nav-item">
                      <button
                        class="nav-link"
                        id="edash-theme-primary-messages-tab"
                        data-bs-toggle="pill"
                        data-bs-target="#edash-theme-primary-messages"
                        type="button"
                        role="tab"
                        aria-controls="edash-theme-primary-messages"
                        aria-selected="false"
                      >
                        <i class="fi fi-rr-comment-alt"></i>
                        <span class="ms-2">Messages</span>
                      </button>
                    </li>
                    <li class="nav-item">
                      <button
                        class="nav-link"
                        id="edash-theme-primary-settings-tab"
                        data-bs-toggle="pill"
                        data-bs-target="#edash-theme-primary-settings"
                        type="button"
                        role="tab"
                        aria-controls="edash-theme-primary-settings"
                        aria-selected="false"
                      >
                        <i class="fi fi-rr-settings"></i>
                        <span class="ms-2">Settings</span>
                      </button>
                    </li>
                    <li class="nav-item">
                      <button
                        class="nav-link"
                        id="edash-theme-primary-disabled-tab"
                        data-bs-toggle="pill"
                        data-bs-target="#edash-theme-primary-disabled"
                        type="button"
                        role="tab"
                        aria-controls="edash-theme-primary-disabled"
                        aria-selected="false"
                        disabled
                      >
                        <i class="fi fi-rr-ban"></i>
                        <span class="ms-2">Disabled</span>
                      </button>
                    </li>
                  </ul>
                  <div class="tab-content">
                    <div
                      id="edash-theme-primary-home"
                      class="tab-pane fade show active"
                    >
                      <p>
                        Lorem ipsum dolor sit amet consectetur adipisicing elit.
                        Non, ducimus porro unde deserunt tenetur voluptatibus
                        sunt nesciunt quod? Facere impedit porro autem harum
                        tenetur laudantium reprehenderit ipsum iusto omnis
                        magni.
                      </p>
                      <p>
                        Lorem ipsum dolor sit amet consectetur adipisicing elit.
                        Non, ducimus porro unde deserunt tenetur voluptatibus
                        sunt nesciunt quod? Facere impedit porro autem harum
                        tenetur laudantium reprehenderit ipsum iusto omnis
                        magni.
                      </p>
                    </div>
                    <div id="edash-theme-primary-profile" class="tab-pane fade">
                      <p>
                        Lorem ipsum dolor sit amet consectetur adipisicing elit.
                        Non, ducimus porro unde deserunt tenetur voluptatibus
                        sunt nesciunt quod? Facere impedit porro autem harum
                        tenetur laudantium reprehenderit ipsum iusto omnis
                        magni.
                      </p>
                      <p>
                        Lorem ipsum dolor sit amet consectetur adipisicing elit.
                        Non, ducimus porro unde deserunt tenetur voluptatibus
                        sunt nesciunt quod? Facere impedit porro autem harum
                        tenetur laudantium reprehenderit ipsum iusto omnis
                        magni.
                      </p>
                    </div>
                    <div
                      id="edash-theme-primary-messages"
                      class="tab-pane fade"
                    >
                      <p>
                        Lorem ipsum dolor sit amet consectetur adipisicing elit.
                        Non, ducimus porro unde deserunt tenetur voluptatibus
                        sunt nesciunt quod? Facere impedit porro autem harum
                        tenetur laudantium reprehenderit ipsum iusto omnis
                        magni.
                      </p>
                      <p>
                        Lorem ipsum dolor sit amet consectetur adipisicing elit.
                        Non, ducimus porro unde deserunt tenetur voluptatibus
                        sunt nesciunt quod? Facere impedit porro autem harum
                        tenetur laudantium reprehenderit ipsum iusto omnis
                        magni.
                      </p>
                    </div>
                    <div
                      id="edash-theme-primary-settings"
                      class="tab-pane fade"
                    >
                      <p>
                        Lorem ipsum dolor sit amet consectetur adipisicing elit.
                        Non, ducimus porro unde deserunt tenetur voluptatibus
                        sunt nesciunt quod? Facere impedit porro autem harum
                        tenetur laudantium reprehenderit ipsum iusto omnis
                        magni.
                      </p>
                      <p>
                        Lorem ipsum dolor sit amet consectetur adipisicing elit.
                        Non, ducimus porro unde deserunt tenetur voluptatibus
                        sunt nesciunt quod? Facere impedit porro autem harum
                        tenetur laudantium reprehenderit ipsum iusto omnis
                        magni.
                      </p>
                    </div>
                    <div
                      id="edash-theme-primary-disabled"
                      class="tab-pane fade"
                    >
                      <p>
                        Lorem ipsum dolor sit amet consectetur adipisicing elit.
                        Non, ducimus porro unde deserunt tenetur voluptatibus
                        sunt nesciunt quod? Facere impedit porro autem harum
                        tenetur laudantium reprehenderit ipsum iusto omnis
                        magni.
                      </p>
                      <p>
                        Lorem ipsum dolor sit amet consectetur adipisicing elit.
                        Non, ducimus porro unde deserunt tenetur voluptatibus
                        sunt nesciunt quod? Facere impedit porro autem harum
                        tenetur laudantium reprehenderit ipsum iusto omnis
                        magni.
                      </p>
                    </div>
                  </div>
                  <hr class="my-6" />
                  <ul
                    class="nav nav-tabs nav-theme-tabs-success mb-3"
                    role="tablist"
                  >
                    <li class="nav-item">
                      <button
                        class="nav-link active"
                        id="edash-theme-success-home-tab"
                        data-bs-toggle="pill"
                        data-bs-target="#edash-theme-success-home"
                        type="button"
                        role="tab"
                        aria-controls="edash-theme-success-home"
                        aria-selected="true"
                      >
                        <i class="fi fi-rr-home"></i>
                        <span class="ms-2">Home</span>
                      </button>
                    </li>
                    <li class="nav-item">
                      <button
                        class="nav-link"
                        id="edash-theme-success-profile-tab"
                        data-bs-toggle="pill"
                        data-bs-target="#edash-theme-success-profile"
                        type="button"
                        role="tab"
                        aria-controls="edash-theme-success-profile"
                        aria-selected="false"
                      >
                        <i class="fi fi-rr-user"></i>
                        <span class="ms-2">Profile</span>
                      </button>
                    </li>
                    <li class="nav-item">
                      <button
                        class="nav-link"
                        id="edash-theme-success-messages-tab"
                        data-bs-toggle="pill"
                        data-bs-target="#edash-theme-success-messages"
                        type="button"
                        role="tab"
                        aria-controls="edash-theme-success-messages"
                        aria-selected="false"
                      >
                        <i class="fi fi-rr-comment-alt"></i>
                        <span class="ms-2">Messages</span>
                      </button>
                    </li>
                    <li class="nav-item">
                      <button
                        class="nav-link"
                        id="edash-theme-success-settings-tab"
                        data-bs-toggle="pill"
                        data-bs-target="#edash-theme-success-settings"
                        type="button"
                        role="tab"
                        aria-controls="edash-theme-success-settings"
                        aria-selected="false"
                      >
                        <i class="fi fi-rr-settings"></i>
                        <span class="ms-2">Settings</span>
                      </button>
                    </li>
                    <li class="nav-item">
                      <button
                        class="nav-link"
                        id="edash-theme-success-disabled-tab"
                        data-bs-toggle="pill"
                        data-bs-target="#edash-theme-success-disabled"
                        type="button"
                        role="tab"
                        aria-controls="edash-theme-success-disabled"
                        aria-selected="false"
                        disabled
                      >
                        <i class="fi fi-rr-ban"></i>
                        <span class="ms-2">Disabled</span>
                      </button>
                    </li>
                  </ul>
                  <div class="tab-content">
                    <div
                      id="edash-theme-success-home"
                      class="tab-pane fade show active"
                    >
                      <p>
                        Lorem ipsum dolor sit amet consectetur adipisicing elit.
                        Non, ducimus porro unde deserunt tenetur voluptatibus
                        sunt nesciunt quod? Facere impedit porro autem harum
                        tenetur laudantium reprehenderit ipsum iusto omnis
                        magni.
                      </p>
                      <p>
                        Lorem ipsum dolor sit amet consectetur adipisicing elit.
                        Non, ducimus porro unde deserunt tenetur voluptatibus
                        sunt nesciunt quod? Facere impedit porro autem harum
                        tenetur laudantium reprehenderit ipsum iusto omnis
                        magni.
                      </p>
                    </div>
                    <div id="edash-theme-success-profile" class="tab-pane fade">
                      <p>
                        Lorem ipsum dolor sit amet consectetur adipisicing elit.
                        Non, ducimus porro unde deserunt tenetur voluptatibus
                        sunt nesciunt quod? Facere impedit porro autem harum
                        tenetur laudantium reprehenderit ipsum iusto omnis
                        magni.
                      </p>
                      <p>
                        Lorem ipsum dolor sit amet consectetur adipisicing elit.
                        Non, ducimus porro unde deserunt tenetur voluptatibus
                        sunt nesciunt quod? Facere impedit porro autem harum
                        tenetur laudantium reprehenderit ipsum iusto omnis
                        magni.
                      </p>
                    </div>
                    <div
                      id="edash-theme-success-messages"
                      class="tab-pane fade"
                    >
                      <p>
                        Lorem ipsum dolor sit amet consectetur adipisicing elit.
                        Non, ducimus porro unde deserunt tenetur voluptatibus
                        sunt nesciunt quod? Facere impedit porro autem harum
                        tenetur laudantium reprehenderit ipsum iusto omnis
                        magni.
                      </p>
                      <p>
                        Lorem ipsum dolor sit amet consectetur adipisicing elit.
                        Non, ducimus porro unde deserunt tenetur voluptatibus
                        sunt nesciunt quod? Facere impedit porro autem harum
                        tenetur laudantium reprehenderit ipsum iusto omnis
                        magni.
                      </p>
                    </div>
                    <div
                      id="edash-theme-success-settings"
                      class="tab-pane fade"
                    >
                      <p>
                        Lorem ipsum dolor sit amet consectetur adipisicing elit.
                        Non, ducimus porro unde deserunt tenetur voluptatibus
                        sunt nesciunt quod? Facere impedit porro autem harum
                        tenetur laudantium reprehenderit ipsum iusto omnis
                        magni.
                      </p>
                      <p>
                        Lorem ipsum dolor sit amet consectetur adipisicing elit.
                        Non, ducimus porro unde deserunt tenetur voluptatibus
                        sunt nesciunt quod? Facere impedit porro autem harum
                        tenetur laudantium reprehenderit ipsum iusto omnis
                        magni.
                      </p>
                    </div>
                    <div
                      id="edash-theme-success-disabled"
                      class="tab-pane fade"
                    >
                      <p>
                        Lorem ipsum dolor sit amet consectetur adipisicing elit.
                        Non, ducimus porro unde deserunt tenetur voluptatibus
                        sunt nesciunt quod? Facere impedit porro autem harum
                        tenetur laudantium reprehenderit ipsum iusto omnis
                        magni.
                      </p>
                      <p>
                        Lorem ipsum dolor sit amet consectetur adipisicing elit.
                        Non, ducimus porro unde deserunt tenetur voluptatibus
                        sunt nesciunt quod? Facere impedit porro autem harum
                        tenetur laudantium reprehenderit ipsum iusto omnis
                        magni.
                      </p>
                    </div>
                  </div>
                  <hr class="my-6" />
                  <div class="d-sm-flex align-items-start">
                    <div
                      class="nav nav-pills nav-theme-tabs-danger flex-column flex-shrink-0 me-4 mb-4 mb-sm-0 wd-sm-200"
                      id="edash-theme-danger-pills-tab"
                      role="tablist"
                      aria-orientation="vertical"
                    >
                      <button
                        class="nav-link text-start active"
                        id="edash-theme-danger-pills-home-tab"
                        data-bs-toggle="pill"
                        data-bs-target="#edash-theme-danger-pills-home"
                        type="button"
                        role="tab"
                        aria-controls="edash-theme-danger-pills-home"
                        aria-selected="true"
                      >
                        <i class="fi fi-rr-home"></i>
                        <span class="ms-2">Home</span>
                      </button>
                      <button
                        class="nav-link text-start"
                        id="edash-theme-danger-pills-profile-tab"
                        data-bs-toggle="pill"
                        data-bs-target="#edash-theme-danger-pills-profile"
                        type="button"
                        role="tab"
                        aria-controls="edash-theme-danger-pills-profile"
                        aria-selected="false"
                      >
                        <i class="fi fi-rr-user"></i>
                        <span class="ms-2">Profile</span>
                      </button>
                      <button
                        class="nav-link text-start"
                        id="edash-theme-danger-pills-messages-tab"
                        data-bs-toggle="pill"
                        data-bs-target="#edash-theme-danger-pills-messages"
                        type="button"
                        role="tab"
                        aria-controls="edash-theme-danger-pills-messages"
                        aria-selected="false"
                      >
                        <i class="fi fi-rr-comment-alt"></i>
                        <span class="ms-2">Messages</span>
                      </button>
                      <button
                        class="nav-link text-start"
                        id="edash-theme-danger-pills-settings-tab"
                        data-bs-toggle="pill"
                        data-bs-target="#edash-theme-danger-pills-settings"
                        type="button"
                        role="tab"
                        aria-controls="edash-theme-danger-pills-settings"
                        aria-selected="false"
                      >
                        <i class="fi fi-rr-settings"></i>
                        <span class="ms-2">Settings</span>
                      </button>
                      <button
                        class="nav-link text-start"
                        id="edash-theme-danger-pills-disabled-tab"
                        data-bs-toggle="pill"
                        data-bs-target="#edash-theme-danger-pills-disabled"
                        type="button"
                        role="tab"
                        aria-controls="edash-theme-danger-pills-disabled"
                        aria-selected="false"
                        disabled
                      >
                        <i class="fi fi-rr-ban"></i>
                        <span class="ms-2">Disabled</span>
                      </button>
                    </div>
                    <div class="tab-content flex-grow-1">
                      <div
                        class="tab-pane fade show active"
                        id="edash-theme-danger-pills-home"
                        role="tabpanel"
                        aria-labelledby="edash-theme-danger-pills-home-tab"
                        tabindex="0"
                      >
                        <p>
                          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
                          <code>.nav</code>-powered navigation.
                        </p>
                        <p>
                          Lorem ipsum dolor, sit amet consectetur adipisicing
                          elit. Laboriosam repellat pariatur sunt voluptas amet
                          molestiae fugiat tempore officiis eligendi laborum
                          error provident a aliquam quisquam consequatur facilis
                          at ab voluptates harum delectus, unde quos! Ipsum
                          corrupti alias ducimus nemo, asperiores odit rem eum
                          minima ratione provident temporibus eius voluptatibus,
                          nobis corporis possimus distinctio quisquam?
                          Necessitatibus nisi dolore quae numquam modi eum
                          tempora, cum nemo fugiat possimus in consectetur
                          molestias, repellat voluptas dolores molestiae autem
                          quidem. Exercitationem doloremque reprehenderit hic
                          consequuntur odio neque! Itaque at libero dolor
                          voluptas inventore ea, maxime officiis, similique
                          veritatis perspiciatis...
                        </p>
                      </div>
                      <div
                        class="tab-pane fade"
                        id="edash-theme-danger-pills-profile"
                        role="tabpanel"
                        aria-labelledby="edash-theme-danger-pills-profile-tab"
                        tabindex="0"
                      >
                        <p>
                          This is some placeholder content the
                          <strong>Profile 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
                          <code>.nav</code>-powered navigation.
                        </p>
                        <p>
                          Lorem ipsum dolor, sit amet consectetur adipisicing
                          elit. Laboriosam repellat pariatur sunt voluptas amet
                          molestiae fugiat tempore officiis eligendi laborum
                          error provident a aliquam quisquam consequatur facilis
                          at ab voluptates harum delectus, unde quos! Ipsum
                          corrupti alias ducimus nemo, asperiores odit rem eum
                          minima ratione provident temporibus eius voluptatibus,
                          nobis corporis possimus distinctio quisquam?
                          Necessitatibus nisi dolore quae numquam modi eum
                          tempora, cum nemo fugiat possimus in consectetur
                          molestias, repellat voluptas dolores molestiae autem
                          quidem. Exercitationem doloremque reprehenderit hic
                          consequuntur odio neque! Itaque at libero dolor
                          voluptas inventore ea, maxime officiis, similique
                          veritatis perspiciatis...
                        </p>
                      </div>
                      <div
                        class="tab-pane fade"
                        id="edash-theme-danger-pills-messages"
                        role="tabpanel"
                        aria-labelledby="edash-theme-danger-pills-messages-tab"
                        tabindex="0"
                      >
                        <p>
                          This is some placeholder content the
                          <strong>Messages 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
                          <code>.nav</code>-powered navigation.
                        </p>
                        <p>
                          Lorem ipsum dolor, sit amet consectetur adipisicing
                          elit. Laboriosam repellat pariatur sunt voluptas amet
                          molestiae fugiat tempore officiis eligendi laborum
                          error provident a aliquam quisquam consequatur facilis
                          at ab voluptates harum delectus, unde quos! Ipsum
                          corrupti alias ducimus nemo, asperiores odit rem eum
                          minima ratione provident temporibus eius voluptatibus,
                          nobis corporis possimus distinctio quisquam?
                          Necessitatibus nisi dolore quae numquam modi eum
                          tempora, cum nemo fugiat possimus in consectetur
                          molestias, repellat voluptas dolores molestiae autem
                          quidem. Exercitationem doloremque reprehenderit hic
                          consequuntur odio neque! Itaque at libero dolor
                          voluptas inventore ea, maxime officiis, similique
                          veritatis perspiciatis...
                        </p>
                      </div>
                      <div
                        class="tab-pane fade"
                        id="edash-theme-danger-pills-settings"
                        role="tabpanel"
                        aria-labelledby="edash-theme-danger-pills-settings-tab"
                        tabindex="0"
                      >
                        <p>
                          This is some placeholder content the
                          <strong>Settings 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
                          <code>.nav</code>-powered navigation.
                        </p>
                        <p>
                          Lorem ipsum dolor, sit amet consectetur adipisicing
                          elit. Laboriosam repellat pariatur sunt voluptas amet
                          molestiae fugiat tempore officiis eligendi laborum
                          error provident a aliquam quisquam consequatur facilis
                          at ab voluptates harum delectus, unde quos! Ipsum
                          corrupti alias ducimus nemo, asperiores odit rem eum
                          minima ratione provident temporibus eius voluptatibus,
                          nobis corporis possimus distinctio quisquam?
                          Necessitatibus nisi dolore quae numquam modi eum
                          tempora, cum nemo fugiat possimus in consectetur
                          molestias, repellat voluptas dolores molestiae autem
                          quidem. Exercitationem doloremque reprehenderit hic
                          consequuntur odio neque! Itaque at libero dolor
                          voluptas inventore ea, maxime officiis, similique
                          veritatis perspiciatis...
                        </p>
                      </div>
                      <div
                        class="tab-pane fade"
                        id="edash-theme-danger-pills-disabled"
                        role="tabpanel"
                        aria-labelledby="edash-theme-danger-pills-disabled-tab"
                        tabindex="0"
                      >
                        <p>
                          This is some placeholder content the
                          <strong>Disabled tab's</strong> associated content.
                        </p>
                        <p>
                          Lorem ipsum dolor, sit amet consectetur adipisicing
                          elit. Laboriosam repellat pariatur sunt voluptas amet
                          molestiae fugiat tempore officiis eligendi laborum
                          error provident a aliquam quisquam consequatur facilis
                          at ab voluptates harum delectus, unde quos! Ipsum
                          corrupti alias ducimus nemo, asperiores odit rem eum
                          minima ratione provident temporibus eius voluptatibus,
                          nobis corporis possimus distinctio quisquam?
                          Necessitatibus nisi dolore quae numquam modi eum
                          tempora, cum nemo fugiat possimus in consectetur
                          molestias, repellat voluptas dolores molestiae autem
                          quidem. Exercitationem doloremque reprehenderit hic
                          consequuntur odio neque! Itaque at libero dolor
                          voluptas inventore ea, maxime officiis, similique
                          veritatis perspiciatis...
                        </p>
                      </div>
                    </div>
                  </div>
                  <hr class="my-6" />
                  <ul
                    class="nav nav-tabs nav-line-tabs nav-theme-tabs-warning mb-3"
                    role="tablist"
                  >
                    <li class="nav-item">
                      <button
                        class="nav-link active"
                        id="edash-tab-theme-Line-home-tab"
                        data-bs-toggle="pill"
                        data-bs-target="#edash-tab-theme-Line-home"
                        type="button"
                        role="tab"
                        aria-controls="edash-tab-theme-Line-home"
                        aria-selected="true"
                      >
                        <i class="fi fi-rr-home"></i>
                        <span class="ms-2">Home</span>
                      </button>
                    </li>
                    <li class="nav-item">
                      <button
                        class="nav-link"
                        id="edash-tab-theme-Line-profile-tab"
                        data-bs-toggle="pill"
                        data-bs-target="#edash-tab-theme-Line-profile"
                        type="button"
                        role="tab"
                        aria-controls="edash-tab-theme-Line-profile"
                        aria-selected="false"
                      >
                        <i class="fi fi-rr-user"></i>
                        <span class="ms-2">Profile</span>
                      </button>
                    </li>
                    <li class="nav-item">
                      <button
                        class="nav-link"
                        id="edash-tab-theme-Line-messages-tab"
                        data-bs-toggle="pill"
                        data-bs-target="#edash-tab-theme-Line-messages"
                        type="button"
                        role="tab"
                        aria-controls="edash-tab-theme-Line-messages"
                        aria-selected="false"
                      >
                        <i class="fi fi-rr-comment-alt"></i>
                        <span class="ms-2">Messages</span>
                      </button>
                    </li>
                    <li class="nav-item">
                      <button
                        class="nav-link"
                        id="edash-tab-theme-Line-settings-tab"
                        data-bs-toggle="pill"
                        data-bs-target="#edash-tab-theme-Line-settings"
                        type="button"
                        role="tab"
                        aria-controls="edash-tab-theme-Line-settings"
                        aria-selected="false"
                      >
                        <i class="fi fi-rr-settings"></i>
                        <span class="ms-2">Settings</span>
                      </button>
                    </li>
                    <li class="nav-item">
                      <button
                        class="nav-link"
                        id="edash-tab-theme-Line-disabled-tab"
                        data-bs-toggle="pill"
                        data-bs-target="#edash-tab-theme-Line-disabled"
                        type="button"
                        role="tab"
                        aria-controls="edash-tab-theme-Line-disabled"
                        aria-selected="false"
                        disabled
                      >
                        <i class="fi fi-rr-ban"></i>
                        <span class="ms-2">Disabled</span>
                      </button>
                    </li>
                  </ul>
                  <div class="tab-content">
                    <div
                      class="tab-pane fade show active"
                      id="edash-tab-theme-Line-home"
                      role="tabpanel"
                      aria-labelledby="edash-tab-theme-Line-home-tab"
                      tabindex="0"
                    >
                      <p>
                        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 <code>.nav</code>-powered
                        navigation.
                      </p>
                    </div>
                    <div
                      class="tab-pane fade"
                      id="edash-tab-theme-Line-profile"
                      role="tabpanel"
                      aria-labelledby="edash-tab-theme-Line-profile-tab"
                      tabindex="0"
                    >
                      <p>
                        This is some placeholder content the
                        <strong>Profile 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
                        <code>.nav</code>-powered navigation.
                      </p>
                    </div>
                    <div
                      class="tab-pane fade"
                      id="edash-tab-theme-Line-messages"
                      role="tabpanel"
                      aria-labelledby="edash-tab-theme-Line-messages-tab"
                      tabindex="0"
                    >
                      <p>
                        This is some placeholder content the
                        <strong>Messages 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
                        <code>.nav</code>-powered navigation.
                      </p>
                    </div>
                    <div
                      class="tab-pane fade"
                      id="edash-tab-theme-Line-settings"
                      role="tabpanel"
                      aria-labelledby="edash-tab-theme-Line-settings-tab"
                      tabindex="0"
                    >
                      <p>
                        This is some placeholder content the
                        <strong>Settings 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
                        <code>.nav</code>-powered navigation.
                      </p>
                    </div>
                    <div
                      class="tab-pane fade"
                      id="edash-tab-theme-Line-disabled"
                      role="tabpanel"
                      aria-labelledby="edash-tab-theme-Line-disabled-tab"
                      tabindex="0"
                    >
                      <p>
                        This is some placeholder content the
                        <strong>Disabled tab's</strong> associated content.
                      </p>
                    </div>
                  </div>
                  <hr class="my-6" />
                  <ul
                    class="nav nav-tabs nav-theme-tabs-info mb-3"
                    role="tablist"
                  >
                    <li class="nav-item" role="presentation">
                      <a
                        href="javascript:void(0);"
                        class="nav-link"
                        data-bs-toggle="tab"
                        data-bs-target="#edash-tab-theme-dropdown-pane-1"
                        aria-selected="false"
                        role="tab"
                        tabindex="-1"
                        >Link 1</a
                      >
                    </li>
                    <li class="nav-item" role="presentation">
                      <a
                        href="javascript:void(0);"
                        class="nav-link"
                        data-bs-toggle="tab"
                        data-bs-target="#edash-tab-theme-dropdown-pane-2"
                        aria-selected="false"
                        role="tab"
                        tabindex="-1"
                        >Link 2</a
                      >
                    </li>
                    <li class="nav-item" role="presentation">
                      <a
                        href="javascript:void(0);"
                        class="nav-link"
                        data-bs-toggle="tab"
                        data-bs-target="#edash-tab-theme-dropdown-pane-3"
                        aria-selected="false"
                        role="tab"
                        tabindex="-1"
                        >Link 3</a
                      >
                    </li>
                    <li class="nav-item dropdown" role="presentation">
                      <a
                        class="nav-link dropdown-toggle active"
                        data-bs-toggle="dropdown"
                        href="#"
                        role="button"
                        aria-expanded="false"
                        >Dropdown</a
                      >
                      <ul class="dropdown-menu">
                        <li>
                          <a
                            href="javascript:void(0);"
                            class="dropdown-item active"
                            data-bs-toggle="tab"
                            data-bs-target="#edash-tab-theme-dropdown-pane-4"
                            aria-selected="false"
                            role="tab"
                            tabindex="-1"
                            >Action</a
                          >
                        </li>
                        <li>
                          <a
                            href="javascript:void(0);"
                            class="dropdown-item"
                            data-bs-toggle="tab"
                            data-bs-target="#edash-tab-theme-dropdown-pane-5"
                            aria-selected="false"
                            role="tab"
                            tabindex="-1"
                            >Another action</a
                          >
                        </li>
                        <li>
                          <a
                            href="javascript:void(0);"
                            class="dropdown-item"
                            data-bs-toggle="tab"
                            data-bs-target="#edash-tab-theme-dropdown-pane-6"
                            aria-selected="false"
                            role="tab"
                            tabindex="-1"
                            >Something else here</a
                          >
                        </li>
                        <li>
                          <a
                            href="javascript:void(0);"
                            class="dropdown-item"
                            data-bs-toggle="tab"
                            data-bs-target="#edash-tab-theme-dropdown-pane-7"
                            aria-selected="true"
                            role="tab"
                            >Separated link</a
                          >
                        </li>
                      </ul>
                    </li>
                  </ul>
                  <div class="tab-content">
                    <div
                      class="tab-pane fade"
                      id="edash-tab-theme-dropdown-pane-1"
                      role="tabpanel"
                    >
                      Et et consectetur ipsum labore excepteur est proident
                      excepteur ad velit occaecat qui minim occaecat veniam.
                      Fugiat veniam incididunt anim aliqua enim pariatur veniam
                      sunt est aute sit dolor anim. Velit non irure adipisicing
                      aliqua ullamco irure incididunt irure non esse consectetur
                      nostrud minim non minim occaecat. Amet duis do nisi duis
                      veniam non est eiusmod tempor incididunt tempor dolor
                      ipsum in qui sit.
                    </div>

<div
                      class="tab-pane fade"
                      id="edash-tab-theme-dropdown-pane-2"
                      role="tabpanel"
                    >
                      Nulla est ullamco ut irure incididunt nulla Lorem Lorem
                      minim irure officia enim reprehenderit. Magna duis labore
                      cillum sint adipisicing exercitation ipsum. Nostrud ut
                      anim non exercitation velit laboris fugiat cupidatat.
                      Commodo esse dolore fugiat sint velit ullamco magna
                      consequat voluptate minim amet aliquip ipsum aute laboris
                      nisi. Labore labore veniam irure irure ipsum pariatur
                      mollit magna in cupidatat dolore magna irure esse tempor
                      ad mollit. Dolore commodo nulla minim amet ipsum officia
                      consectetur amet ullamco voluptate nisi commodo ea sit eu.
                    </div>

<div
                      class="tab-pane fade"
                      id="edash-tab-theme-dropdown-pane-3"
                      role="tabpanel"
                    >
                      Sint sit mollit irure quis est nostrud cillum consequat
                      Lorem esse do quis dolor esse fugiat sunt do. Eu ex
                      commodo veniam Lorem aliquip laborum occaecat qui Lorem
                      esse mollit dolore anim cupidatat. eserunt officia id
                      Lorem nostrud aute id commodo elit eiusmod enim irure amet
                      eiusmod qui reprehenderit nostrud tempor. Fugiat ipsum
                      excepteur in aliqua non et quis aliquip ad irure in labore
                      cillum elit enim. Consequat aliquip incididunt ipsum et
                      minim laborum laborum laborum et cillum labore. Deserunt
                      adipisicing cillum id nulla minim nostrud labore eiusmod
                      et amet.
                    </div>

<div
                      class="tab-pane fade active show"
                      id="edash-tab-theme-dropdown-pane-4"
                      role="tabpanel"
                    >
                      Et et consectetur ipsum labore excepteur est proident
                      excepteur ad velit occaecat qui minim occaecat veniam.
                      Fugiat veniam incididunt anim aliqua enim pariatur veniam
                      sunt est aute sit dolor anim. Velit non irure adipisicing
                      aliqua ullamco irure incididunt irure non esse consectetur
                      nostrud minim non minim occaecat. Amet duis do nisi duis
                      veniam non est eiusmod tempor incididunt tempor dolor
                      ipsum in qui sit.
                    </div>

<div
                      class="tab-pane fade"
                      id="edash-tab-theme-dropdown-pane-5"
                      role="tabpanel"
                    >
                      Nulla est ullamco ut irure incididunt nulla Lorem Lorem
                      minim irure officia enim reprehenderit. Magna duis labore
                      cillum sint adipisicing exercitation ipsum. Nostrud ut
                      anim non exercitation velit laboris fugiat cupidatat.
                      Commodo esse dolore fugiat sint velit ullamco magna
                      consequat voluptate minim amet aliquip ipsum aute laboris
                      nisi. Labore labore veniam irure irure ipsum pariatur
                      mollit magna in cupidatat dolore magna irure esse tempor
                      ad mollit. Dolore commodo nulla minim amet ipsum officia
                      consectetur amet ullamco voluptate nisi commodo ea sit eu.
                    </div>

<div
                      class="tab-pane fade"
                      id="edash-tab-theme-dropdown-pane-6"
                      role="tabpanel"
                    >
                      Sint sit mollit irure quis est nostrud cillum consequat
                      Lorem esse do quis dolor esse fugiat sunt do. Eu ex
                      commodo veniam Lorem aliquip laborum occaecat qui Lorem
                      esse mollit dolore anim cupidatat. eserunt officia id
                      Lorem nostrud aute id commodo elit eiusmod enim irure amet
                      eiusmod qui reprehenderit nostrud tempor. Fugiat ipsum
                      excepteur in aliqua non et quis aliquip ad irure in labore
                      cillum elit enim. Consequat aliquip incididunt ipsum et
                      minim laborum laborum laborum et cillum labore. Deserunt
                      adipisicing cillum id nulla minim nostrud labore eiusmod
                      et amet.
                    </div>

<div
                      class="tab-pane fade"
                      id="edash-tab-theme-dropdown-pane-7"
                      role="tabpanel"
                    >
                      Et et consectetur ipsum labore excepteur est proident
                      excepteur ad velit occaecat qui minim occaecat veniam.
                      Fugiat veniam incididunt anim aliqua enim pariatur veniam
                      sunt est aute sit dolor anim. Velit non irure adipisicing
                      aliqua ullamco irure incididunt irure non esse consectetur
                      nostrud minim non minim occaecat. Amet duis do nisi duis
                      veniam non est eiusmod tempor incididunt tempor dolor
                      ipsum in qui sit.
                    </div>
                  </div>
                </div>
              </div>
            </div>
            
            
            <div class="col-12">
              <div class="card">
                <div class="card-header">
                  <h4 class="card-title">richContent</h4>
                </div>
                <div class="card-body">
                  <ul
                    class="nav nav-rich-content-tabs nav-rich-content-primary mb-3 gap-3 align-items-center justify-content-center"
                    role="tablist"
                  >
                    <li>
                      <button
                        class="nav-link active"
                        id="edash-richContent-primary-home-tab"
                        data-bs-toggle="pill"
                        data-bs-target="#edash-richContent-primary-home"
                        type="button"
                        role="tab"
                        aria-selected="true"
                      >
                        <i class="fi fi-rr-home nav-rich-content-icon"></i>
                        <span class="nav-rich-content-title">Home</span>
                        <span class="nav-rich-content-text">Descriptions</span>
                      </button>
                    </li>
                    <li>
                      <button
                        class="nav-link"
                        id="edash-richContent-primary-profile-tab"
                        data-bs-toggle="pill"
                        data-bs-target="#edash-richContent-primary-profile"
                        type="button"
                        role="tab"
                        aria-selected="false"
                      >
                        <i class="fi fi-rr-user nav-rich-content-icon"></i>
                        <span class="nav-rich-content-title">Profile</span>
                        <span class="nav-rich-content-text">Descriptions</span>
                      </button>
                    </li>
                    <li>
                      <button
                        class="nav-link"
                        id="edash-richContent-primary-messages-tab"
                        data-bs-toggle="pill"
                        data-bs-target="#edash-richContent-primary-messages"
                        type="button"
                        role="tab"
                        aria-selected="false"
                      >
                        <i
                          class="fi fi-rr-comment-alt nav-rich-content-icon"
                        ></i>
                        <span class="nav-rich-content-title">Messages</span>
                        <span class="nav-rich-content-text">Descriptions</span>
                      </button>
                    </li>
                    <li>
                      <button
                        class="nav-link"
                        id="edash-richContent-primary-settings-tab"
                        data-bs-toggle="pill"
                        data-bs-target="#edash-richContent-primary-settings"
                        type="button"
                        role="tab"
                        aria-selected="false"
                      >
                        <i class="fi fi-rr-settings nav-rich-content-icon"></i>
                        <span class="nav-rich-content-title">Settings</span>
                        <span class="nav-rich-content-text">Descriptions</span>
                      </button>
                    </li>
                    <li>
                      <button
                        class="nav-link"
                        id="edash-richContent-primary-disabled-tab"
                        data-bs-toggle="pill"
                        data-bs-target="#edash-richContent-primary-disabled"
                        type="button"
                        role="tab"
                        aria-selected="false"
                        disabled
                      >
                        <i class="fi fi-rr-ban nav-rich-content-icon"></i>
                        <span class="nav-rich-content-title">Disabled</span>
                        <span class="nav-rich-content-text">Descriptions</span>
                      </button>
                    </li>
                  </ul>
                  <hr class="my-6" />
                  <ul
                    class="nav nav-rich-content-tabs nav-rich-content-success mb-3 gap-3 align-items-center justify-content-center"
                    role="tablist"
                  >
                    <li>
                      <button
                        class="nav-link"
                        id="edash-richContent-success-home-tab"
                        data-bs-toggle="pill"
                        data-bs-target="#edash-richContent-success-home"
                        type="button"
                        role="tab"
                        aria-selected="true"
                      >
                        <i class="fi fi-rr-home nav-rich-content-icon"></i>
                        <span class="nav-rich-content-title">Home</span>
                        <span class="nav-rich-content-text">Descriptions</span>
                      </button>
                    </li>
                    <li>
                      <button
                        class="nav-link active"
                        id="edash-richContent-success-profile-tab"
                        data-bs-toggle="pill"
                        data-bs-target="#edash-richContent-success-profile"
                        type="button"
                        role="tab"
                        aria-selected="false"
                      >
                        <i class="fi fi-rr-user nav-rich-content-icon"></i>
                        <span class="nav-rich-content-title">Profile</span>
                        <span class="nav-rich-content-text">Descriptions</span>
                      </button>
                    </li>
                    <li>
                      <button
                        class="nav-link"
                        id="edash-richContent-success-messages-tab"
                        data-bs-toggle="pill"
                        data-bs-target="#edash-richContent-success-messages"
                        type="button"
                        role="tab"
                        aria-selected="false"
                      >
                        <i
                          class="fi fi-rr-comment-alt nav-rich-content-icon"
                        ></i>
                        <span class="nav-rich-content-title">Messages</span>
                        <span class="nav-rich-content-text">Descriptions</span>
                      </button>
                    </li>
                    <li>
                      <button
                        class="nav-link"
                        id="edash-richContent-success-settings-tab"
                        data-bs-toggle="pill"
                        data-bs-target="#edash-richContent-success-settings"
                        type="button"
                        role="tab"
                        aria-selected="false"
                      >
                        <i class="fi fi-rr-settings nav-rich-content-icon"></i>
                        <span class="nav-rich-content-title">Settings</span>
                        <span class="nav-rich-content-text">Descriptions</span>
                      </button>
                    </li>
                    <li>
                      <button
                        class="nav-link"
                        id="edash-richContent-success-disabled-tab"
                        data-bs-toggle="pill"
                        data-bs-target="#edash-richContent-success-disabled"
                        type="button"
                        role="tab"
                        aria-selected="false"
                        disabled
                      >
                        <i class="fi fi-rr-ban nav-rich-content-icon"></i>
                        <span class="nav-rich-content-title">Disabled</span>
                        <span class="nav-rich-content-text">Descriptions</span>
                      </button>
                    </li>
                  </ul>
                  <hr class="my-6" />
                  <ul
                    class="nav nav-rich-content-tabs nav-rich-content-warning mb-3 gap-3 align-items-center justify-content-center"
                    role="tablist"
                  >
                    <li>
                      <button
                        class="nav-link"
                        id="edash-richContent-warning-home-tab"
                        data-bs-toggle="pill"
                        data-bs-target="#edash-richContent-warning-home"
                        type="button"
                        role="tab"
                        aria-selected="true"
                      >
                        <i class="fi fi-rr-home nav-rich-content-icon"></i>
                        <span class="nav-rich-content-title">Home</span>
                        <span class="nav-rich-content-text">Descriptions</span>
                      </button>
                    </li>
                    <li>
                      <button
                        class="nav-link"
                        id="edash-richContent-warning-profile-tab"
                        data-bs-toggle="pill"
                        data-bs-target="#edash-richContent-warning-profile"
                        type="button"
                        role="tab"
                        aria-selected="false"
                      >
                        <i class="fi fi-rr-user nav-rich-content-icon"></i>
                        <span class="nav-rich-content-title">Profile</span>
                        <span class="nav-rich-content-text">Descriptions</span>
                      </button>
                    </li>
                    <li>
                      <button
                        class="nav-link active"
                        id="edash-richContent-warning-messages-tab"
                        data-bs-toggle="pill"
                        data-bs-target="#edash-richContent-warning-messages"
                        type="button"
                        role="tab"
                        aria-selected="false"
                      >
                        <i
                          class="fi fi-rr-comment-alt nav-rich-content-icon"
                        ></i>
                        <span class="nav-rich-content-title">Messages</span>
                        <span class="nav-rich-content-text">Descriptions</span>
                      </button>
                    </li>
                    <li>
                      <button
                        class="nav-link"
                        id="edash-richContent-warning-settings-tab"
                        data-bs-toggle="pill"
                        data-bs-target="#edash-richContent-warning-settings"
                        type="button"
                        role="tab"
                        aria-selected="false"
                      >
                        <i class="fi fi-rr-settings nav-rich-content-icon"></i>
                        <span class="nav-rich-content-title">Settings</span>
                        <span class="nav-rich-content-text">Descriptions</span>
                      </button>
                    </li>
                    <li>
                      <button
                        class="nav-link"
                        id="edash-richContent-warning-disabled-tab"
                        data-bs-toggle="pill"
                        data-bs-target="#edash-richContent-warning-disabled"
                        type="button"
                        role="tab"
                        aria-selected="false"
                        disabled
                      >
                        <i class="fi fi-rr-ban nav-rich-content-icon"></i>
                        <span class="nav-rich-content-title">Disabled</span>
                        <span class="nav-rich-content-text">Descriptions</span>
                      </button>
                    </li>
                  </ul>
                  <hr class="my-6" />
                  <ul
                    class="nav nav-rich-content-tabs nav-rich-content-danger mb-3 gap-3 align-items-center justify-content-center"
                    role="tablist"
                  >
                    <li>
                      <button
                        class="nav-link"
                        id="edash-richContent-danger-home-tab"
                        data-bs-toggle="pill"
                        data-bs-target="#edash-richContent-danger-home"
                        type="button"
                        role="tab"
                        aria-selected="true"
                      >
                        <i class="fi fi-rr-home nav-rich-content-icon"></i>
                        <span class="nav-rich-content-title">Home</span>
                        <span class="nav-rich-content-text">Descriptions</span>
                      </button>
                    </li>
                    <li>
                      <button
                        class="nav-link active"
                        id="edash-richContent-danger-profile-tab"
                        data-bs-toggle="pill"
                        data-bs-target="#edash-richContent-danger-profile"
                        type="button"
                        role="tab"
                        aria-selected="false"
                      >
                        <i class="fi fi-rr-user nav-rich-content-icon"></i>
                        <span class="nav-rich-content-title">Profile</span>
                        <span class="nav-rich-content-text">Descriptions</span>
                      </button>
                    </li>
                    <li>
                      <button
                        class="nav-link"
                        id="edash-richContent-danger-messages-tab"
                        data-bs-toggle="pill"
                        data-bs-target="#edash-richContent-danger-messages"
                        type="button"
                        role="tab"
                        aria-selected="false"
                      >
                        <i
                          class="fi fi-rr-comment-alt nav-rich-content-icon"
                        ></i>
                        <span class="nav-rich-content-title">Messages</span>
                        <span class="nav-rich-content-text">Descriptions</span>
                      </button>
                    </li>
                    <li>
                      <button
                        class="nav-link"
                        id="edash-richContent-danger-settings-tab"
                        data-bs-toggle="pill"
                        data-bs-target="#edash-richContent-danger-settings"
                        type="button"
                        role="tab"
                        aria-selected="false"
                      >
                        <i class="fi fi-rr-settings nav-rich-content-icon"></i>
                        <span class="nav-rich-content-title">Settings</span>
                        <span class="nav-rich-content-text">Descriptions</span>
                      </button>
                    </li>
                    <li>
                      <button
                        class="nav-link"
                        id="edash-richContent-danger-disabled-tab"
                        data-bs-toggle="pill"
                        data-bs-target="#edash-richContent-danger-disabled"
                        type="button"
                        role="tab"
                        aria-selected="false"
                        disabled
                      >
                        <i class="fi fi-rr-ban nav-rich-content-icon"></i>
                        <span class="nav-rich-content-title">Disabled</span>
                        <span class="nav-rich-content-text">Descriptions</span>
                      </button>
                    </li>
                  </ul>
                  <hr class="my-6" />
                  <ul
                    class="nav nav-rich-content-tabs nav-rich-content-info mb-3 gap-3 align-items-center justify-content-center"
                    role="tablist"
                  >
                    <li>
                      <button
                        class="nav-link"
                        id="edash-richContent-info-home-tab"
                        data-bs-toggle="pill"
                        data-bs-target="#edash-richContent-info-home"
                        type="button"
                        role="tab"
                        aria-selected="true"
                      >
                        <i class="fi fi-rr-home nav-rich-content-icon"></i>
                        <span class="nav-rich-content-title">Home</span>
                        <span class="nav-rich-content-text">Descriptions</span>
                      </button>
                    </li>
                    <li>
                      <button
                        class="nav-link"
                        id="edash-richContent-info-profile-tab"
                        data-bs-toggle="pill"
                        data-bs-target="#edash-richContent-info-profile"
                        type="button"
                        role="tab"
                        aria-selected="false"
                      >
                        <i class="fi fi-rr-user nav-rich-content-icon"></i>
                        <span class="nav-rich-content-title">Profile</span>
                        <span class="nav-rich-content-text">Descriptions</span>
                      </button>
                    </li>
                    <li>
                      <button
                        class="nav-link"
                        id="edash-richContent-info-messages-tab"
                        data-bs-toggle="pill"
                        data-bs-target="#edash-richContent-info-messages"
                        type="button"
                        role="tab"
                        aria-selected="false"
                      >
                        <i
                          class="fi fi-rr-comment-alt nav-rich-content-icon"
                        ></i>
                        <span class="nav-rich-content-title">Messages</span>
                        <span class="nav-rich-content-text">Descriptions</span>
                      </button>
                    </li>
                    <li>
                      <button
                        class="nav-link active"
                        id="edash-richContent-info-settings-tab"
                        data-bs-toggle="pill"
                        data-bs-target="#edash-richContent-info-settings"
                        type="button"
                        role="tab"
                        aria-selected="false"
                      >
                        <i class="fi fi-rr-settings nav-rich-content-icon"></i>
                        <span class="nav-rich-content-title">Settings</span>
                        <span class="nav-rich-content-text">Descriptions</span>
                      </button>
                    </li>
                    <li>
                      <button
                        class="nav-link"
                        id="edash-richContent-info-disabled-tab"
                        data-bs-toggle="pill"
                        data-bs-target="#edash-richContent-info-disabled"
                        type="button"
                        role="tab"
                        aria-selected="false"
                        disabled
                      >
                        <i class="fi fi-rr-ban nav-rich-content-icon"></i>
                        <span class="nav-rich-content-title">Disabled</span>
                        <span class="nav-rich-content-text">Descriptions</span>
                      </button>
                    </li>
                  </ul>
                </div>
              </div>
            </div>
            
            
            <div class="col-12">
              <div class="card">
                <div class="card-header">
                  <h4 class="card-title">Options</h4>
                </div>
                <div class="table-responsive">
                  <table class="table mb-0">
                    <thead>
                      <tr>
                        <th>Reference</th>
                        <th>Details</th>
                      </tr>
                    </thead>
                    <tbody>
                      <tr>
                        <td>
                          <code>Base nav</code>
                        </td>
                        <td>
                          Navigation available in Bootstrap share general markup
                          and styles, from the base <code>.nav</code> class to
                          the active and disabled states. Swap modifier classes
                          to switch between each style.<br />The base
                          <code>.nav</code> component is built with flexbox and
                          provide a strong foundation for building all types of
                          navigation components. It includes some style
                          overrides (for working with lists), some link padding
                          for larger hit areas, and basic disabled styling.
                        </td>
                      </tr>
                      <tr>
                        <td>
                          <code>Tabs</code>
                        </td>
                        <td>
                          Takes the basic nav from above and adds the
                          <code>.nav-tabs</code> class to generate a tabbed
                          interface. Use them to create tabbable regions with
                          our
                          <a href="#javascript-behavior"
                            >tab JavaScript plugin</a
                          >.
                        </td>
                      </tr>
                      <tr>
                        <td>
                          <code>Pills</code>
                        </td>
                        <td>
                          Take that same HTML, but use
                          <code>.nav-pills</code> instead:
                        </td>
                      </tr>
                      <tr>
                        <td>
                          <code>Underline </code>
                        </td>
                        <td>
                          Take that same HTML, but use
                          <code>.nav-underline</code> instead:
                        </td>
                      </tr>
                      <tr>
                        <td>
                          <code>Fill and justify</code>
                        </td>
                        <td>
                          Force your <code>.nav</code>'s contents to extend the
                          full available width one of two modifier classes. To
                          proportionately fill all available space with your
                          <code>.nav-item</code>s, use <code>.nav-fill</code>.
                          Notice that all horizontal space is occupied, but not
                          every nav item has the same width.
                        </td>
                      </tr>
                      <tr>
                        <td>
                          <code>Tabs with dropdowns</code>
                        </td>
                        <td>
                          Add dropdown menus with a little extra HTML and the
                          <a href="/docs/5.3/components/dropdowns/#usage"
                            >dropdowns JavaScript plugin</a
                          >.
                        </td>
                      </tr>
                      <tr>
                        <td>
                          <code>JavaScript behavior</code>
                        </td>
                        <td>
                          Use the tab JavaScript plugin—include it individually
                          or through the compiled
                          <code>bootstrap.js</code> file—to extend our
                          navigational tabs and pills to create tabbable panes
                          of local content.
                        </td>
                      </tr>
                      <tr>
                        <td>
                          <code>Vertical</code>
                        </td>
                        <td>
                          And with vertical pills. Ideally, for vertical tabs,
                          you should also add
                          <code>aria-orientation="vertical"</code> to the tab
                          list container.
                        </td>
                      </tr>
                      <tr>
                        <td>
                          <code>withIcon</code>
                        </td>
                        <td>Use icon tabs</td>
                      </tr>
                      <tr>
                        <td>
                          <code>Line</code>
                        </td>
                        <td>
                          Use <code>line</code> tabs as adding class
                          <code>.nav-line-tabs</code>
                        </td>
                      </tr>
                      <tr>
                        <td>
                          <code>Themes</code>
                        </td>
                        <td>
                          Use <code>themes</code> tabs as adding class
                          <code>.nav-theme-tabs-{colors}</code>. Colors can be
                          use mapping color from <code>{$theme-colors}</code>.
                        </td>
                      </tr>
                      <tr>
                        <td>
                          <code>richContent</code>
                        </td>
                        <td>
                          Use <code>richContent</code> tabs as adding class
                          <code>.nav-rich-content-tabs</code> and then add class
                          <code>.nav-rich-content-{colors}</code>. Colors can be
                          use mapping color from <code>{$theme-colors}</code>.
                        </td>
                      </tr>
                      <tr>
                        <td>
                          <code>Documentations</code>
                        </td>
                        <td>
                          Please visit:
                          <a
                            href="https://getbootstrap.com/docs/5.3/components/navs-tabs/"
                            target="_blank"
                            rel="noopener noreferrer"
                            >https://getbootstrap.com/docs/5.3/components/navs-tabs/</a
                          >
                        </td>
                      </tr>
                    </tbody>
                  </table>
                </div>
              </div>
            </div>
            
          </div>
          
        </div>
        
        
        
        
        
        
        <footer
          class="edash-footer-container container-xxl d-flex align-items-center justify-content-between rounded-3 p-4 mx-auto mb-3 ht-64 bg-body-tertiary"
          id="edash-footer-container"
        >
          <div class="hstack">
            <span class="text-muted">
              <script>
                document.write(new Date().getFullYear());
              </script>
              ©
            </span>
            <span class="vr mx-2 bg-body-secondary"></span>
            <a href="mailto:wrapcoders@gmail.com">Expodash</a>
          </div>
          <div class="d-flex align-items-center gap-3">
            <a
              href="./../../docs/documentation.html"
              target="_blank"
              class="d-none d-sm-block"
              >Docs</a
            >
            <a href="wrapcoders@gmail.com" target="_blank" class="d-none d-sm-block"
              >About</a
            >
            <a href="wrapcoders@gmail.com" target="_blank">Support</a>
            <a
              href="https://codecanyon.net/item/expodash-bootstrap-5-admin-dashboard-template/52160996"
              target="_blank"
              >Purchase</a
            >
          </div>
        </footer>

</main>
      
      
      
      <div class="edash-menu-backdrop" id="edash-menu-hide"></div>
    </div>
    
    
    
    
    
    
    
    <script src="./../assets/js/vendors.min.js"></script>

<script src="./../assets/js/common-init.min.js"></script>

</body>
</html>