File size: 41.48Kb
<!-- meta tags and other links -->
<!DOCTYPE html>
<html lang="en" data-theme="light">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Wowdash - Bootstrap 5 Admin Dashboard HTML Template</title>
<link rel="icon" type="image/png" href="assets/images/favicon.png" sizes="16x16">
<!-- All library css -->
<link rel="stylesheet" href="assets/css/remixicon.css">
<link rel="stylesheet" href="assets/css/plugins.css">
<link rel="stylesheet" href="assets/css/prism.css">
<!-- main css -->
<link rel="stylesheet" href="assets/css/style.css">
</head>
<body>
<aside class="sidebar">
<div>
<a href="index.html" class="sidebar-logo">
<img src="assets/images/logo.png" alt="site logo" class="light-logo">
<img src="assets/images/logo-light.png" alt="site logo" class="dark-logo">
<img src="assets/images/logo-icon.png" alt="site logo" class="logo-icon">
</a>
</div>
<div class="sidebar-menu-area">
<ul class="sidebar-menu" id="sidebar-menu">
<li class="sidebar-menu-group-title">Getting Started</li>
<li>
<a href="index.html">
<iconify-icon icon="solar:document-add-outline" class="menu-icon"></iconify-icon>
<span>Introduction</span>
</a>
</li>
<li>
<a href="started.html">
<iconify-icon icon="hugeicons:start-up-02" class="menu-icon"></iconify-icon>
<span>Gettings Started</span>
</a>
</li>
<li class="sidebar-menu-group-title">Layout Structure</li>
<li>
<a href="html.html">
<iconify-icon icon="icomoon-free:html-five2" class="menu-icon"></iconify-icon>
<span>HTML Structure</span>
</a>
</li>
<li>
<a href="dark.html">
<iconify-icon icon="line-md:moon" class="menu-icon"></iconify-icon>
<span>Dark Layout</span>
</a>
</li>
<li>
<a href="rtl.html">
<iconify-icon icon="mdi:rtl" class="menu-icon"></iconify-icon>
<span>RTL Layout</span>
</a>
</li>
<li class="sidebar-menu-group-title">Folder Structure</li>
<li>
<a href="css.html">
<iconify-icon icon="bi:filetype-css" class="menu-icon"></iconify-icon>
<span>CSS</span>
</a>
</li>
<li>
<a href="scss.html">
<iconify-icon icon="bi:filetype-scss" class="menu-icon"></iconify-icon>
<span>SCSS</span>
</a>
</li>
<li>
<a href="js.html">
<iconify-icon icon="fluent:document-javascript-24-regular" class="menu-icon"></iconify-icon>
<span>JavaScript</span>
</a>
</li>
<li class="sidebar-menu-group-title">Components</li>
<li>
<a href="basic-components.html">
<iconify-icon icon="cil:list" class="menu-icon"></iconify-icon>
<span>Basic Components</span>
</a>
</li>
<li>
<a href="advance-components.html">
<iconify-icon icon="tdesign:tree-list" class="menu-icon"></iconify-icon>
<span>Advance Components</span>
</a>
</li>
<li>
<a href="forms.html">
<iconify-icon icon="fluent:form-48-regular" class="menu-icon"></iconify-icon>
<span>Forms</span>
</a>
</li>
<li>
<a href="tables.html">
<iconify-icon icon="mynaui:table" class="menu-icon"></iconify-icon>
<span>Tables</span>
</a>
</li>
</ul>
</div>
</aside>
<main class="dashboard-main">
<div class="navbar-header">
<div class="row align-items-center justify-content-between">
<div class="col-auto">
<h6 class="text-xl mb-0">Documentation</h6>
</div>
<div class="col-auto">
<div class="d-flex flex-wrap align-items-center gap-3">
<button type="button" data-theme-toggle
class="w-40-px h-40-px bg-neutral-200 rounded-circle d-flex justify-content-center align-items-center"></button>
</div>
</div>
</div>
</div>
<div class="dashboard-main-body">
<div class="row gy-4">
<div class="col-xl-8">
<div class="card">
<div class="card-header">
<h5 class="card-title mb-0">Basic Components</h5>
</div>
<div class="card-body" data-bs-spy="scroll" data-bs-target="#list-example" data-bs-smooth-scroll="true">
<h6 class="text-xl" id="button">Buttons</h6>
<div class="d-flex flex-wrap align-items-center gap-3 mb-24">
<button type="button" class="btn btn-primary-600 radius-8 px-20 py-11">Primary</button>
<button type="button" class="btn btn-lilac-600 radius-8 px-20 py-11">Secondary</button>
<button type="button" class="btn btn-success-600 radius-8 px-20 py-11">Success</button>
<button type="button" class="btn btn-info-600 radius-8 px-20 py-11">Info</button>
<button type="button" class="btn btn-warning-600 radius-8 px-20 py-11">Warning</button>
<button type="button" class="btn btn-danger-600 radius-8 px-20 py-11">Danger</button>
<button type="button" class="btn btn-neutral-900 text-base radius-8 px-20 py-11">Dark</button>
<button type="button" class="btn btn-link text-secondary-light text-decoration-none radius-8 px-20 py-11">Link</button>
<button type="button" class="btn btn-light-100 text-dark radius-8 px-20 py-11">Light</button>
</div>
<div class="code-area">
<button class="copy-code-btn btn-clipboard" data-clipboard-target="#buttonCode" title="Copy">
<i class="ri-file-copy-line"></i> Copy
</button>
<pre><code class="language-html" id="buttonCode">
<button type="button" class="btn btn-primary-600 radius-8 px-20 py-11">Primary</button>
<button type="button" class="btn btn-lilac-600 radius-8 px-20 py-11">Secondary</button>
<button type="button" class="btn btn-success-600 radius-8 px-20 py-11">Success</button>
<button type="button" class="btn btn-info-600 radius-8 px-20 py-11">Info</button>
<button type="button" class="btn btn-warning-600 radius-8 px-20 py-11">Warning</button>
<button type="button" class="btn btn-danger-600 radius-8 px-20 py-11">Danger</button>
<button type="button" class="btn btn-neutral-900 text-base radius-8 px-20 py-11">Dark</button>
<button type="button" class="btn btn-link text-secondary-light text-decoration-none radius-8 px-20 py-11">Link</button>
<button type="button" class="btn btn-light-100 text-dark radius-8 px-20 py-11">Light</button>
</code></pre>
</div>
<h6 class="text-xl mt-5" id="dropdown">Dropdown</h6>
<div class="d-flex flex-wrap align-items-center gap-3 mb-24">
<div class="dropdown">
<button class="btn btn-primary-600 not-active px-18 py-11 dropdown-toggle toggle-icon" type="button"
data-bs-toggle="dropdown" aria-expanded="false"> Default Action </button>
<ul class="dropdown-menu">
<li><a class="dropdown-item px-16 py-8 rounded text-secondary-light bg-hover-neutral-200 text-hover-neutral-900"
href="#">Action</a></li>
<li><a class="dropdown-item px-16 py-8 rounded text-secondary-light bg-hover-neutral-200 text-hover-neutral-900"
href="#">Primary action</a></li>
<li><a class="dropdown-item px-16 py-8 rounded text-secondary-light bg-hover-neutral-200 text-hover-neutral-900"
href="#">Something else</a></li>
</ul>
</div>
<div class="dropdown">
<button class="btn btn-outline-primary-600 not-active px-18 py-11 dropdown-toggle toggle-icon" type="button"
data-bs-toggle="dropdown" aria-expanded="false"> Outline Action </button>
<ul class="dropdown-menu">
<li><a class="dropdown-item px-16 py-8 rounded text-secondary-light bg-hover-neutral-200 text-hover-neutral-900"
href="#">Action</a></li>
<li><a class="dropdown-item px-16 py-8 rounded text-secondary-light bg-hover-neutral-200 text-hover-neutral-900"
href="#">Primary action</a></li>
<li><a class="dropdown-item px-16 py-8 rounded text-secondary-light bg-hover-neutral-200 text-hover-neutral-900"
href="#">Something else</a></li>
</ul>
</div>
<div class="dropdown">
<button
class="btn btn-primary-600 bg-primary-50 border-primary-50 text-primary-600 hover-text-primary not-active px-18 py-11 dropdown-toggle toggle-icon"
type="button" data-bs-toggle="dropdown" aria-expanded="false"> Focus Action </button>
<ul class="dropdown-menu">
<li><a class="dropdown-item px-16 py-8 rounded text-secondary-light bg-hover-neutral-200 text-hover-neutral-900"
href="#">Action</a></li>
<li><a class="dropdown-item px-16 py-8 rounded text-secondary-light bg-hover-neutral-200 text-hover-neutral-900"
href="#">Primary action</a></li>
<li><a class="dropdown-item px-16 py-8 rounded text-secondary-light bg-hover-neutral-200 text-hover-neutral-900"
href="#">Something else</a></li>
</ul>
</div>
<div class="dropdown">
<button class="btn text-primary-600 hover-text-primary px-18 py-11 dropdown-toggle toggle-icon" type="button"
data-bs-toggle="dropdown" aria-expanded="false"> Focus Action </button>
<ul class="dropdown-menu">
<li><a class="dropdown-item px-16 py-8 rounded text-secondary-light bg-hover-neutral-200 text-hover-neutral-900"
href="#">Action</a></li>
<li><a class="dropdown-item px-16 py-8 rounded text-secondary-light bg-hover-neutral-200 text-hover-neutral-900"
href="#">Primary action</a></li>
<li><a class="dropdown-item px-16 py-8 rounded text-secondary-light bg-hover-neutral-200 text-hover-neutral-900"
href="#">Something else</a></li>
</ul>
</div>
</div>
<div class="code-area">
<button class="copy-code-btn btn-clipboard" data-clipboard-target="#dropdownCode" title="Copy">
<i class="ri-file-copy-line"></i> Copy
</button>
<pre><code class="language-html" id="dropdownCode">
<div class="dropdown">
<button class="btn btn-primary-600 not-active px-18 py-11 dropdown-toggle toggle-icon" type="button"
data-bs-toggle="dropdown" aria-expanded="false"> Default Action </button>
<ul class="dropdown-menu">
<li><a class="dropdown-item px-16 py-8 rounded text-secondary-light bg-hover-neutral-200 text-hover-neutral-900"
href="#">Action</a></li>
<li><a class="dropdown-item px-16 py-8 rounded text-secondary-light bg-hover-neutral-200 text-hover-neutral-900"
href="#">Primary action</a></li>
<li><a class="dropdown-item px-16 py-8 rounded text-secondary-light bg-hover-neutral-200 text-hover-neutral-900"
href="#">Something else</a></li>
</ul>
</div>
<div class="dropdown">
<button class="btn btn-outline-primary-600 not-active px-18 py-11 dropdown-toggle toggle-icon" type="button"
data-bs-toggle="dropdown" aria-expanded="false"> Outline Action </button>
<ul class="dropdown-menu">
<li><a class="dropdown-item px-16 py-8 rounded text-secondary-light bg-hover-neutral-200 text-hover-neutral-900"
href="#">Action</a></li>
<li><a class="dropdown-item px-16 py-8 rounded text-secondary-light bg-hover-neutral-200 text-hover-neutral-900"
href="#">Primary action</a></li>
<li><a class="dropdown-item px-16 py-8 rounded text-secondary-light bg-hover-neutral-200 text-hover-neutral-900"
href="#">Something else</a></li>
</ul>
</div>
<div class="dropdown">
<button
class="btn btn-primary-600 bg-primary-50 border-primary-50 text-primary-600 hover-text-primary not-active px-18 py-11 dropdown-toggle toggle-icon"
type="button" data-bs-toggle="dropdown" aria-expanded="false"> Focus Action </button>
<ul class="dropdown-menu">
<li><a class="dropdown-item px-16 py-8 rounded text-secondary-light bg-hover-neutral-200 text-hover-neutral-900"
href="#">Action</a></li>
<li><a class="dropdown-item px-16 py-8 rounded text-secondary-light bg-hover-neutral-200 text-hover-neutral-900"
href="#">Primary action</a></li>
<li><a class="dropdown-item px-16 py-8 rounded text-secondary-light bg-hover-neutral-200 text-hover-neutral-900"
href="#">Something else</a></li>
</ul>
</div>
<div class="dropdown">
<button class="btn text-primary-600 hover-text-primary px-18 py-11 dropdown-toggle toggle-icon" type="button"
data-bs-toggle="dropdown" aria-expanded="false"> Focus Action </button>
<ul class="dropdown-menu">
<li><a class="dropdown-item px-16 py-8 rounded text-secondary-light bg-hover-neutral-200 text-hover-neutral-900"
href="#">Action</a></li>
<li><a class="dropdown-item px-16 py-8 rounded text-secondary-light bg-hover-neutral-200 text-hover-neutral-900"
href="#">Primary action</a></li>
<li><a class="dropdown-item px-16 py-8 rounded text-secondary-light bg-hover-neutral-200 text-hover-neutral-900"
href="#">Something else</a></li>
</ul>
</div>
</code></pre>
</div>
<h6 class="text-xl mt-5" id="alert">Alerts</h6>
<div class="mb-24">
<div class="alert alert-primary bg-primary-50 text-primary-600 border-primary-50 px-24 py-11 mb-0 fw-semibold text-lg radius-8 d-flex align-items-center justify-content-between mb-3" role="alert">
This is a Primary alert
<button class="remove-button text-primary-600 text-xxl line-height-1"> <iconify-icon icon="iconamoon:sign-times-light" class="icon"></iconify-icon></button>
</div>
<div class="alert alert-lilac bg-lilac-50 text-lilac-600 border-lilac-50 px-24 py-11 mb-0 fw-semibold text-lg radius-8 d-flex align-items-center justify-content-between mb-3" role="alert">
This is a Secondary alert
<button class="remove-button text-lilac-600 text-xxl line-height-1"> <iconify-icon icon="iconamoon:sign-times-light" class="icon"></iconify-icon></button>
</div>
<div class="alert alert-warning bg-warning-100 text-warning-600 border-warning-100 px-24 py-11 mb-0 fw-semibold text-lg radius-8 d-flex align-items-center justify-content-between mb-3" role="alert">
This is a Warning alert
<button class="remove-button text-warning-600 text-xxl line-height-1"> <iconify-icon icon="iconamoon:sign-times-light" class="icon"></iconify-icon></button>
</div>
<div class="alert alert-info bg-info-100 text-info-600 border-info-100 px-24 py-11 mb-0 fw-semibold text-lg radius-8 d-flex align-items-center justify-content-between mb-3" role="alert">
This is a Info alert
<button class="remove-button text-info-600 text-xxl line-height-1"> <iconify-icon icon="iconamoon:sign-times-light" class="icon"></iconify-icon></button>
</div>
<div
class="alert alert-danger bg-danger-100 text-danger-600 border-danger-100 px-24 py-11 mb-0 fw-semibold text-lg radius-8 d-flex align-items-center justify-content-between" role="alert">
This is a Danger alert
<button class="remove-button text-danger-600 text-xxl line-height-1"> <iconify-icon icon="iconamoon:sign-times-light" class="icon"></iconify-icon></button>
</div>
</div>
<div class="code-area">
<button class="copy-code-btn btn-clipboard" data-clipboard-target="#alertCode" title="Copy">
<i class="ri-file-copy-line"></i> Copy
</button>
<pre><code class="language-html" id="alertCode">
<div class="alert alert-primary bg-primary-50 text-primary-600 border-primary-50 px-24 py-11 mb-0 fw-semibold text-lg radius-8 d-flex align-items-center justify-content-between" role="alert">
This is a Primary alert
<button class="remove-button text-primary-600 text-xxl line-height-1"> <iconify-icon icon="iconamoon:sign-times-light" class="icon"></iconify-icon></button>
</div>
<div class="alert alert-lilac bg-lilac-50 text-lilac-600 border-lilac-50 px-24 py-11 mb-0 fw-semibold text-lg radius-8 d-flex align-items-center justify-content-between" role="alert">
This is a Secondary alert
<button class="remove-button text-lilac-600 text-xxl line-height-1"> <iconify-icon icon="iconamoon:sign-times-light" class="icon"></iconify-icon></button>
</div>
<div class="alert alert-warning bg-warning-100 text-warning-600 border-warning-100 px-24 py-11 mb-0 fw-semibold text-lg radius-8 d-flex align-items-center justify-content-between" role="alert">
This is a Warning alert
<button class="remove-button text-warning-600 text-xxl line-height-1"> <iconify-icon icon="iconamoon:sign-times-light" class="icon"></iconify-icon></button>
</div>
<div class="alert alert-info bg-info-100 text-info-600 border-info-100 px-24 py-11 mb-0 fw-semibold text-lg radius-8 d-flex align-items-center justify-content-between" role="alert">
This is a Info alert
<button class="remove-button text-info-600 text-xxl line-height-1"> <iconify-icon icon="iconamoon:sign-times-light" class="icon"></iconify-icon></button>
</div>
<div
class="alert alert-danger bg-danger-100 text-danger-600 border-danger-100 px-24 py-11 mb-0 fw-semibold text-lg radius-8 d-flex align-items-center justify-content-between" role="alert">
This is a Danger alert
<button class="remove-button text-danger-600 text-xxl line-height-1"> <iconify-icon icon="iconamoon:sign-times-light" class="icon"></iconify-icon></button>
</div>
</code></pre>
</div>
<h6 class="text-xl mt-5" id="badge">Badges</h6>
<div class="d-flex flex-wrap align-items-center gap-3 mb-24">
<span class="badge text-sm fw-semibold bg-primary-600 px-20 py-9 radius-4 text-white">Primary</span>
<span class="badge text-sm fw-semibold bg-lilac-600 px-20 py-9 radius-4 text-white">Secondary</span>
<span class="badge text-sm fw-semibold bg-success-600 px-20 py-9 radius-4 text-white">Success</span>
<span class="badge text-sm fw-semibold bg-info-600 px-20 py-9 radius-4 text-white">Info</span>
<span class="badge text-sm fw-semibold bg-warning-600 px-20 py-9 radius-4 text-white">Warning</span>
<span class="badge text-sm fw-semibold bg-danger-600 px-20 py-9 radius-4 text-white">Danger</span>
<span class="badge text-sm fw-semibold bg-neutral-800 px-20 py-9 radius-4 text-base">Dark</span>
<span class="badge text-sm fw-semibold bg-transparent px-20 py-9 radius-4 text-primary-600">Link</span>
<span class="badge text-sm fw-semibold bg-light-600 px-20 py-9 radius-4 text-dark">Light</span>
</div>
<div class="code-area">
<button class="copy-code-btn btn-clipboard" data-clipboard-target="#scrollablecode" title="Copy">
<i class="ri-file-copy-line"></i> Copy
</button>
<pre><code class="language-html" id="scrollablecode">
<span class="badge text-sm fw-semibold bg-primary-600 px-20 py-9 radius-4 text-white">Primary</span>
<span class="badge text-sm fw-semibold bg-lilac-600 px-20 py-9 radius-4 text-white">Secondary</span>
<span class="badge text-sm fw-semibold bg-success-600 px-20 py-9 radius-4 text-white">Success</span>
<span class="badge text-sm fw-semibold bg-info-600 px-20 py-9 radius-4 text-white">Info</span>
<span class="badge text-sm fw-semibold bg-warning-600 px-20 py-9 radius-4 text-white">Warning</span>
<span class="badge text-sm fw-semibold bg-danger-600 px-20 py-9 radius-4 text-white">Danger</span>
<span class="badge text-sm fw-semibold bg-neutral-800 px-20 py-9 radius-4 text-base">Dark</span>
<span class="badge text-sm fw-semibold bg-transparent px-20 py-9 radius-4 text-primary-600">Link</span>
<span class="badge text-sm fw-semibold bg-light-600 px-20 py-9 radius-4 text-dark">Light</span>
</code></pre>
</div>
<h6 class="text-xl mt-5" id="tooltip">Tooltip & Popover</h6>
<div class="d-flex flex-wrap align-items-center gap-3 mb-24">
<button type="button" class="btn btn-primary-50 text-primary-600 radius-8 px-32 py-11"
data-bs-toggle="tooltip" data-bs-placement="top"
data-bs-custom-class="tooltip-primary"
data-bs-title="Primary Tooltip">
Primary
</button>
<button type="button" class="btn btn-lilac-100 text-lilac-600 radius-8 px-32 py-11"
data-bs-toggle="tooltip" data-bs-placement="top"
data-bs-custom-class="tooltip-purple"
data-bs-title="Secondary Tooltip">
Secondary
</button>
<button type="button" class="btn btn-success-100 text-success-600 radius-8 px-32 py-11"
data-bs-toggle="tooltip" data-bs-placement="top"
data-bs-custom-class="tooltip-success"
data-bs-title="Success Tooltip">
Success
</button>
<button type="button" class="btn btn-info-100 text-info-600 radius-8 px-32 py-11"
data-bs-toggle="tooltip" data-bs-placement="top"
data-bs-custom-class="tooltip-info"
data-bs-title="Info Tooltip">
Info
</button>
<button type="button" class="btn btn-warning-100 text-warning-600 radius-8 px-32 py-11"
data-bs-toggle="tooltip" data-bs-placement="top"
data-bs-custom-class="tooltip-warning"
data-bs-title="Warning Tooltip">
Warning
</button>
<button type="button" class="btn btn-danger-100 text-danger-600 radius-8 px-32 py-11"
data-bs-toggle="tooltip" data-bs-placement="top"
data-bs-custom-class="tooltip-danger"
data-bs-title="Danger Tooltip">
Danger
</button>
<button type="button" class="btn btn-neutral-100 text-neutral-600 radius-8 px-32 py-11"
data-bs-toggle="tooltip" data-bs-placement="top"
data-bs-custom-class="tooltip-dark"
data-bs-title="Dark Tooltip">
Dark
</button>
</div>
<div class="code-area">
<button class="copy-code-btn btn-clipboard" data-clipboard-target="#tooltipCode" title="Copy">
<i class="ri-file-copy-line"></i> Copy
</button>
<pre><code class="language-html" id="tooltipCode">
<button type="button" class="btn btn-primary-50 text-primary-600 radius-8 px-32 py-11"
data-bs-toggle="tooltip" data-bs-placement="top"
data-bs-custom-class="tooltip-primary"
data-bs-title="Primary Tooltip">
Primary
</button>
<button type="button" class="btn btn-lilac-100 text-lilac-600 radius-8 px-32 py-11"
data-bs-toggle="tooltip" data-bs-placement="top"
data-bs-custom-class="tooltip-purple"
data-bs-title="Secondary Tooltip">
Secondary
</button>
<button type="button" class="btn btn-success-100 text-success-600 radius-8 px-32 py-11"
data-bs-toggle="tooltip" data-bs-placement="top"
data-bs-custom-class="tooltip-success"
data-bs-title="Success Tooltip">
Success
</button>
<button type="button" class="btn btn-info-100 text-info-600 radius-8 px-32 py-11"
data-bs-toggle="tooltip" data-bs-placement="top"
data-bs-custom-class="tooltip-info"
data-bs-title="Info Tooltip">
Info
</button>
<button type="button" class="btn btn-warning-100 text-warning-600 radius-8 px-32 py-11"
data-bs-toggle="tooltip" data-bs-placement="top"
data-bs-custom-class="tooltip-warning"
data-bs-title="Warning Tooltip">
Warning
</button>
<button type="button" class="btn btn-danger-100 text-danger-600 radius-8 px-32 py-11"
data-bs-toggle="tooltip" data-bs-placement="top"
data-bs-custom-class="tooltip-danger"
data-bs-title="Danger Tooltip">
Danger
</button>
<button type="button" class="btn btn-neutral-100 text-neutral-600 radius-8 px-32 py-11"
data-bs-toggle="tooltip" data-bs-placement="top"
data-bs-custom-class="tooltip-dark"
data-bs-title="Dark Tooltip">
Dark
</button>
</code></pre>
</div>
<p>JavaScript</p>
<div class="code-area">
<button class="copy-code-btn btn-clipboard" data-clipboard-target="#jsCode" title="Copy">
<i class="ri-file-copy-line"></i> Copy
</button>
<pre><code class="language-javascript" id="jsCode">
// Boxed Tooltip
$(document).ready(function() {
$('.tooltip-button').each(function () {
var tooltipButton = $(this);
var tooltipContent = $(this).siblings('.my-tooltip').html();
// Initialize the tooltip
tooltipButton.tooltip({
title: tooltipContent,
trigger: 'hover',
html: true
});
// Optionally, reinitialize the tooltip if the content might change dynamically
tooltipButton.on('mouseenter', function() {
tooltipButton.tooltip('dispose').tooltip({
title: tooltipContent,
trigger: 'hover',
html: true
}).tooltip('show');
});
});
});
</code></pre>
</div>
<h6 class="text-xl mt-5" id="tab">Tabs</h6>
<div class="mb-24">
<ul class="nav bordered-tab border border-top-0 border-start-0 border-end-0 d-inline-flex nav-pills mb-16"
id="pills-tab" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link px-16 py-10 active" id="pills-home-tab" data-bs-toggle="pill" data-bs-target="#pills-home"
type="button" role="tab" aria-controls="pills-home" aria-selected="true">Home</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link px-16 py-10" id="pills-details-tab" data-bs-toggle="pill" data-bs-target="#pills-details"
type="button" role="tab" aria-controls="pills-details" aria-selected="false">Details</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link px-16 py-10" id="pills-profile-tab" data-bs-toggle="pill" data-bs-target="#pills-profile"
type="button" role="tab" aria-controls="pills-profile" aria-selected="false">Profile</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link px-16 py-10" id="pills-settings-tab" data-bs-toggle="pill" data-bs-target="#pills-settings"
type="button" role="tab" aria-controls="pills-settings" aria-selected="false">Settings</button>
</li>
</ul>
<div class="tab-content" id="pills-tabContent">
<div class="tab-pane fade show active" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab" tabindex="0">
<div>
<h6 class="text-lg mb-8">Title</h6>
<p class="text-secondary-light mb-16">Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a
galley of type and scrambled it to make a type specimen book. It has survived not </p>
<p class="text-secondary-light mb-0">It was popularised in the 1960s with the release of Letraset sheets
containing Lorem Ipsum passages, and more recently with desktop</p>
</div>
</div>
<div class="tab-pane fade" id="pills-details" role="tabpanel" aria-labelledby="pills-details-tab" tabindex="0">
<div>
<h6 class="text-lg mb-8">Title</h6>
<p class="text-secondary-light mb-16">Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a
galley of type and scrambled it to make a type specimen book. It has survived not </p>
<p class="text-secondary-light mb-0">It was popularised in the 1960s with the release of Letraset sheets
containing Lorem Ipsum passages, and more recently with desktop</p>
</div>
</div>
<div class="tab-pane fade" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab" tabindex="0">
<div>
<h6 class="text-lg mb-8">Title</h6>
<p class="text-secondary-light mb-16">Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a
galley of type and scrambled it to make a type specimen book. It has survived not </p>
<p class="text-secondary-light mb-0">It was popularised in the 1960s with the release of Letraset sheets
containing Lorem Ipsum passages, and more recently with desktop</p>
</div>
</div>
<div class="tab-pane fade" id="pills-settings" role="tabpanel" aria-labelledby="pills-settings-tab" tabindex="0">
<div>
<h6 class="text-lg mb-8">Title</h6>
<p class="text-secondary-light mb-16">Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a
galley of type and scrambled it to make a type specimen book. It has survived not </p>
<p class="text-secondary-light mb-0">It was popularised in the 1960s with the release of Letraset sheets
containing Lorem Ipsum passages, and more recently with desktop</p>
</div>
</div>
</div>
</div>
<div class="code-area">
<button class="copy-code-btn btn-clipboard" data-clipboard-target="#tabCode" title="Copy">
<i class="ri-file-copy-line"></i> Copy
</button>
<pre><code class="language-html" id="tabCode">
<ul class="nav bordered-tab border border-top-0 border-start-0 border-end-0 d-inline-flex nav-pills mb-16"
id="pills-tab" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link px-16 py-10 active" id="pills-home-tab" data-bs-toggle="pill" data-bs-target="#pills-home"
type="button" role="tab" aria-controls="pills-home" aria-selected="true">Home</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link px-16 py-10" id="pills-details-tab" data-bs-toggle="pill" data-bs-target="#pills-details"
type="button" role="tab" aria-controls="pills-details" aria-selected="false">Details</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link px-16 py-10" id="pills-profile-tab" data-bs-toggle="pill" data-bs-target="#pills-profile"
type="button" role="tab" aria-controls="pills-profile" aria-selected="false">Profile</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link px-16 py-10" id="pills-settings-tab" data-bs-toggle="pill" data-bs-target="#pills-settings"
type="button" role="tab" aria-controls="pills-settings" aria-selected="false">Settings</button>
</li>
</ul>
<div class="tab-content" id="pills-tabContent">
<div class="tab-pane fade show active" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab" tabindex="0">
<div>
<h6 class="text-lg mb-8">Title</h6>
<p class="text-secondary-light mb-16">Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a
galley of type and scrambled it to make a type specimen book. It has survived not </p>
<p class="text-secondary-light mb-0">It was popularised in the 1960s with the release of Letraset sheets
containing Lorem Ipsum passages, and more recently with desktop</p>
</div>
</div>
<div class="tab-pane fade" id="pills-details" role="tabpanel" aria-labelledby="pills-details-tab" tabindex="0">
<div>
<h6 class="text-lg mb-8">Title</h6>
<p class="text-secondary-light mb-16">Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a
galley of type and scrambled it to make a type specimen book. It has survived not </p>
<p class="text-secondary-light mb-0">It was popularised in the 1960s with the release of Letraset sheets
containing Lorem Ipsum passages, and more recently with desktop</p>
</div>
</div>
<div class="tab-pane fade" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab" tabindex="0">
<div>
<h6 class="text-lg mb-8">Title</h6>
<p class="text-secondary-light mb-16">Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a
galley of type and scrambled it to make a type specimen book. It has survived not </p>
<p class="text-secondary-light mb-0">It was popularised in the 1960s with the release of Letraset sheets
containing Lorem Ipsum passages, and more recently with desktop</p>
</div>
</div>
<div class="tab-pane fade" id="pills-settings" role="tabpanel" aria-labelledby="pills-settings-tab" tabindex="0">
<div>
<h6 class="text-lg mb-8">Title</h6>
<p class="text-secondary-light mb-16">Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a
galley of type and scrambled it to make a type specimen book. It has survived not </p>
<p class="text-secondary-light mb-0">It was popularised in the 1960s with the release of Letraset sheets
containing Lorem Ipsum passages, and more recently with desktop</p>
</div>
</div>
</div>
</code></pre>
</div>
</div>
</div>
</div>
<div class="col-xl-4">
<div id="list-example" class="list-group code-sidebar-menu">
<a href="#button">Button</a>
<a href="#dropdown">Dropdown</a>
<a href="#alert">Alerts</a>
<a href="#badge">Badges</a>
<a href="#tooltip">Tooltip & Popover</a>
<a href="#tab">Tabs</a>
</div>
</div>
</div>
</div>
</main>
<!-- All library -->
<script src="assets/js/plugins.js"></script>
<script src="assets/js/prism.js"></script>
<script src="assets/js/clipboard.min.js"></script>
<!-- main js -->
<script src="assets/js/app.js"></script>
<script>
$(document).ready(function () {
var clipboard = new ClipboardJS('.btn-clipboard');
clipboard.on('success', function (e) {
e.querySelector();
e.clearSelection();
});
clipboard.on('error', function (e) {
});
});
</script>
<script>
const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]');
const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl));
// Boxed Tooltip
$(document).ready(function() {
$('.tooltip-button').each(function () {
var tooltipButton = $(this);
var tooltipContent = $(this).siblings('.my-tooltip').html();
// Initialize the tooltip
tooltipButton.tooltip({
title: tooltipContent,
trigger: 'hover',
html: true
});
// Optionally, reinitialize the tooltip if the content might change dynamically
tooltipButton.on('mouseenter', function() {
tooltipButton.tooltip('dispose').tooltip({
title: tooltipContent,
trigger: 'hover',
html: true
}).tooltip('show');
});
});
});
</script>
</body>
</html>