<!-- 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">
<!-- remix icon font css -->
<link rel="stylesheet" href="assets/css/remixicon.css">
<!-- BootStrap css -->
<link rel="stylesheet" href="assets/css/lib/bootstrap.min.css">
<!-- Apex Chart css -->
<link rel="stylesheet" href="assets/css/lib/apexcharts.css">
<!-- Data Table css -->
<link rel="stylesheet" href="assets/css/lib/dataTables.min.css">
<!-- Text Editor css -->
<link rel="stylesheet" href="assets/css/lib/editor-katex.min.css">
<link rel="stylesheet" href="assets/css/lib/editor.atom-one-dark.min.css">
<link rel="stylesheet" href="assets/css/lib/editor.quill.snow.css">
<!-- Date picker css -->
<link rel="stylesheet" href="assets/css/lib/flatpickr.min.css">
<!-- Calendar css -->
<link rel="stylesheet" href="assets/css/lib/full-calendar.css">
<!-- Vector Map css -->
<link rel="stylesheet" href="assets/css/lib/jquery-jvectormap-2.0.5.css">
<!-- Popup css -->
<link rel="stylesheet" href="assets/css/lib/magnific-popup.css">
<!-- Slick Slider css -->
<link rel="stylesheet" href="assets/css/lib/slick.css">
<!-- main css -->
<link rel="stylesheet" href="assets/css/style.css">
</head>
<body>
<aside class="sidebar">
<button type="button" class="sidebar-close-btn">
<iconify-icon icon="radix-icons:cross-2"></iconify-icon>
</button>
<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="dropdown">
<a href="javascript:void(0)">
<iconify-icon icon="solar:home-smile-angle-outline" class="menu-icon"></iconify-icon>
<span>Dashboard</span>
</a>
<ul class="sidebar-submenu">
<li>
<a href="index.html"><i class="ri-circle-fill circle-icon text-primary-600 w-auto"></i> AI</a>
</li>
<li>
<a href="index-2.html"><i class="ri-circle-fill circle-icon text-warning-main w-auto"></i> CRM</a>
</li>
<li>
<a href="index-3.html"><i class="ri-circle-fill circle-icon text-info-main w-auto"></i> eCommerce</a>
</li>
<li>
<a href="index-4.html"><i class="ri-circle-fill circle-icon text-danger-main w-auto"></i> Cryptocurrency</a>
</li>
<li>
<a href="index-5.html"><i class="ri-circle-fill circle-icon text-success-main w-auto"></i> Investment</a>
</li>
</ul>
</li>
<li class="sidebar-menu-group-title">Application</li>
<li>
<a href="email.html">
<iconify-icon icon="mage:email" class="menu-icon"></iconify-icon>
<span>Email</span>
</a>
</li>
<li>
<a href="chat-message.html">
<iconify-icon icon="bi:chat-dots" class="menu-icon"></iconify-icon>
<span>Chat</span>
</a>
</li>
<li>
<a href="calendar-main.html">
<iconify-icon icon="solar:calendar-outline" class="menu-icon"></iconify-icon>
<span>Calendar</span>
</a>
</li>
<li class="dropdown">
<a href="javascript:void(0)">
<iconify-icon icon="hugeicons:invoice-03" class="menu-icon"></iconify-icon>
<span>Invoice</span>
</a>
<ul class="sidebar-submenu">
<li>
<a href="invoice-list.html"><i class="ri-circle-fill circle-icon text-primary-600 w-auto"></i> List</a>
</li>
<li>
<a href="invoice-preview.html"><i class="ri-circle-fill circle-icon text-warning-main w-auto"></i> Preview</a>
</li>
<li>
<a href="invoice-add.html"><i class="ri-circle-fill circle-icon text-info-main w-auto"></i> Add new</a>
</li>
<li>
<a href="invoice-edit.html"><i class="ri-circle-fill circle-icon text-danger-main w-auto"></i> Edit</a>
</li>
</ul>
</li>
<li class="sidebar-menu-group-title">Application</li>
<li class="dropdown">
<a href="javascript:void(0)">
<iconify-icon icon="solar:document-text-outline" class="menu-icon"></iconify-icon>
<span>Components</span>
</a>
<ul class="sidebar-submenu">
<li>
<a href="typography.html"><i class="ri-circle-fill circle-icon text-primary-600 w-auto"></i> Typography</a>
</li>
<li>
<a href="colors.html"><i class="ri-circle-fill circle-icon text-warning-main w-auto"></i> Colors</a>
</li>
<li>
<a href="button.html"><i class="ri-circle-fill circle-icon text-success-main w-auto"></i> Button</a>
</li>
<li>
<a href="dropdown.html"><i class="ri-circle-fill circle-icon text-lilac-600 w-auto"></i> Dropdown</a>
</li>
<li>
<a href="alert.html"><i class="ri-circle-fill circle-icon text-warning-main w-auto"></i> Alerts</a>
</li>
<li>
<a href="card.html"><i class="ri-circle-fill circle-icon text-danger-main w-auto"></i> Card</a>
</li>
<li>
<a href="carousel.html"><i class="ri-circle-fill circle-icon text-info-main w-auto"></i> Carousel</a>
</li>
<li>
<a href="avatar.html"><i class="ri-circle-fill circle-icon text-success-main w-auto"></i> Avatars</a>
</li>
<li>
<a href="progress.html"><i class="ri-circle-fill circle-icon text-primary-600 w-auto"></i> Progress bar</a>
</li>
<li>
<a href="tabs.html"><i class="ri-circle-fill circle-icon text-warning-main w-auto"></i> Tab & Accordion</a>
</li>
<li>
<a href="pagination.html"><i class="ri-circle-fill circle-icon text-danger-main w-auto"></i> Pagination</a>
</li>
<li>
<a href="badges.html"><i class="ri-circle-fill circle-icon text-info-main w-auto"></i> Badges</a>
</li>
<li>
<a href="tooltip.html"><i class="ri-circle-fill circle-icon text-lilac-600 w-auto"></i> Tooltip & Popover</a>
</li>
<li>
<a href="videos.html"><i class="ri-circle-fill circle-icon text-cyan w-auto"></i> Videos</a>
</li>
<li>
<a href="star-rating.html"><i class="ri-circle-fill circle-icon text-indigo w-auto"></i> Star Ratings</a>
</li>
<li>
<a href="tags.html"><i class="ri-circle-fill circle-icon text-purple w-auto"></i> Tags</a>
</li>
<li>
<a href="list.html"><i class="ri-circle-fill circle-icon text-red w-auto"></i> List</a>
</li>
<li>
<a href="calendar.html"><i class="ri-circle-fill circle-icon text-yellow w-auto"></i> Calendar</a>
</li>
<li>
<a href="radio.html"><i class="ri-circle-fill circle-icon text-orange w-auto"></i> Radio</a>
</li>
<li>
<a href="switch.html"><i class="ri-circle-fill circle-icon text-pink w-auto"></i> Switch</a>
</li>
<li>
<a href="image-upload.html"><i class="ri-circle-fill circle-icon text-primary-600 w-auto"></i> Upload</a>
</li>
</ul>
</li>
<li class="dropdown">
<a href="javascript:void(0)">
<iconify-icon icon="heroicons:document" class="menu-icon"></iconify-icon>
<span>Forms</span>
</a>
<ul class="sidebar-submenu">
<li>
<a href="form.html"><i class="ri-circle-fill circle-icon text-primary-600 w-auto"></i> Input Forms</a>
</li>
<li>
<a href="form-layout.html"><i class="ri-circle-fill circle-icon text-warning-main w-auto"></i> Input Layout</a>
</li>
<li>
<a href="form-validation.html"><i class="ri-circle-fill circle-icon text-success-main w-auto"></i> Form Validation</a>
</li>
</ul>
</li>
<li class="dropdown">
<a href="javascript:void(0)">
<iconify-icon icon="mingcute:storage-line" class="menu-icon"></iconify-icon>
<span>Table</span>
</a>
<ul class="sidebar-submenu">
<li>
<a href="table-basic.html"><i class="ri-circle-fill circle-icon text-primary-600 w-auto"></i> Basic Table</a>
</li>
<li>
<a href="table-data.html"><i class="ri-circle-fill circle-icon text-warning-main w-auto"></i> Data Table</a>
</li>
</ul>
</li>
<li class="dropdown">
<a href="javascript:void(0)">
<iconify-icon icon="solar:pie-chart-outline" class="menu-icon"></iconify-icon>
<span>Chart</span>
</a>
<ul class="sidebar-submenu">
<li>
<a href="line-chart.html"><i class="ri-circle-fill circle-icon text-danger-main w-auto"></i> Line Chart</a>
</li>
<li>
<a href="column-chart.html"><i class="ri-circle-fill circle-icon text-warning-main w-auto"></i> Column Chart</a>
</li>
<li>
<a href="pie-chart.html"><i class="ri-circle-fill circle-icon text-success-main w-auto"></i> Pie Chart</a>
</li>
</ul>
</li>
<li>
<a href="widgets.html">
<iconify-icon icon="fe:vector" class="menu-icon"></iconify-icon>
<span>Widgets</span>
</a>
</li>
<li class="dropdown">
<a href="javascript:void(0)">
<iconify-icon icon="flowbite:users-group-outline" class="menu-icon"></iconify-icon>
<span>Users</span>
</a>
<ul class="sidebar-submenu">
<li>
<a href="users-list.html"><i class="ri-circle-fill circle-icon text-primary-600 w-auto"></i> Users List</a>
</li>
<li>
<a href="users-grid.html"><i class="ri-circle-fill circle-icon text-warning-main w-auto"></i> Users Grid</a>
</li>
<li>
<a href="add-user.html"><i class="ri-circle-fill circle-icon text-info-main w-auto"></i> Add User</a>
</li>
<li>
<a href="view-profile.html"><i class="ri-circle-fill circle-icon text-danger-main w-auto"></i> View Profile</a>
</li>
</ul>
</li>
<li class="sidebar-menu-group-title">Application</li>
<li class="dropdown">
<a href="javascript:void(0)">
<iconify-icon icon="simple-line-icons:vector" class="menu-icon"></iconify-icon>
<span>Authentication</span>
</a>
<ul class="sidebar-submenu">
<li>
<a href="sign-in.html"><i class="ri-circle-fill circle-icon text-primary-600 w-auto"></i> Sign In</a>
</li>
<li>
<a href="sign-up.html"><i class="ri-circle-fill circle-icon text-warning-main w-auto"></i> Sign Up</a>
</li>
<li>
<a href="forgot-password.html"><i class="ri-circle-fill circle-icon text-info-main w-auto"></i> Forgot Password</a>
</li>
</ul>
</li>
<li>
<a href="gallery.html">
<iconify-icon icon="solar:gallery-wide-linear" class="menu-icon"></iconify-icon>
<span>Gallery</span>
</a>
</li>
<li>
<a href="pricing.html">
<iconify-icon icon="hugeicons:money-send-square" class="menu-icon"></iconify-icon>
<span>Pricing</span>
</a>
</li>
<li>
<a href="faq.html">
<iconify-icon icon="mage:message-question-mark-round" class="menu-icon"></iconify-icon>
<span>FAQs.</span>
</a>
</li>
<li>
<a href="error.html">
<iconify-icon icon="streamline:straight-face" class="menu-icon"></iconify-icon>
<span>404</span>
</a>
</li>
<li>
<a href="terms-condition.html">
<iconify-icon icon="octicon:info-24" class="menu-icon"></iconify-icon>
<span>Terms & Conditions</span>
</a>
</li>
<li class="dropdown">
<a href="javascript:void(0)">
<iconify-icon icon="icon-park-outline:setting-two" class="menu-icon"></iconify-icon>
<span>Settings</span>
</a>
<ul class="sidebar-submenu">
<li>
<a href="company.html"><i class="ri-circle-fill circle-icon text-primary-600 w-auto"></i> Company</a>
</li>
<li>
<a href="notification.html"><i class="ri-circle-fill circle-icon text-warning-main w-auto"></i> Notification</a>
</li>
<li>
<a href="notification-alert.html"><i class="ri-circle-fill circle-icon text-info-main w-auto"></i> Notification Alert</a>
</li>
<li>
<a href="theme.html"><i class="ri-circle-fill circle-icon text-danger-main w-auto"></i> Theme</a>
</li>
<li>
<a href="currencies.html"><i class="ri-circle-fill circle-icon text-danger-main w-auto"></i> Currencies</a>
</li>
<li>
<a href="language.html"><i class="ri-circle-fill circle-icon text-danger-main w-auto"></i> Languages</a>
</li>
<li>
<a href="payment-gateway.html"><i class="ri-circle-fill circle-icon text-danger-main w-auto"></i> Payment Gateway</a>
</li>
</ul>
</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">
<div class="d-flex flex-wrap align-items-center gap-4">
<button type="button" class="sidebar-toggle">
<iconify-icon icon="heroicons:bars-3-solid" class="icon text-2xl non-active"></iconify-icon>
<iconify-icon icon="iconoir:arrow-right" class="icon text-2xl active"></iconify-icon>
</button>
<button type="button" class="sidebar-mobile-toggle">
<iconify-icon icon="heroicons:bars-3-solid" class="icon"></iconify-icon>
</button>
<form class="navbar-search">
<input type="text" name="search" placeholder="Search">
<iconify-icon icon="ion:search-outline" class="icon"></iconify-icon>
</form>
</div>
</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 class="dropdown d-none d-sm-inline-block">
<button class="has-indicator w-40-px h-40-px bg-neutral-200 rounded-circle d-flex justify-content-center align-items-center" type="button" data-bs-toggle="dropdown">
<img src="assets/images/lang-flag.png" alt="image" class="w-24 h-24 object-fit-cover rounded-circle">
</button>
<div class="dropdown-menu to-top dropdown-menu-sm">
<div class="py-12 px-16 radius-8 bg-primary-50 mb-16 d-flex align-items-center justify-content-between gap-2">
<div>
<h6 class="text-lg text-primary-light fw-semibold mb-0">Choose Your Language</h6>
</div>
</div>
<div class="max-h-400-px overflow-y-auto scroll-sm pe-8">
<div class="form-check style-check d-flex align-items-center justify-content-between mb-16">
<label class="form-check-label line-height-1 fw-medium text-secondary-light" for="english">
<span class="text-black hover-bg-transparent hover-text-primary d-flex align-items-center gap-3">
<img src="assets/images/flags/flag1.png" alt="" class="w-36-px h-36-px bg-success-subtle text-success-main rounded-circle flex-shrink-0">
<span class="text-md fw-semibold mb-0">English</span>
</span>
</label>
<input class="form-check-input" type="radio" name="crypto" id="english">
</div>
<div class="form-check style-check d-flex align-items-center justify-content-between mb-16">
<label class="form-check-label line-height-1 fw-medium text-secondary-light" for="japan">
<span class="text-black hover-bg-transparent hover-text-primary d-flex align-items-center gap-3">
<img src="assets/images/flags/flag2.png" alt="" class="w-36-px h-36-px bg-success-subtle text-success-main rounded-circle flex-shrink-0">
<span class="text-md fw-semibold mb-0">Japan</span>
</span>
</label>
<input class="form-check-input" type="radio" name="crypto" id="japan">
</div>
<div class="form-check style-check d-flex align-items-center justify-content-between mb-16">
<label class="form-check-label line-height-1 fw-medium text-secondary-light" for="france">
<span class="text-black hover-bg-transparent hover-text-primary d-flex align-items-center gap-3">
<img src="assets/images/flags/flag3.png" alt="" class="w-36-px h-36-px bg-success-subtle text-success-main rounded-circle flex-shrink-0">
<span class="text-md fw-semibold mb-0">France</span>
</span>
</label>
<input class="form-check-input" type="radio" name="crypto" id="france">
</div>
<div class="form-check style-check d-flex align-items-center justify-content-between mb-16">
<label class="form-check-label line-height-1 fw-medium text-secondary-light" for="germany">
<span class="text-black hover-bg-transparent hover-text-primary d-flex align-items-center gap-3">
<img src="assets/images/flags/flag4.png" alt="" class="w-36-px h-36-px bg-success-subtle text-success-main rounded-circle flex-shrink-0">
<span class="text-md fw-semibold mb-0">Germany</span>
</span>
</label>
<input class="form-check-input" type="radio" name="crypto" id="germany">
</div>
<div class="form-check style-check d-flex align-items-center justify-content-between mb-16">
<label class="form-check-label line-height-1 fw-medium text-secondary-light" for="korea">
<span class="text-black hover-bg-transparent hover-text-primary d-flex align-items-center gap-3">
<img src="assets/images/flags/flag5.png" alt="" class="w-36-px h-36-px bg-success-subtle text-success-main rounded-circle flex-shrink-0">
<span class="text-md fw-semibold mb-0">South Korea</span>
</span>
</label>
<input class="form-check-input" type="radio" name="crypto" id="korea">
</div>
<div class="form-check style-check d-flex align-items-center justify-content-between mb-16">
<label class="form-check-label line-height-1 fw-medium text-secondary-light" for="bangladesh">
<span class="text-black hover-bg-transparent hover-text-primary d-flex align-items-center gap-3">
<img src="assets/images/flags/flag6.png" alt="" class="w-36-px h-36-px bg-success-subtle text-success-main rounded-circle flex-shrink-0">
<span class="text-md fw-semibold mb-0">Bangladesh</span>
</span>
</label>
<input class="form-check-input" type="radio" name="crypto" id="bangladesh">
</div>
<div class="form-check style-check d-flex align-items-center justify-content-between mb-16">
<label class="form-check-label line-height-1 fw-medium text-secondary-light" for="india">
<span class="text-black hover-bg-transparent hover-text-primary d-flex align-items-center gap-3">
<img src="assets/images/flags/flag7.png" alt="" class="w-36-px h-36-px bg-success-subtle text-success-main rounded-circle flex-shrink-0">
<span class="text-md fw-semibold mb-0">India</span>
</span>
</label>
<input class="form-check-input" type="radio" name="crypto" id="india">
</div>
<div class="form-check style-check d-flex align-items-center justify-content-between">
<label class="form-check-label line-height-1 fw-medium text-secondary-light" for="canada">
<span class="text-black hover-bg-transparent hover-text-primary d-flex align-items-center gap-3">
<img src="assets/images/flags/flag8.png" alt="" class="w-36-px h-36-px bg-success-subtle text-success-main rounded-circle flex-shrink-0">
<span class="text-md fw-semibold mb-0">Canada</span>
</span>
</label>
<input class="form-check-input" type="radio" name="crypto" id="canada">
</div>
</div>
</div>
</div><!-- Language dropdown end -->
<div class="dropdown">
<button class="has-indicator w-40-px h-40-px bg-neutral-200 rounded-circle d-flex justify-content-center align-items-center" type="button" data-bs-toggle="dropdown">
<iconify-icon icon="mage:email" class="text-primary-light text-xl"></iconify-icon>
</button>
<div class="dropdown-menu to-top dropdown-menu-lg p-0">
<div class="m-16 py-12 px-16 radius-8 bg-primary-50 mb-16 d-flex align-items-center justify-content-between gap-2">
<div>
<h6 class="text-lg text-primary-light fw-semibold mb-0">Message</h6>
</div>
<span class="text-primary-600 fw-semibold text-lg w-40-px h-40-px rounded-circle bg-base d-flex justify-content-center align-items-center">05</span>
</div>
<div class="max-h-400-px overflow-y-auto scroll-sm pe-4">
<a href="javascript:void(0)" class="px-24 py-12 d-flex align-items-start gap-3 mb-2 justify-content-between">
<div class="text-black hover-bg-transparent hover-text-primary d-flex align-items-center gap-3">
<span class="w-40-px h-40-px rounded-circle flex-shrink-0 position-relative">
<img src="assets/images/notification/profile-3.png" alt="">
<span class="w-8-px h-8-px bg-success-main rounded-circle position-absolute end-0 bottom-0"></span>
</span>
<div>
<h6 class="text-md fw-semibold mb-4">Kathryn Murphy</h6>
<p class="mb-0 text-sm text-secondary-light text-w-100-px">hey! there i’m...</p>
</div>
</div>
<div class="d-flex flex-column align-items-end">
<span class="text-sm text-secondary-light flex-shrink-0">12:30 PM</span>
<span class="mt-4 text-xs text-base w-16-px h-16-px d-flex justify-content-center align-items-center bg-warning-main rounded-circle">8</span>
</div>
</a>
<a href="javascript:void(0)" class="px-24 py-12 d-flex align-items-start gap-3 mb-2 justify-content-between">
<div class="text-black hover-bg-transparent hover-text-primary d-flex align-items-center gap-3">
<span class="w-40-px h-40-px rounded-circle flex-shrink-0 position-relative">
<img src="assets/images/notification/profile-4.png" alt="">
<span class="w-8-px h-8-px bg-neutral-300 rounded-circle position-absolute end-0 bottom-0"></span>
</span>
<div>
<h6 class="text-md fw-semibold mb-4">Kathryn Murphy</h6>
<p class="mb-0 text-sm text-secondary-light text-w-100-px">hey! there i’m...</p>
</div>
</div>
<div class="d-flex flex-column align-items-end">
<span class="text-sm text-secondary-light flex-shrink-0">12:30 PM</span>
<span class="mt-4 text-xs text-base w-16-px h-16-px d-flex justify-content-center align-items-center bg-warning-main rounded-circle">2</span>
</div>
</a>
<a href="javascript:void(0)" class="px-24 py-12 d-flex align-items-start gap-3 mb-2 justify-content-between bg-neutral-50">
<div class="text-black hover-bg-transparent hover-text-primary d-flex align-items-center gap-3">
<span class="w-40-px h-40-px rounded-circle flex-shrink-0 position-relative">
<img src="assets/images/notification/profile-5.png" alt="">
<span class="w-8-px h-8-px bg-success-main rounded-circle position-absolute end-0 bottom-0"></span>
</span>
<div>
<h6 class="text-md fw-semibold mb-4">Kathryn Murphy</h6>
<p class="mb-0 text-sm text-secondary-light text-w-100-px">hey! there i’m...</p>
</div>
</div>
<div class="d-flex flex-column align-items-end">
<span class="text-sm text-secondary-light flex-shrink-0">12:30 PM</span>
<span class="mt-4 text-xs text-base w-16-px h-16-px d-flex justify-content-center align-items-center bg-neutral-400 rounded-circle">0</span>
</div>
</a>
<a href="javascript:void(0)" class="px-24 py-12 d-flex align-items-start gap-3 mb-2 justify-content-between bg-neutral-50">
<div class="text-black hover-bg-transparent hover-text-primary d-flex align-items-center gap-3">
<span class="w-40-px h-40-px rounded-circle flex-shrink-0 position-relative">
<img src="assets/images/notification/profile-6.png" alt="">
<span class="w-8-px h-8-px bg-neutral-300 rounded-circle position-absolute end-0 bottom-0"></span>
</span>
<div>
<h6 class="text-md fw-semibold mb-4">Kathryn Murphy</h6>
<p class="mb-0 text-sm text-secondary-light text-w-100-px">hey! there i’m...</p>
</div>
</div>
<div class="d-flex flex-column align-items-end">
<span class="text-sm text-secondary-light flex-shrink-0">12:30 PM</span>
<span class="mt-4 text-xs text-base w-16-px h-16-px d-flex justify-content-center align-items-center bg-neutral-400 rounded-circle">0</span>
</div>
</a>
<a href="javascript:void(0)" class="px-24 py-12 d-flex align-items-start gap-3 mb-2 justify-content-between">
<div class="text-black hover-bg-transparent hover-text-primary d-flex align-items-center gap-3">
<span class="w-40-px h-40-px rounded-circle flex-shrink-0 position-relative">
<img src="assets/images/notification/profile-7.png" alt="">
<span class="w-8-px h-8-px bg-success-main rounded-circle position-absolute end-0 bottom-0"></span>
</span>
<div>
<h6 class="text-md fw-semibold mb-4">Kathryn Murphy</h6>
<p class="mb-0 text-sm text-secondary-light text-w-100-px">hey! there i’m...</p>
</div>
</div>
<div class="d-flex flex-column align-items-end">
<span class="text-sm text-secondary-light flex-shrink-0">12:30 PM</span>
<span class="mt-4 text-xs text-base w-16-px h-16-px d-flex justify-content-center align-items-center bg-warning-main rounded-circle">8</span>
</div>
</a>
</div>
<div class="text-center py-12 px-16">
<a href="javascript:void(0)" class="text-primary-600 fw-semibold text-md">See All Message</a>
</div>
</div>
</div><!-- Message dropdown end -->
<div class="dropdown">
<button class="has-indicator w-40-px h-40-px bg-neutral-200 rounded-circle d-flex justify-content-center align-items-center" type="button" data-bs-toggle="dropdown">
<iconify-icon icon="iconoir:bell" class="text-primary-light text-xl"></iconify-icon>
</button>
<div class="dropdown-menu to-top dropdown-menu-lg p-0">
<div class="m-16 py-12 px-16 radius-8 bg-primary-50 mb-16 d-flex align-items-center justify-content-between gap-2">
<div>
<h6 class="text-lg text-primary-light fw-semibold mb-0">Notifications</h6>
</div>
<span class="text-primary-600 fw-semibold text-lg w-40-px h-40-px rounded-circle bg-base d-flex justify-content-center align-items-center">05</span>
</div>
<div class="max-h-400-px overflow-y-auto scroll-sm pe-4">
<a href="javascript:void(0)" class="px-24 py-12 d-flex align-items-start gap-3 mb-2 justify-content-between">
<div class="text-black hover-bg-transparent hover-text-primary d-flex align-items-center gap-3">
<span class="w-44-px h-44-px bg-success-subtle text-success-main rounded-circle d-flex justify-content-center align-items-center flex-shrink-0">
<iconify-icon icon="bitcoin-icons:verify-outline" class="icon text-xxl"></iconify-icon>
</span>
<div>
<h6 class="text-md fw-semibold mb-4">Congratulations</h6>
<p class="mb-0 text-sm text-secondary-light text-w-200-px">Your profile has been Verified. Your profile has been Verified</p>
</div>
</div>
<span class="text-sm text-secondary-light flex-shrink-0">23 Mins ago</span>
</a>
<a href="javascript:void(0)" class="px-24 py-12 d-flex align-items-start gap-3 mb-2 justify-content-between bg-neutral-50">
<div class="text-black hover-bg-transparent hover-text-primary d-flex align-items-center gap-3">
<span class="w-44-px h-44-px bg-success-subtle text-success-main rounded-circle d-flex justify-content-center align-items-center flex-shrink-0">
<img src="assets/images/notification/profile-1.png" alt="">
</span>
<div>
<h6 class="text-md fw-semibold mb-4">Ronald Richards</h6>
<p class="mb-0 text-sm text-secondary-light text-w-200-px">You can stitch between artboards</p>
</div>
</div>
<span class="text-sm text-secondary-light flex-shrink-0">23 Mins ago</span>
</a>
<a href="javascript:void(0)" class="px-24 py-12 d-flex align-items-start gap-3 mb-2 justify-content-between">
<div class="text-black hover-bg-transparent hover-text-primary d-flex align-items-center gap-3">
<span class="w-44-px h-44-px bg-info-subtle text-info-main rounded-circle d-flex justify-content-center align-items-center flex-shrink-0">
AM
</span>
<div>
<h6 class="text-md fw-semibold mb-4">Arlene McCoy</h6>
<p class="mb-0 text-sm text-secondary-light text-w-200-px">Invite you to prototyping</p>
</div>
</div>
<span class="text-sm text-secondary-light flex-shrink-0">23 Mins ago</span>
</a>
<a href="javascript:void(0)" class="px-24 py-12 d-flex align-items-start gap-3 mb-2 justify-content-between bg-neutral-50">
<div class="text-black hover-bg-transparent hover-text-primary d-flex align-items-center gap-3">
<span class="w-44-px h-44-px bg-success-subtle text-success-main rounded-circle d-flex justify-content-center align-items-center flex-shrink-0">
<img src="assets/images/notification/profile-2.png" alt="">
</span>
<div>
<h6 class="text-md fw-semibold mb-4">Annette Black</h6>
<p class="mb-0 text-sm text-secondary-light text-w-200-px">Invite you to prototyping</p>
</div>
</div>
<span class="text-sm text-secondary-light flex-shrink-0">23 Mins ago</span>
</a>
<a href="javascript:void(0)" class="px-24 py-12 d-flex align-items-start gap-3 mb-2 justify-content-between">
<div class="text-black hover-bg-transparent hover-text-primary d-flex align-items-center gap-3">
<span class="w-44-px h-44-px bg-info-subtle text-info-main rounded-circle d-flex justify-content-center align-items-center flex-shrink-0">
DR
</span>
<div>
<h6 class="text-md fw-semibold mb-4">Darlene Robertson</h6>
<p class="mb-0 text-sm text-secondary-light text-w-200-px">Invite you to prototyping</p>
</div>
</div>
<span class="text-sm text-secondary-light flex-shrink-0">23 Mins ago</span>
</a>
</div>
<div class="text-center py-12 px-16">
<a href="javascript:void(0)" class="text-primary-600 fw-semibold text-md">See All Notification</a>
</div>
</div>
</div><!-- Notification dropdown end -->
<div class="dropdown">
<button class="d-flex justify-content-center align-items-center rounded-circle" type="button" data-bs-toggle="dropdown">
<img src="assets/images/user.png" alt="image" class="w-40-px h-40-px object-fit-cover rounded-circle">
</button>
<div class="dropdown-menu to-top dropdown-menu-sm">
<div class="py-12 px-16 radius-8 bg-primary-50 mb-16 d-flex align-items-center justify-content-between gap-2">
<div>
<h6 class="text-lg text-primary-light fw-semibold mb-2">Shaidul Islam</h6>
<span class="text-secondary-light fw-medium text-sm">Admin</span>
</div>
<button type="button" class="hover-text-danger">
<iconify-icon icon="radix-icons:cross-1" class="icon text-xl"></iconify-icon>
</button>
</div>
<ul class="to-top-list">
<li>
<a class="dropdown-item text-black px-0 py-8 hover-bg-transparent hover-text-primary d-flex align-items-center gap-3" href="view-profile.html">
<iconify-icon icon="solar:user-linear" class="icon text-xl"></iconify-icon> My Profile</a>
</li>
<li>
<a class="dropdown-item text-black px-0 py-8 hover-bg-transparent hover-text-primary d-flex align-items-center gap-3" href="email.html">
<iconify-icon icon="tabler:message-check" class="icon text-xl"></iconify-icon> Inbox</a>
</li>
<li>
<a class="dropdown-item text-black px-0 py-8 hover-bg-transparent hover-text-primary d-flex align-items-center gap-3" href="company.html">
<iconify-icon icon="icon-park-outline:setting-two" class="icon text-xl"></iconify-icon> Setting</a>
</li>
<li>
<a class="dropdown-item text-black px-0 py-8 hover-bg-transparent hover-text-danger d-flex align-items-center gap-3" href="javascript:void(0)">
<iconify-icon icon="lucide:power" class="icon text-xl"></iconify-icon> Log Out</a>
</li>
</ul>
</div>
</div><!-- Profile dropdown end -->
</div>
</div>
</div>
</div>
<div class="dashboard-main-body">
<div class="d-flex flex-wrap align-items-center justify-content-between gap-3 mb-24">
<h6 class="fw-semibold mb-0">Tab & Accordion</h6>
<ul class="d-flex align-items-center gap-2">
<li class="fw-medium">
<a href="index.html" class="d-flex align-items-center gap-1 hover-text-primary">
<iconify-icon icon="solar:home-smile-angle-outline" class="icon text-lg"></iconify-icon>
Dashboard
</a>
</li>
<li>-</li>
<li class="fw-medium">Components / Tab & Accordion</li>
</ul>
</div>
<div class="row gy-4">
<div class="col-xxl-6">
<div class="card p-0 overflow-hidden position-relative radius-12 h-100">
<div class="card-header py-16 px-24 bg-base border border-end-0 border-start-0 border-top-0">
<h6 class="text-lg mb-0">Default Tabs </h6>
</div>
<div class="card-body p-24 pt-10">
<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>
</div>
<div class="col-xxl-6">
<div class="card p-0 overflow-hidden position-relative radius-12 h-100">
<div class="card-header py-16 px-24 bg-base border border-end-0 border-start-0 border-top-0">
<h6 class="text-lg mb-0">Focus Tabs </h6>
</div>
<div class="card-body p-24 pt-10">
<ul class="nav focus-tab nav-pills mb-16" id="pills-tab-two" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link fw-semibold text-primary-light radius-4 px-16 py-10 active" id="pills-focus-home-tab" data-bs-toggle="pill" data-bs-target="#pills-focus-home" type="button" role="tab" aria-controls="pills-focus-home" aria-selected="true">Home</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link fw-semibold text-primary-light radius-4 px-16 py-10" id="pills-focus-details-tab" data-bs-toggle="pill" data-bs-target="#pills-focus-details" type="button" role="tab" aria-controls="pills-focus-details" aria-selected="false">Details</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link fw-semibold text-primary-light radius-4 px-16 py-10" id="pills-focus-profile-tab" data-bs-toggle="pill" data-bs-target="#pills-focus-profile" type="button" role="tab" aria-controls="pills-focus-profile" aria-selected="false">Profile</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link fw-semibold text-primary-light radius-4 px-16 py-10" id="pills-focus-settings-tab" data-bs-toggle="pill" data-bs-target="#pills-focus-settings" type="button" role="tab" aria-controls="pills-focus-settings" aria-selected="false">Settings</button>
</li>
</ul>
<div class="tab-content" id="pills-tab-twoContent">
<div class="tab-pane fade show active" id="pills-focus-home" role="tabpanel" aria-labelledby="pills-focus-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-focus-details" role="tabpanel" aria-labelledby="pills-focus-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-focus-profile" role="tabpanel" aria-labelledby="pills-focus-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-focus-settings" role="tabpanel" aria-labelledby="pills-focus-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>
</div>
<div class="col-xxl-6">
<div class="card p-0 overflow-hidden position-relative radius-12 h-100">
<div class="card-header py-16 px-24 bg-base border border-end-0 border-start-0 border-top-0">
<h6 class="text-lg mb-0">Button Tabs</h6>
</div>
<div class="card-body p-24 pt-10">
<ul class="nav button-tab nav-pills mb-16" id="pills-tab-three" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link fw-semibold text-primary-light radius-4 px-16 py-10 active" id="pills-button-home-tab" data-bs-toggle="pill" data-bs-target="#pills-button-home" type="button" role="tab" aria-controls="pills-button-home" aria-selected="true">Home</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link fw-semibold text-primary-light radius-4 px-16 py-10" id="pills-button-details-tab" data-bs-toggle="pill" data-bs-target="#pills-button-details" type="button" role="tab" aria-controls="pills-button-details" aria-selected="false">Details</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link fw-semibold text-primary-light radius-4 px-16 py-10" id="pills-button-profile-tab" data-bs-toggle="pill" data-bs-target="#pills-button-profile" type="button" role="tab" aria-controls="pills-button-profile" aria-selected="false">Profile</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link fw-semibold text-primary-light radius-4 px-16 py-10" id="pills-button-settings-tab" data-bs-toggle="pill" data-bs-target="#pills-button-settings" type="button" role="tab" aria-controls="pills-button-settings" aria-selected="false">Settings</button>
</li>
</ul>
<div class="tab-content" id="pills-tab-threeContent">
<div class="tab-pane fade show active" id="pills-button-home" role="tabpanel" aria-labelledby="pills-button-home-tab" tabindex="0">
<div class="d-flex align-items-center gap-3">
<div class="flex-shrink-0">
<img src="assets/images/tabs/tabs-image1.png" class="radius-8" alt="">
</div>
<div class="flex-grow-1">
<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 </p>
<p class="text-secondary-light mb-0"> make a type specimen book. It has survived not industry's standard dummy</p>
</div>
</div>
</div>
<div class="tab-pane fade" id="pills-button-details" role="tabpanel" aria-labelledby="pills-button-details-tab" tabindex="0">
<div class="d-flex align-items-center gap-3">
<div class="flex-shrink-0">
<img src="assets/images/tabs/tabs-image2.png" class="radius-8" alt="">
</div>
<div class="flex-grow-1">
<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 </p>
<p class="text-secondary-light mb-0"> make a type specimen book. It has survived not industry's standard dummy</p>
</div>
</div>
</div>
<div class="tab-pane fade" id="pills-button-profile" role="tabpanel" aria-labelledby="pills-button-profile-tab" tabindex="0">
<div class="d-flex align-items-center gap-3">
<div class="flex-shrink-0">
<img src="assets/images/tabs/tabs-image1.png" class="radius-8" alt="">
</div>
<div class="flex-grow-1">
<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 </p>
<p class="text-secondary-light mb-0"> make a type specimen book. It has survived not industry's standard dummy</p>
</div>
</div>
</div>
<div class="tab-pane fade" id="pills-button-settings" role="tabpanel" aria-labelledby="pills-button-settings-tab" tabindex="0">
<div class="d-flex align-items-center gap-3">
<div class="flex-shrink-0">
<img src="assets/images/tabs/tabs-image2.png" class="radius-8" alt="">
</div>
<div class="flex-grow-1">
<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 </p>
<p class="text-secondary-light mb-0"> make a type specimen book. It has survived not industry's standard dummy</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-xxl-6">
<div class="card p-0 overflow-hidden position-relative radius-12 h-100">
<div class="card-header py-16 px-24 bg-base border border-end-0 border-start-0 border-top-0">
<h6 class="text-lg mb-0">Button Tabs</h6>
</div>
<div class="card-body p-24 pt-10">
<ul class="nav button-tab nav-pills mb-16" id="pills-tab-four" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link d-flex align-items-center gap-2 fw-semibold text-primary-light radius-4 px-16 py-10 active" id="pills-button-icon-home-tab" data-bs-toggle="pill" data-bs-target="#pills-button-icon-home" type="button" role="tab" aria-controls="pills-button-icon-home" aria-selected="true">
<iconify-icon icon="solar:home-smile-angle-outline" class="text-xl"></iconify-icon>
<span class="line-height-1">Home</span>
</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link d-flex align-items-center gap-2 fw-semibold text-primary-light radius-4 px-16 py-10" id="pills-button-icon-details-tab" data-bs-toggle="pill" data-bs-target="#pills-button-icon-details" type="button" role="tab" aria-controls="pills-button-icon-details" aria-selected="false">
<iconify-icon icon="hugeicons:folder-details" class="text-xl"></iconify-icon>
<span class="line-height-1">Details</span>
</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link d-flex align-items-center gap-2 fw-semibold text-primary-light radius-4 px-16 py-10" id="pills-button-icon-profile-tab" data-bs-toggle="pill" data-bs-target="#pills-button-icon-profile" type="button" role="tab" aria-controls="pills-button-icon-profile" aria-selected="false">
<iconify-icon icon="iconamoon:profile" class="text-xl"></iconify-icon>
<span class="line-height-1">Profile</span>
</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link d-flex align-items-center gap-2 fw-semibold text-primary-light radius-4 px-16 py-10" id="pills-button-icon-settings-tab" data-bs-toggle="pill" data-bs-target="#pills-button-icon-settings" type="button" role="tab" aria-controls="pills-button-icon-settings" aria-selected="false">
<iconify-icon icon="uil:setting" class="text-xl"></iconify-icon>
<span class="line-height-1">Settings</span>
</button>
</li>
</ul>
<div class="tab-content" id="pills-tab-fourContent">
<div class="tab-pane fade show active" id="pills-button-icon-home" role="tabpanel" aria-labelledby="pills-button-icon-home-tab" tabindex="0">
<div class="d-flex align-items-center gap-3">
<div class="flex-shrink-0">
<img src="assets/images/tabs/tabs-image2.png" class="radius-8" alt="">
</div>
<div class="flex-grow-1">
<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 </p>
<p class="text-secondary-light mb-0"> make a type specimen book. It has survived not industry's standard dummy</p>
</div>
</div>
</div>
<div class="tab-pane fade" id="pills-button-icon-details" role="tabpanel" aria-labelledby="pills-button-icon-details-tab" tabindex="0">
<div class="d-flex align-items-center gap-3">
<div class="flex-shrink-0">
<img src="assets/images/tabs/tabs-image1.png" class="radius-8" alt="">
</div>
<div class="flex-grow-1">
<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 </p>
<p class="text-secondary-light mb-0"> make a type specimen book. It has survived not industry's standard dummy</p>
</div>
</div>
</div>
<div class="tab-pane fade" id="pills-button-icon-profile" role="tabpanel" aria-labelledby="pills-button-icon-profile-tab" tabindex="0">
<div class="d-flex align-items-center gap-3">
<div class="flex-shrink-0">
<img src="assets/images/tabs/tabs-image2.png" class="radius-8" alt="">
</div>
<div class="flex-grow-1">
<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 </p>
<p class="text-secondary-light mb-0"> make a type specimen book. It has survived not industry's standard dummy</p>
</div>
</div>
</div>
<div class="tab-pane fade" id="pills-button-icon-settings" role="tabpanel" aria-labelledby="pills-button-icon-settings-tab" tabindex="0">
<div class="d-flex align-items-center gap-3">
<div class="flex-shrink-0">
<img src="assets/images/tabs/tabs-image1.png" class="radius-8" alt="">
</div>
<div class="flex-grow-1">
<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 </p>
<p class="text-secondary-light mb-0"> make a type specimen book. It has survived not industry's standard dummy</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-xxl-6">
<div class="card p-0 overflow-hidden position-relative radius-12 h-100">
<div class="card-header py-16 px-24 bg-base border border-end-0 border-start-0 border-top-0">
<h6 class="text-lg mb-0">Vertical Nav Tabs</h6>
</div>
<div class="card-body p-24 pt-10">
<div class="d-flex align-items-start">
<ul class="nav button-tab nav-pills mb-16" id="pills-tab-five" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link fw-semibold text-primary-light radius-4 px-16 py-10 active" id="pills-vertical-home-tab" data-bs-toggle="pill" data-bs-target="#pills-vertical-home" type="button" role="tab" aria-controls="pills-vertical-home" aria-selected="true">Home</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link fw-semibold text-primary-light radius-4 px-16 py-10" id="pills-vertical-details-tab" data-bs-toggle="pill" data-bs-target="#pills-vertical-details" type="button" role="tab" aria-controls="pills-vertical-details" aria-selected="false">Details</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link fw-semibold text-primary-light radius-4 px-16 py-10" id="pills-vertical-profile-tab" data-bs-toggle="pill" data-bs-target="#pills-vertical-profile" type="button" role="tab" aria-controls="pills-vertical-profile" aria-selected="false">Profile</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link fw-semibold text-primary-light radius-4 px-16 py-10" id="pills-vertical-settings-tab" data-bs-toggle="pill" data-bs-target="#pills-vertical-settings" type="button" role="tab" aria-controls="pills-vertical-settings" aria-selected="false">Settings</button>
</li>
</ul>
<div class="tab-content" id="pills-tab-fiveContent">
<div class="tab-pane fade show active" id="pills-vertical-home" role="tabpanel" aria-labelledby="pills-vertical-home-tab" tabindex="0">
<div class="flex-grow-1">
<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 </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 desktopLorem Ipsum is simply dummy text of the printing and typesetting industry. </p>
</div>
</div>
<div class="tab-pane fade" id="pills-vertical-details" role="tabpanel" aria-labelledby="pills-vertical-details-tab" tabindex="0">
<div class="flex-grow-1">
<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 </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 desktopLorem Ipsum is simply dummy text of the printing and typesetting industry. </p>
</div>
</div>
<div class="tab-pane fade" id="pills-vertical-profile" role="tabpanel" aria-labelledby="pills-vertical-profile-tab" tabindex="0">
<div class="flex-grow-1">
<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 </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 desktopLorem Ipsum is simply dummy text of the printing and typesetting industry. </p>
</div>
</div>
<div class="tab-pane fade" id="pills-vertical-settings" role="tabpanel" aria-labelledby="pills-vertical-settings-tab" tabindex="0">
<div class="flex-grow-1">
<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 </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 desktopLorem Ipsum is simply dummy text of the printing and typesetting industry. </p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-xxl-6">
<div class="card p-0 overflow-hidden position-relative radius-12 h-100">
<div class="card-header pt-16 pb-0 px-24 bg-base border border-end-0 border-start-0 border-top-0 d-flex align-items-center flex-wrap justify-content-between">
<h6 class="text-lg mb-0">Card Header Tabs</h6>
<ul class="nav bordered-tab d-inline-flex nav-pills mb-0" id="pills-tab-six" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link px-16 py-10 active" id="pills-header-home-tab" data-bs-toggle="pill" data-bs-target="#pills-header-home" type="button" role="tab" aria-controls="pills-header-home" aria-selected="true">Home</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link px-16 py-10" id="pills-header-details-tab" data-bs-toggle="pill" data-bs-target="#pills-header-details" type="button" role="tab" aria-controls="pills-header-details" aria-selected="false">Details</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link px-16 py-10" id="pills-header-profile-tab" data-bs-toggle="pill" data-bs-target="#pills-header-profile" type="button" role="tab" aria-controls="pills-header-profile" aria-selected="false">Profile</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link px-16 py-10" id="pills-header-settings-tab" data-bs-toggle="pill" data-bs-target="#pills-header-settings" type="button" role="tab" aria-controls="pills-header-settings" aria-selected="false">Settings</button>
</li>
</ul>
</div>
<div class="card-body p-24 pt-10">
<div class="tab-content" id="pills-tabContent-six">
<div class="tab-pane fade show active" id="pills-header-home" role="tabpanel" aria-labelledby="pills-header-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-header-details" role="tabpanel" aria-labelledby="pills-header-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-header-profile" role="tabpanel" aria-labelledby="pills-header-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-header-settings" role="tabpanel" aria-labelledby="pills-header-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>
</div>
</div>
</div>
<footer class="d-footer">
<div class="row align-items-center justify-content-between">
<div class="col-auto">
<p class="mb-0">© 2024 WowDash. All Rights Reserved.</p>
</div>
<div class="col-auto">
<p class="mb-0">Made by <span class="text-primary-600">wowtheme7</span></p>
</div>
</div>
</footer>
</main>
<!-- jQuery library js -->
<script src="assets/js/lib/jquery-3.7.1.min.js"></script>
<!-- Bootstrap js -->
<script src="assets/js/lib/bootstrap.bundle.min.js"></script>
<!-- Apex Chart js -->
<script src="assets/js/lib/apexcharts.min.js"></script>
<!-- Data Table js -->
<script src="assets/js/lib/dataTables.min.js"></script>
<!-- Iconify Font js -->
<script src="assets/js/lib/iconify-icon.min.js"></script>
<!-- jQuery UI js -->
<script src="assets/js/lib/jquery-ui.min.js"></script>
<!-- Vector Map js -->
<script src="assets/js/lib/jquery-jvectormap-2.0.5.min.js"></script>
<script src="assets/js/lib/jquery-jvectormap-world-mill-en.js"></script>
<!-- Popup js -->
<script src="assets/js/lib/magnifc-popup.min.js"></script>
<!-- Slick Slider js -->
<script src="assets/js/lib/slick.min.js"></script>
<!-- main js -->
<script src="assets/js/app.js"></script>
</body>
</html>