Basic Table

Users List

Email Role Status Project Actions
user

Evangelina Mcclain

@jstevenson5c
[email protected] Agent
Active
165
user

Candice Munoz

@candicemunoz
[email protected] Administrator Active 99
user

Bernard Langley

@bernardlangley
[email protected] Contributor Active 24
user

Kristie Hall

@kristiehall
[email protected] Agent Active 50
user

Bolton Obrien

@boltonobrien
[email protected] Contributor Active 34
user

Dee Alvarado

@deealvarado
[email protected] Administrator Active 99
Showing 1 To 6 Of 20 Entries

<div class="card bg-white border-0 rounded-10 mb-4">
    <div class="card-body p-4">
        <div class="d-sm-flex text-center justify-content-between align-items-center border-bottom pb-20 mb-20">
            <h4 class="fw-semibold fs-18 mb-sm-0">Users List</h4>
            <button class="border-0 btn btn-primary py-2 px-3 px-sm-4 text-white fs-14 fw-semibold rounded-3" data-bs-toggle="offcanvas" data-bs-target="#offcanvasRight" aria-controls="offcanvasRight">
                <span class="py-sm-1 d-block">
                    <i class="ri-add-line text-white"></i>
                    <span>Create New User</span>
                </span>
            </button>
        </div>
        <div class="default-table-area members-list">
            <div class="table-responsive">
                <table class="table align-middle">
                    <thead>
                        <tr class="text-center">
                            <th scope="col" class="text-primary text-start">
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" value="" id="flexCheckDefault">
                                    <label class="form-check-label ms-2" for="flexCheckDefault">Name</label>
                                </div>
                            </th>
                            <th scope="col">Email</th>
                            <th scope="col">Role</th>
                            <th scope="col">Status</th>
                            <th scope="col">Project</th>
                            <th scope="col">Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr class="text-center">
                            <td class="text-start">
                                <div class="d-flex align-items-center">
                                    <div class="form-check pe-2">
                                        <input class="form-check-input" type="checkbox" value="" id="flexCheckDefault2">
                                    </div>
                                    <div class="d-flex align-items-center">
                                        <div class="flex-shrink-0 lh-1">
                                            <img src="assets/images/user-1.jpg" class="wh-44 rounded-circle" alt="user">
                                        </div>
                                        <div class="flex-grow-1 ms-10">
                                            <h4 class="fw-semibold fs-16 mb-0">Evangelina Mcclain</h4>
                                            <span class="text-gray-light">@jstevenson5c</span>
                                        </div>
                                    </div>
                                </div>
                            </td>
                            <td>
                                <a href="mailto:[email protected]">[email protected]</a>
                            </td>
                            <td>
                                <span>Agent</span>
                            </td>
                            <td>
                                <div class="d-flex gap-2 justify-content-center">
                                    <span class="bg-success bg-opacity-10 text-success fs-13 fw-semibold py-1 px-2 rounded-1">Active</span>
                                </div>
                            </td>
                            <td>
                                <span>165</span>
                            </td>
                            <td>
                                <div class="dropdown action-opt">
                                    <button class="btn bg p-0" type="button" data-bs-toggle="dropdown" aria-expanded="false">
                                        <i data-feather="more-horizontal"></i>
                                    </button>
                                    <ul class="dropdown-menu dropdown-menu-end bg-white border box-shadow">
                                        <li>
                                            <a class="dropdown-item" href="javascript:;">
                                                <i data-feather="share-2"></i>
                                                Share
                                            </a>
                                        </li>
                                        <li>
                                            <a class="dropdown-item" href="javascript:;">
                                                <i data-feather="link-2"></i>
                                                Get Sharable Link
                                            </a>
                                        </li>
                                        <li>
                                            <a class="dropdown-item" href="javascript:;">
                                                <i data-feather="edit-3"></i>
                                                Rename
                                            </a>
                                        </li>
                                        <li>
                                            <a class="dropdown-item" href="javascript:;">
                                                <i data-feather="download"></i>
                                                Download
                                            </a>
                                        </li>
                                        <li>
                                            <a class="dropdown-item" href="javascript:;">
                                                <i data-feather="trash-2"></i>
                                                Remove
                                            </a>
                                        </li>
                                    </ul>
                                </div>
                            </td>
                        </tr>
                        <tr class="text-center">
                            <td class="text-start">
                                <div class="d-flex align-items-center">
                                    <div class="form-check pe-2">
                                        <input class="form-check-input" type="checkbox" value="" id="flexCheckDefault3">
                                    </div>
                                    <div class="d-flex align-items-center">
                                        <div class="flex-shrink-0 lh-1">
                                            <img src="assets/images/user-2.jpg" class="wh-44 rounded-circle" alt="user">
                                        </div>
                                        <div class="flex-grow-1 ms-10">
                                            <h4 class="fw-semibold fs-16 mb-0">Candice Munoz</h4>
                                            <span class="text-gray-light">@candicemunoz</span>
                                        </div>
                                    </div>
                                </div>
                            </td>
                            <td>
                                <a href="mailto:[email protected]">[email protected]</a>
                            </td>
                            <td>
                                <span>Administrator</span>
                            </td>
                            <td>
                                <span class="bg-success bg-opacity-10 text-success fs-13 fw-semibold py-1 px-2 rounded-1">Active</span>
                            </td>
                            <td>
                                <span>99</span>
                            </td>
                            <td>
                                <div class="dropdown action-opt">
                                    <button class="btn bg p-0" type="button" data-bs-toggle="dropdown" aria-expanded="false">
                                        <i data-feather="more-horizontal"></i>
                                    </button>
                                    <ul class="dropdown-menu dropdown-menu-end bg-white border box-shadow">
                                        <li>
                                            <a class="dropdown-item" href="javascript:;">
                                                <i data-feather="share-2"></i>
                                                Share
                                            </a>
                                        </li>
                                        <li>
                                            <a class="dropdown-item" href="javascript:;">
                                                <i data-feather="link-2"></i>
                                                Get Sharable Link
                                            </a>
                                        </li>
                                        <li>
                                            <a class="dropdown-item" href="javascript:;">
                                                <i data-feather="edit-3"></i>
                                                Rename
                                            </a>
                                        </li>
                                        <li>
                                            <a class="dropdown-item" href="javascript:;">
                                                <i data-feather="download"></i>
                                                Download
                                            </a>
                                        </li>
                                        <li>
                                            <a class="dropdown-item" href="javascript:;">
                                                <i data-feather="trash-2"></i>
                                                Remove
                                            </a>
                                        </li>
                                    </ul>
                                </div>
                            </td>
                        </tr>
                        <tr class="text-center">
                            <td class="text-start">
                                <div class="d-flex align-items-center">
                                    <div class="form-check pe-2">
                                        <input class="form-check-input" type="checkbox" value="" id="flexCheckDefault4">
                                    </div>
                                    <div class="d-flex align-items-center">
                                        <div class="flex-shrink-0 lh-1">
                                            <img src="assets/images/user-3.jpg" class="wh-44 rounded-circle" alt="user">
                                        </div>
                                        <div class="flex-grow-1 ms-10">
                                            <h4 class="fw-semibold fs-16 mb-0">Bernard Langley</h4>
                                            <span class="text-gray-light">@bernardlangley</span>
                                        </div>
                                    </div>
                                </div>
                            </td>
                            <td>
                                <a href="mailto:[email protected]">[email protected]</a>
                            </td>
                            <td>
                                <span>Contributor</span>
                            </td>
                            <td>
                                <span class="bg-success bg-opacity-10 text-success fs-13 fw-semibold py-1 px-2 rounded-1">Active</span>
                            </td>
                            <td>
                                <span>24</span>
                            </td>
                            <td>
                                <div class="dropdown action-opt">
                                    <button class="btn bg p-0" type="button" data-bs-toggle="dropdown" aria-expanded="false">
                                        <i data-feather="more-horizontal"></i>
                                    </button>
                                    <ul class="dropdown-menu dropdown-menu-end bg-white border box-shadow">
                                        <li>
                                            <a class="dropdown-item" href="javascript:;">
                                                <i data-feather="share-2"></i>
                                                Share
                                            </a>
                                        </li>
                                        <li>
                                            <a class="dropdown-item" href="javascript:;">
                                                <i data-feather="link-2"></i>
                                                Get Sharable Link
                                            </a>
                                        </li>
                                        <li>
                                            <a class="dropdown-item" href="javascript:;">
                                                <i data-feather="edit-3"></i>
                                                Rename
                                            </a>
                                        </li>
                                        <li>
                                            <a class="dropdown-item" href="javascript:;">
                                                <i data-feather="download"></i>
                                                Download
                                            </a>
                                        </li>
                                        <li>
                                            <a class="dropdown-item" href="javascript:;">
                                                <i data-feather="trash-2"></i>
                                                Remove
                                            </a>
                                        </li>
                                    </ul>
                                </div>
                            </td>
                        </tr>
                        <tr class="text-center">
                            <td class="text-start">
                                <div class="d-flex align-items-center">
                                    <div class="form-check pe-2">
                                        <input class="form-check-input" type="checkbox" value="" id="flexCheckDefault5">
                                    </div>
                                    <div class="d-flex align-items-center">
                                        <div class="flex-shrink-0 lh-1">
                                            <img src="assets/images/user-4.jpg" class="wh-44 rounded-circle" alt="user">
                                        </div>
                                        <div class="flex-grow-1 ms-10">
                                            <h4 class="fw-semibold fs-16 mb-0">Kristie Hall</h4>
                                            <span class="text-gray-light">@kristiehall</span>
                                        </div>
                                    </div>
                                </div>
                            </td>
                            <td>
                                <a href="mailto:[email protected]">[email protected]</a>
                            </td>
                            <td>
                                <span>Agent</span>
                            </td>
                            <td>
                                <span class="bg-success bg-opacity-10 text-success fs-13 fw-semibold py-1 px-2 rounded-1">Active</span>
                            </td>
                            <td>
                                <span>50</span>
                            </td>
                            <td>
                                <div class="dropdown action-opt">
                                    <button class="btn bg p-0" type="button" data-bs-toggle="dropdown" aria-expanded="false">
                                        <i data-feather="more-horizontal"></i>
                                    </button>
                                    <ul class="dropdown-menu dropdown-menu-end bg-white border box-shadow">
                                        <li>
                                            <a class="dropdown-item" href="javascript:;">
                                                <i data-feather="share-2"></i>
                                                Share
                                            </a>
                                        </li>
                                        <li>
                                            <a class="dropdown-item" href="javascript:;">
                                                <i data-feather="link-2"></i>
                                                Get Sharable Link
                                            </a>
                                        </li>
                                        <li>
                                            <a class="dropdown-item" href="javascript:;">
                                                <i data-feather="edit-3"></i>
                                                Rename
                                            </a>
                                        </li>
                                        <li>
                                            <a class="dropdown-item" href="javascript:;">
                                                <i data-feather="download"></i>
                                                Download
                                            </a>
                                        </li>
                                        <li>
                                            <a class="dropdown-item" href="javascript:;">
                                                <i data-feather="trash-2"></i>
                                                Remove
                                            </a>
                                        </li>
                                    </ul>
                                </div>
                            </td>
                        </tr>
                        <tr class="text-center">
                            <td class="text-start">
                                <div class="d-flex align-items-center">
                                    <div class="form-check pe-2">
                                        <input class="form-check-input" type="checkbox" value="" id="flexCheckDefault6">
                                    </div>
                                    <div class="d-flex align-items-center">
                                        <div class="flex-shrink-0 lh-1">
                                            <img src="assets/images/user-5.jpg" class="wh-44 rounded-circle" alt="user">
                                        </div>
                                        <div class="flex-grow-1 ms-10">
                                            <h4 class="fw-semibold fs-16 mb-0">Bolton Obrien</h4>
                                            <span class="text-gray-light">@boltonobrien</span>
                                        </div>
                                    </div>
                                </div>
                            </td>
                            <td>
                                <a href="mailto:[email protected]">[email protected]</a>
                            </td>
                            <td>
                                <span>Contributor</span>
                            </td>
                            <td>
                                <span class="bg-success bg-opacity-10 text-success fs-13 fw-semibold py-1 px-2 rounded-1">Active</span>
                            </td>
                            <td>
                                <span>34</span>
                            </td>
                            <td>
                                <div class="dropdown action-opt">
                                    <button class="btn bg p-0" type="button" data-bs-toggle="dropdown" aria-expanded="false">
                                        <i data-feather="more-horizontal"></i>
                                    </button>
                                    <ul class="dropdown-menu dropdown-menu-end bg-white border box-shadow">
                                        <li>
                                            <a class="dropdown-item" href="javascript:;">
                                                <i data-feather="share-2"></i>
                                                Share
                                            </a>
                                        </li>
                                        <li>
                                            <a class="dropdown-item" href="javascript:;">
                                                <i data-feather="link-2"></i>
                                                Get Sharable Link
                                            </a>
                                        </li>
                                        <li>
                                            <a class="dropdown-item" href="javascript:;">
                                                <i data-feather="edit-3"></i>
                                                Rename
                                            </a>
                                        </li>
                                        <li>
                                            <a class="dropdown-item" href="javascript:;">
                                                <i data-feather="download"></i>
                                                Download
                                            </a>
                                        </li>
                                        <li>
                                            <a class="dropdown-item" href="javascript:;">
                                                <i data-feather="trash-2"></i>
                                                Remove
                                            </a>
                                        </li>
                                    </ul>
                                </div>
                            </td>
                        </tr>
                        <tr class="text-center">
                            <td class="text-start">
                                <div class="d-flex align-items-center">
                                    <div class="form-check pe-2">
                                        <input class="form-check-input" type="checkbox" value="" id="flexCheckDefault7">
                                    </div>
                                    <div class="d-flex align-items-center">
                                        <div class="flex-shrink-0 lh-1">
                                            <img src="assets/images/user-6.jpg" class="wh-44 rounded-circle" alt="user">
                                        </div>
                                        <div class="flex-grow-1 ms-10">
                                            <h4 class="fw-semibold fs-16 mb-0">Dee Alvarado</h4>
                                            <span class="text-gray-light">@deealvarado</span>
                                        </div>
                                    </div>
                                </div>
                            </td>
                            <td>
                                <a href="mailto:[email protected]">[email protected]</a>
                            </td>
                            <td>
                                <span>Administrator</span>
                            </td>
                            <td>
                                <span class="bg-success bg-opacity-10 text-success fs-13 fw-semibold py-1 px-2 rounded-1">Active</span>
                            </td>
                            <td>
                                <span>99</span>
                            </td>
                            <td>
                                <div class="dropdown action-opt">
                                    <button class="btn bg p-0" type="button" data-bs-toggle="dropdown" aria-expanded="false">
                                        <i data-feather="more-horizontal"></i>
                                    </button>
                                    <ul class="dropdown-menu dropdown-menu-end bg-white border box-shadow">
                                        <li>
                                            <a class="dropdown-item" href="javascript:;">
                                                <i data-feather="share-2"></i>
                                                Share
                                            </a>
                                        </li>
                                        <li>
                                            <a class="dropdown-item" href="javascript:;">
                                                <i data-feather="link-2"></i>
                                                Get Sharable Link
                                            </a>
                                        </li>
                                        <li>
                                            <a class="dropdown-item" href="javascript:;">
                                                <i data-feather="edit-3"></i>
                                                Rename
                                            </a>
                                        </li>
                                        <li>
                                            <a class="dropdown-item" href="javascript:;">
                                                <i data-feather="download"></i>
                                                Download
                                            </a>
                                        </li>
                                        <li>
                                            <a class="dropdown-item" href="javascript:;">
                                                <i data-feather="trash-2"></i>
                                                Remove
                                            </a>
                                        </li>
                                    </ul>
                                </div>
                            </td>
                        </tr>
                        <tr class="text-center">
                            <td class="text-start">
                                <div class="d-flex align-items-center">
                                    <div class="form-check pe-2">
                                        <input class="form-check-input" type="checkbox" value="" id="flexCheckDefault8">
                                    </div>
                                    <div class="d-flex align-items-center">
                                        <div class="flex-shrink-0 lh-1">
                                            <img src="assets/images/user-7.jpg" class="wh-44 rounded-circle" alt="user">
                                        </div>
                                        <div class="flex-grow-1 ms-10">
                                            <h4 class="fw-semibold fs-16 mb-0">Cervantes Kramer</h4>
                                            <span class="text-gray-light">@cervanteskramer</span>
                                        </div>
                                    </div>
                                </div>
                            </td>
                            <td>
                                <a href="mailto:[email protected]">[email protected]</a>
                            </td>
                            <td>
                                <span>Agent</span>
                            </td>
                            <td>
                                <span class="bg-success bg-opacity-10 text-success fs-13 fw-semibold py-1 px-2 rounded-1">Active</span>
                            </td>
                            <td>
                                <span>24</span>
                            </td>
                            <td>
                                <div class="dropdown action-opt">
                                    <button class="btn bg p-0" type="button" data-bs-toggle="dropdown" aria-expanded="false">
                                        <i data-feather="more-horizontal"></i>
                                    </button>
                                    <ul class="dropdown-menu dropdown-menu-end bg-white border box-shadow">
                                        <li>
                                            <a class="dropdown-item" href="javascript:;">
                                                <i data-feather="share-2"></i>
                                                Share
                                            </a>
                                        </li>
                                        <li>
                                            <a class="dropdown-item" href="javascript:;">
                                                <i data-feather="link-2"></i>
                                                Get Sharable Link
                                            </a>
                                        </li>
                                        <li>
                                            <a class="dropdown-item" href="javascript:;">
                                                <i data-feather="edit-3"></i>
                                                Rename
                                            </a>
                                        </li>
                                        <li>
                                            <a class="dropdown-item" href="javascript:;">
                                                <i data-feather="download"></i>
                                                Download
                                            </a>
                                        </li>
                                        <li>
                                            <a class="dropdown-item" href="javascript:;">
                                                <i data-feather="trash-2"></i>
                                                Remove
                                            </a>
                                        </li>
                                    </ul>
                                </div>
                            </td>
                        </tr>
                        <tr class="text-center">
                            <td class="text-start">
                                <div class="d-flex align-items-center">
                                    <div class="form-check pe-2">
                                        <input class="form-check-input" type="checkbox" value="" id="flexCheckDefault9">
                                    </div>
                                    <div class="d-flex align-items-center">
                                        <div class="flex-shrink-0 lh-1">
                                            <img src="assets/images/user-8.jpg" class="wh-44 rounded-circle" alt="user">
                                        </div>
                                        <div class="flex-grow-1 ms-10">
                                            <h4 class="fw-semibold fs-16 mb-0">Dejesus Michael</h4>
                                            <span class="text-gray-light">@dejesusmichael</span>
                                        </div>
                                    </div>
                                </div>
                            </td>
                            <td>
                                <a href="mailto:[email protected]">[email protected]</a>
                            </td>
                            <td>
                                <span>Agent</span>
                            </td>
                            <td>
                                <span class="bg-danger bg-opacity-10 text-danger fs-13 fw-semibold py-1 px-2 rounded-1">Deactive</span>
                            </td>
                            <td>
                                <span>50</span>
                            </td>
                            <td>
                                <div class="dropdown action-opt">
                                    <button class="btn bg p-0" type="button" data-bs-toggle="dropdown" aria-expanded="false">
                                        <i data-feather="more-horizontal"></i>
                                    </button>
                                    <ul class="dropdown-menu dropdown-menu-end bg-white border box-shadow">
                                        <li>
                                            <a class="dropdown-item" href="javascript:;">
                                                <i data-feather="share-2"></i>
                                                Share
                                            </a>
                                        </li>
                                        <li>
                                            <a class="dropdown-item" href="javascript:;">
                                                <i data-feather="link-2"></i>
                                                Get Sharable Link
                                            </a>
                                        </li>
                                        <li>
                                            <a class="dropdown-item" href="javascript:;">
                                                <i data-feather="edit-3"></i>
                                                Rename
                                            </a>
                                        </li>
                                        <li>
                                            <a class="dropdown-item" href="javascript:;">
                                                <i data-feather="download"></i>
                                                Download
                                            </a>
                                        </li>
                                        <li>
                                            <a class="dropdown-item" href="javascript:;">
                                                <i data-feather="trash-2"></i>
                                                Remove
                                            </a>
                                        </li>
                                    </ul>
                                </div>
                            </td>
                        </tr>
                        <tr class="text-center">
                            <td class="text-start">
                                <div class="d-flex align-items-center">
                                    <div class="form-check pe-2">
                                        <input class="form-check-input" type="checkbox" value="" id="flexCheckDefault10">
                                    </div>
                                    <div class="d-flex align-items-center">
                                        <div class="flex-shrink-0 lh-1">
                                            <img src="assets/images/user-9.jpg" class="wh-44 rounded-circle" alt="user">
                                        </div>
                                        <div class="flex-grow-1 ms-10">
                                            <h4 class="fw-semibold fs-16 mb-0">Alissa Nelson</h4>
                                            <span class="text-gray-light">@alissanelson</span>
                                        </div>
                                    </div>
                                </div>
                            </td>
                            <td>
                                <a href="mailto:[email protected]">[email protected]</a>
                            </td>
                            <td>
                                <span>Contributor</span>
                            </td>
                            <td>
                                <span class="bg-danger bg-opacity-10 text-danger fs-13 fw-semibold py-1 px-2 rounded-1">Deactive</span>
                            </td>
                            <td>
                                <span>34</span>
                            </td>
                            <td>
                                <div class="dropdown action-opt">
                                    <button class="btn bg p-0" type="button" data-bs-toggle="dropdown" aria-expanded="false">
                                        <i data-feather="more-horizontal"></i>
                                    </button>
                                    <ul class="dropdown-menu dropdown-menu-end bg-white border box-shadow">
                                        <li>
                                            <a class="dropdown-item" href="javascript:;">
                                                <i data-feather="share-2"></i>
                                                Share
                                            </a>
                                        </li>
                                        <li>
                                            <a class="dropdown-item" href="javascript:;">
                                                <i data-feather="link-2"></i>
                                                Get Sharable Link
                                            </a>
                                        </li>
                                        <li>
                                            <a class="dropdown-item" href="javascript:;">
                                                <i data-feather="edit-3"></i>
                                                Rename
                                            </a>
                                        </li>
                                        <li>
                                            <a class="dropdown-item" href="javascript:;">
                                                <i data-feather="download"></i>
                                                Download
                                            </a>
                                        </li>
                                        <li>
                                            <a class="dropdown-item" href="javascript:;">
                                                <i data-feather="trash-2"></i>
                                                Remove
                                            </a>
                                        </li>
                                    </ul>
                                </div>
                            </td>
                        </tr>
                        <tr class="text-center">
                            <td class="text-start">
                                <div class="d-flex align-items-center">
                                    <div class="form-check pe-2">
                                        <input class="form-check-input" type="checkbox" value="" id="flexCheckDefault10">
                                    </div>
                                    <div class="d-flex align-items-center">
                                        <div class="flex-shrink-0 lh-1">
                                            <img src="assets/images/user-34.jpg" class="wh-44 rounded-circle" alt="user">
                                        </div>
                                        <div class="flex-grow-1 ms-10">
                                            <h4 class="fw-semibold fs-16 mb-0">Anne Nelson</h4>
                                            <span class="text-gray-light">@annenelson</span>
                                        </div>
                                    </div>
                                </div>
                            </td>
                            <td>
                                <a href="mailto:[email protected]">[email protected]</a>
                            </td>
                            <td>
                                <span>Agent</span>
                            </td>
                            <td>
                                <span class="bg-danger bg-opacity-10 text-danger fs-13 fw-semibold py-1 px-2 rounded-1">Deactive</span>
                            </td>
                            <td>
                                <span>34</span>
                            </td>
                            <td>
                                <div class="dropdown action-opt">
                                    <button class="btn bg p-0" type="button" data-bs-toggle="dropdown" aria-expanded="false">
                                        <i data-feather="more-horizontal"></i>
                                    </button>
                                    <ul class="dropdown-menu dropdown-menu-end bg-white border box-shadow">
                                        <li>
                                            <a class="dropdown-item" href="javascript:;">
                                                <i data-feather="share-2"></i>
                                                Share
                                            </a>
                                        </li>
                                        <li>
                                            <a class="dropdown-item" href="javascript:;">
                                                <i data-feather="link-2"></i>
                                                Get Sharable Link
                                            </a>
                                        </li>
                                        <li>
                                            <a class="dropdown-item" href="javascript:;">
                                                <i data-feather="edit-3"></i>
                                                Rename
                                            </a>
                                        </li>
                                        <li>
                                            <a class="dropdown-item" href="javascript:;">
                                                <i data-feather="download"></i>
                                                Download
                                            </a>
                                        </li>
                                        <li>
                                            <a class="dropdown-item" href="javascript:;">
                                                <i data-feather="trash-2"></i>
                                                Remove
                                            </a>
                                        </li>
                                    </ul>
                                </div>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <div class="d-sm-flex justify-content-between align-items-center text-center">
                <span class="fs-14">Showing 1 To 5 Of 20 Entries</span>
                <nav aria-label="Page navigation example">
                    <ul class="pagination mb-0 mt-3 mt-sm-0 justify-content-center">
                        <li class="page-item">
                            <a class="page-link icon" href="members-list.html" aria-label="Previous">
                                <i data-feather="arrow-left"></i>
                            </a>
                        </li>
                        <li class="page-item"><a class="page-link active" href="members-list.html">1</a></li>
                        <li class="page-item"><a class="page-link" href="members-list.html">2</a></li>
                        <li class="page-item"><a class="page-link" href="members-list.html">3</a></li>
                        <li class="page-item">
                            <a class="page-link icon" href="members-list.html" aria-label="Next">
                                <i data-feather="arrow-right"></i>
                            </a>
                        </li>
                    </ul>
                </nav>
            </div>
        </div>
    </div>
</div>
Order ID Product Customer Price Vendor Date Status Rating
#SK258 product-1
Laptop Macos Pro
Colin Firth $289.50 Boetic Fashion 2024-12-19 Pending 5.0 (61 Votes)
#AA257 product-2
Smart Camera XD6
Alina Smith $876.55 Camera 02-12-2024 Out of Stock 4.9 (55 Votes)
#BB256 product-3
Pixi 8 Wireless Airphone
James Andy $654.76 Wireless 03-12-2024 Delivered 5.0 (61 votes)
#CC255 product-4
Jebble Smart Watch
Sarah Taylor $654.99 Jebble 04-12-2024 Pending 5.0 (196 Votes)
#DD254 product-5
Smart Watch F8 Pro
David Warner $432.00 Watch 05-12-2024 Delivered 3.0 (54 Votes)
Showing 1 To 5 Of 20 Entries

<div class="card bg-white border-0 rounded-10 mb-4">
    <div class="card-body p-4">
        <div class="d-flex justify-content-between align-items-center border-bottom pb-20 mb-20">
            <h4 class="fw-bold fs-18 mb-0">Recent Orders</h4>
            <div class="dropdown action-opt">
                <button class="btn bg-transparent p-0" type="button" data-bs-toggle="dropdown" aria-expanded="false">
                    <i data-feather="more-horizontal"></i>
                </button>
                <ul class="dropdown-menu dropdown-menu-end bg-white border box-shadow">
                    <li>
                        <a class="dropdown-item" href="javascript:;">
                            <i data-feather="clock"></i>
                            Today
                        </a>
                    </li>
                    <li>
                        <a class="dropdown-item" href="javascript:;">
                            <i data-feather="pie-chart"></i>
                            Last 7 Days
                        </a>
                    </li>
                    <li>
                        <a class="dropdown-item" href="javascript:;">
                            <i data-feather="rotate-cw"></i>
                            Last Month
                        </a>
                    </li>
                    <li>
                        <a class="dropdown-item" href="javascript:;">
                            <i data-feather="calendar"></i>
                            Last 12 Months
                        </a>
                    </li>
                    <li>
                        <a class="dropdown-item" href="javascript:;">
                            <i data-feather="bar-chart"></i>
                            All Time
                        </a>
                    </li>
                    <li>
                        <a class="dropdown-item" href="javascript:;">
                            <i data-feather="eye"></i>
                            View
                        </a>
                    </li>
                    <li>
                        <a class="dropdown-item" href="javascript:;">
                            <i data-feather="trash"></i>
                            Delete
                        </a>
                    </li>
                </ul>
            </div>
        </div>
        <div class="default-table-area recent-orders">
            <div class="table-responsive">
                <table class="table align-middle">
                    <thead>
                        <tr>
                            <th scope="col" class="text-primary">Order ID</th>
                            <th scope="col">Product</th>
                            <th scope="col">Customer</th>
                            <th scope="col">Price</th>
                            <th scope="col">Vendor</th>
                            <th scope="col">Date</th>
                            <th scope="col">Status</th>
                            <th scope="col">Rating</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td class="fw-semibold">#SK258</td>
                            <td>
                                <a href="product-details.html" class="d-flex align-items-center">
                                    <img src="assets/images/product-1.jpg" class="wh-55 rounded-3" alt="product-1">
                                    <h6>Laptop Macos Pro</h6>
                                </a>
                            </td>
                            <td>Colin Firth</td>
                            <td>$289.50</td>
                            <td>Boetic Fashion</td>
                            <td>2024-12-19</td>
                            <td>
                                <span class="badge bg-primary bg-opacity-10 text-primary py-2 px-3 fw-semibold">Pending</span>
                            </td>
                            <td>5.0 (61 Votes)</td>
                        </tr>
                        <tr>
                            <td class="fw-semibold">#AA257</td>
                            <td>
                                <a href="product-details.html" class="d-flex align-items-center">
                                    <img src="assets/images/product-2.jpg" class="wh-55 rounded-3" alt="product-2">
                                    <h6>Smart Camera XD6</h6>
                                </a>
                            </td>
                            <td>Alina Smith</td>
                            <td>$876.55</td>
                            <td>Camera</td>
                            <td>02-12-2024</td>
                            <td>
                                <span class="badge bg-danger bg-opacity-10 text-danger py-2 px-3 fw-semibold">Out of Stock</span>
                            </td>
                            <td>4.9 (55 Votes)</td>
                        </tr>
                        <tr>
                            <td class="fw-semibold">#BB256</td>
                            <td>
                                <a href="product-details.html" class="d-flex align-items-center">
                                    <img src="assets/images/product-3.jpg" class="wh-55 rounded-3" alt="product-3">
                                    <h6>Pixi 8 Wireless Airphone</h6>
                                </a>
                            </td>
                            <td>James Andy</td>
                            <td>$654.76</td>
                            <td>Wireless</td>
                            <td>03-12-2024</td>
                            <td>
                                <span class="badge bg-success bg-opacity-10 text-success py-2 px-3 fw-semibold">Delivered</span>
                            </td>
                            <td>5.0 (61 votes)</td>
                        </tr>
                        <tr>
                            <td class="fw-semibold">#CC255</td>
                            <td>
                                <a href="product-details.html" class="d-flex align-items-center">
                                    <img src="assets/images/product-4.jpg" class="wh-55 rounded-3" alt="product-4">
                                    <h6>Jebble Smart Watch</h6>
                                </a>
                            </td>
                            <td>Sarah Taylor</td>
                            <td>$654.99</td>
                            <td>Jebble</td>
                            <td>04-12-2024</td>
                            <td>
                                <span class="badge bg-primary bg-opacity-10 text-primary py-2 px-3 fw-semibold">Pending</span>
                            </td>
                            <td>5.0 (196 Votes)</td>
                        </tr>
                        <tr>
                            <td class="fw-semibold">#DD254</td>
                            <td>
                                <a href="product-details.html" class="d-flex align-items-center">
                                    <img src="assets/images/product-5.jpg" class="wh-55 rounded-3" alt="product-5">
                                    <h6>Smart Watch F8 Pro</h6>
                                </a>
                            </td>
                            <td>David Warner</td>
                            <td>$432.00</td>
                            <td>Watch</td>
                            <td>05-12-2024</td>
                            <td>
                                <span class="badge bg-success bg-opacity-10 text-success py-2 px-3 fw-semibold">Delivered</span>
                            </td>
                            <td>3.0 (54 Votes)</td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <div class="d-sm-flex justify-content-between align-items-center text-center">
                <span class="fs-14">Showing 1 To 5 Of 20 Entries</span>
                <nav aria-label="Page navigation example">
                    <ul class="pagination mb-0 mt-3 mt-sm-0 justify-content-center">
                        <li class="page-item">
                            <a class="page-link icon" href="#" aria-label="Previous">
                                <i data-feather="arrow-left"></i>
                            </a>
                        </li>
                        <li class="page-item"><a class="page-link active" href="#">1</a></li>
                        <li class="page-item"><a class="page-link" href="#">2</a></li>
                        <li class="page-item"><a class="page-link" href="#">3</a></li>
                        <li class="page-item">
                            <a class="page-link icon" href="#" aria-label="Next">
                                <i data-feather="arrow-right"></i>
                            </a>
                        </li>
                    </ul>
                </nav>
            </div>
        </div>
    </div>
</div>
User Email Role Status
user-4

Lucile Young

@lyoung4a
[email protected]
Editor
Active
user-5

Jordan Stevenson

@jstevenson5c
[email protected]
Admin
Inactive
user-6

Francis Frank

@ffrank7e
[email protected]
Maintainer
Active
user-7

Phoebe Patterson

@ppatterson2g
[email protected]
Editor
Active
Showing 1 To 5 Of 20 Entries

<div class="row">
    <div class="col-xxl-8 col-xxxl-6">
        <div class="card bg-white border-0 rounded-10 mb-4">
            <div class="card-body p-4">
                <div class="d-flex justify-content-between align-items-center border-bottom pb-20 mb-20">
                    <h4 class="fw-bold fs-18 mb-0">Team Members List</h4>
                    <div class="dropdown action-opt">
                        <button class="btn bg-transparent p-0" type="button" data-bs-toggle="dropdown" aria-expanded="false">
                            <i data-feather="more-horizontal"></i>
                        </button>
                        <ul class="dropdown-menu dropdown-menu-end bg-white border box-shadow">
                            <li>
                                <a class="dropdown-item" href="javascript:;">
                                    <i data-feather="clock"></i>
                                    Today
                                </a>
                            </li>
                            <li>
                                <a class="dropdown-item" href="javascript:;">
                                    <i data-feather="pie-chart"></i>
                                    Last 7 Days
                                </a>
                            </li>
                            <li>
                                <a class="dropdown-item" href="javascript:;">
                                    <i data-feather="rotate-cw"></i>
                                    Last Month
                                </a>
                            </li>
                            <li>
                                <a class="dropdown-item" href="javascript:;">
                                    <i data-feather="calendar"></i>
                                    Last 1 Year
                                </a>
                            </li>
                            <li>
                                <a class="dropdown-item" href="javascript:;">
                                    <i data-feather="bar-chart"></i>
                                    All Time
                                </a>
                            </li>
                            <li>
                                <a class="dropdown-item" href="javascript:;">
                                    <i data-feather="eye"></i>
                                    View
                                </a>
                            </li>
                            <li>
                                <a class="dropdown-item" href="javascript:;">
                                    <i data-feather="trash"></i>
                                    Delete
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="default-table-area team-members-list">
                    <div class="table-responsive">
                        <table class="table align-middle">
                            <thead>
                                <tr>
                                    <th scope="col" class="text-primary">User</th>
                                    <th scope="col">Email</th>
                                    <th scope="col">Role</th>
                                    <th scope="col">Status</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>
                                        <div class="d-flex align-items-center">
                                            <div class="flex-shrink-0">
                                                <img src="assets/images/user-4.jpg" class="rounded-circle wh-44" alt="user-4">
                                            </div>
                                            <div class="flex-grow-1 ms-10">
                                                <h4 class="fw-semibold fs-16 mb-0">Lucile Young</h4>
                                                <span class="text-gray-light">@lyoung4a</span>
                                            </div>
                                        </div>
                                    </td>
                                    <td>[email protected]</td>
                                    <td>
                                        <div class="d-flex align-items-center">
                                            <i data-feather="edit-3"></i>
                                            <span>Editor</span>
                                        </div>
                                    </td>
                                    <td>
                                        <span class="badge bg-success bg-opacity-10 text-success py-2 px-3 fw-semibold">Active</span>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <div class="d-flex align-items-center">
                                            <div class="flex-shrink-0">
                                                <img src="assets/images/user-5.jpg" class="rounded-circle wh-44" alt="user-5">
                                            </div>
                                            <div class="flex-grow-1 ms-10">
                                                <h4 class="fw-semibold fs-16 mb-0">Jordan Stevenson</h4>
                                                <span class="text-gray-light">@jstevenson5c</span>
                                            </div>
                                        </div>
                                    </td>
                                    <td>[email protected]</td>
                                    <td>
                                        <div class="d-flex align-items-center admin">
                                            <i data-feather="monitor"></i>
                                            <span>Admin</span>
                                        </div>
                                    </td>
                                    <td>
                                        <span class="badge bg-danger bg-opacity-10 text-danger py-2 px-3 fw-semibold">Inactive</span>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <div class="d-flex align-items-center">
                                            <div class="flex-shrink-0">
                                                <img src="assets/images/user-6.jpg" class="rounded-circle wh-44" alt="user-6">
                                            </div>
                                            <div class="flex-grow-1 ms-10">
                                                <h4 class="fw-semibold fs-16 mb-0">Francis Frank</h4>
                                                <span class="text-gray-light">@ffrank7e</span>
                                            </div>
                                        </div>
                                    </td>
                                    <td>[email protected]</td>
                                    <td>
                                        <div class="d-flex align-items-center maintainer">
                                            <i data-feather="sliders"></i>
                                            <span>Maintainer</span>
                                        </div>
                                    </td>
                                    <td>
                                        <span class="badge bg-success bg-opacity-10 text-success py-2 px-3 fw-semibold">Active</span>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <div class="d-flex align-items-center">
                                            <div class="flex-shrink-0">
                                                <img src="assets/images/user-7.jpg" class="rounded-circle wh-44" alt="user-7">
                                            </div>
                                            <div class="flex-grow-1 ms-10">
                                                <h4 class="fw-semibold fs-16 mb-0">Phoebe Patterson</h4>
                                                <span class="text-gray-light">@ppatterson2g</span>
                                            </div>
                                        </div>
                                    </td>
                                    <td>[email protected]</td>
                                    <td>
                                        <div class="d-flex align-items-center">
                                            <i data-feather="settings"></i>
                                            <span>Editor</span>
                                        </div>
                                    </td>
                                    <td>
                                        <span class="badge bg-success bg-opacity-10 text-success py-2 px-3 fw-semibold">Active</span>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                    <div class="d-sm-flex justify-content-between align-items-center text-center">
                        <span class="fs-14">Showing 1 To 5 Of 20 Entries</span>
                        <nav aria-label="Page navigation example">
                            <ul class="pagination mb-0 mt-3 mt-sm-0 justify-content-center">
                                <li class="page-item">
                                    <a class="page-link icon" href="#" aria-label="Previous">
                                        <i data-feather="arrow-left"></i>
                                    </a>
                                </li>
                                <li class="page-item"><a class="page-link active" href="#">1</a></li>
                                <li class="page-item"><a class="page-link" href="#">2</a></li>
                                <li class="page-item"><a class="page-link" href="#">3</a></li>
                                <li class="page-item">
                                    <a class="page-link icon" href="#" aria-label="Next">
                                        <i data-feather="arrow-right"></i>
                                    </a>
                                </li>
                            </ul>
                        </nav>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-xxl-4 col-xxxl-6">
        <div class="card bg-white border-0 rounded-10 mb-4">
            <div class="card-body p-4">
                <div class="d-flex justify-content-between align-items-center border-bottom pb-20 mb-20">
                    <h4 class="fw-bold fs-18 mb-0">Best Selling Products</h4>
                    <div class="dropdown action-opt">
                        <button class="btn bg-transparent p-0" type="button" data-bs-toggle="dropdown" aria-expanded="false">
                            <i data-feather="more-horizontal"></i>
                        </button>
                        <ul class="dropdown-menu dropdown-menu-end bg-white border box-shadow">
                            <li>
                                <a class="dropdown-item" href="javascript:;">
                                    <i data-feather="clock"></i>
                                    Today
                                </a>
                            </li>
                            <li>
                                <a class="dropdown-item" href="javascript:;">
                                    <i data-feather="pie-chart"></i>
                                    Last 7 Days
                                </a>
                            </li>
                            <li>
                                <a class="dropdown-item" href="javascript:;">
                                    <i data-feather="rotate-cw"></i>
                                    Last Month
                                </a>
                            </li>
                            <li>
                                <a class="dropdown-item" href="javascript:;">
                                    <i data-feather="calendar"></i>
                                    Last 1 Year
                                </a>
                            </li>
                            <li>
                                <a class="dropdown-item" href="javascript:;">
                                    <i data-feather="bar-chart"></i>
                                    All Time
                                </a>
                            </li>
                            <li>
                                <a class="dropdown-item" href="javascript:;">
                                    <i data-feather="eye"></i>
                                    View
                                </a>
                            </li>
                            <li>
                                <a class="dropdown-item" href="javascript:;">
                                    <i data-feather="trash"></i>
                                    Delete
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>
                <ul class="ps-0 mb-0 list-unstyled max-h-406" data-simplebar>
                    <li class="border-bottom border-color-gray mb-3 pb-3">
                        <div class="d-sm-flex justify-content-between align-content-center">
                            <a href="product-details.html" class="d-flex align-items-center text-decoration-none">
                                <div class="flex-shrink-0">
                                    <img src="assets/images/product-6.jpg" class="rounded-3 wh-54" alt="product-6">
                                </div>
                                <div class="flex-grow-1 ms-10">
                                    <h4 class="fw-semibold fs-15 mb-0 text-body">Admas Airpod x-Zon</h4>
                                    <span class="text-primary fs-14">ID: A3652</span>
                                </div>
                            </a>
                            <div class="d-flex align-items-center mt-2 mt-sm-0">
                                <span>$289.50</span>
                                <span class="ms-4">10 <span class="text-gray-light">(1000)</span></span>
                                <span class=" fs-14 fw-semibold text-primary ms-4">Stock</span>
                            </div>
                        </div>
                    </li>
                    <li class="border-bottom border-color-gray mb-3 pb-3">
                        <div class="d-sm-flex justify-content-between align-content-center">
                            <a href="product-details.html" class="d-flex align-items-center text-decoration-none">
                                <div class="flex-shrink-0">
                                    <img src="assets/images/product-7.jpg" class="rounded-3 wh-54" alt="product-7">
                                </div>
                                <div class="flex-grow-1 ms-10">
                                    <h4 class="fw-semibold fs-15 mb-0 text-body">Smart Watch F8 Pro</h4>
                                    <span class="text-primary fs-14">ID: A3653</span>
                                </div>
                            </a>
                            <div class="d-flex align-items-center mt-2 mt-sm-0">
                                <span>$284.50</span>
                                <span class="ms-4">545 <span class="text-gray-light">(600)</span></span>
                                <span class=" fs-14 fw-semibold text-primary ms-4">Stock</span>
                            </div>
                        </div>
                    </li>
                    <li class="border-bottom border-color-gray mb-3 pb-3">
                        <div class="d-sm-flex justify-content-between align-content-center">
                            <a href="product-details.html" class="d-flex align-items-center text-decoration-none">
                                <div class="flex-shrink-0">
                                    <img src="assets/images/product-8.jpg" class="rounded-3 wh-54" alt="product-8">
                                </div>
                                <div class="flex-grow-1 ms-10">
                                    <h4 class="fw-semibold fs-15 mb-0 text-body">Nord Fold ZL</h4>
                                    <span class="text-primary fs-14">ID: A3658</span>
                                </div>
                            </a>
                            <div class="d-flex align-items-center mt-2 mt-sm-0">
                                <span>$283.50</span>
                                <span class="ms-4">99 <span class="text-gray-light">(199)</span></span>
                                <span class=" fs-14 fw-semibold text-primary ms-4">Stock</span>
                            </div>
                        </div>
                    </li>
                    <li class="border-bottom border-color-gray mb-3 pb-3">
                        <div class="d-sm-flex justify-content-between align-content-center">
                            <a href="product-details.html" class="d-flex align-items-center text-decoration-none">
                                <div class="flex-shrink-0">
                                    <img src="assets/images/product-9.jpg" class="rounded-3 wh-54" alt="product-9">
                                </div>
                                <div class="flex-grow-1 ms-10">
                                    <h4 class="fw-semibold fs-15 mb-0 text-body">Wall Clock Cimbina</h4>
                                    <span class="text-primary fs-14">ID: A3659</span>
                                </div>
                            </a>
                            <div class="d-flex align-items-center mt-2 mt-sm-0">
                                <span>$282.50</span>
                                <span class="ms-4">300 <span class="text-gray-light">(321)</span></span>
                                <span class=" fs-14 fw-semibold text-primary ms-4">Stock</span>
                            </div>
                        </div>
                    </li>
                    <li class="mb-1">
                        <div class="d-sm-flex justify-content-between align-content-center">
                            <a href="product-details.html" class="d-flex align-items-center text-decoration-none">
                                <div class="flex-shrink-0">
                                    <img src="assets/images/product-10.jpg" class="rounded-3 wh-54" alt="product-10">
                                </div>
                                <div class="flex-grow-1 ms-10">
                                    <h4 class="fw-semibold fs-15 mb-0 text-body">Galaxo T6 Munsun</h4>
                                    <span class="text-primary fs-14">ID: A3656</span>
                                </div>
                            </a>
                            <div class="d-flex align-items-center mt-2 mt-sm-0">
                                <span>$281.50</span>
                                <span class="ms-4">450 <span class="text-gray-light">(550)</span></span>
                                <span class=" fs-14 fw-semibold text-primary ms-4">Stock</span>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>
Course Result Start Time End Time
course

Node.js For Beginners: Go From Zero To Hero With Node.js

87% 19/02/2024 10:00 AM 19/02/2024 11:00 AM
course

Learn The Fundamentals Of Working With Angular And How To Create

Failed 18/02/2024 04:00 AM 18/02/2024 05:00 AM
course

Build An Ios Application In Swift Learn The Fundamentals

Passed 17/02/2024 05:00 PM 17/02/2024 06:00 PM
course

Programming Language Become A React Native Developer

95% 16/02/2024 12:00 PM 16/02/2024 01:00 PM
course

The Data Science Course 2024: Complete Data Science Bootcamp

Passed 15/02/2024 03:00 AM 15/02/2024 04:00 AM
course

Python for Finance: Investment Fundamentals & Data Analytics

Passed 16/02/2024 12:00 PM 16/02/2024 01:00 PM
Showing 1 To 5 Of 20 Entries
Course Result Start Time End Time
course

The Data Science Course 2024: Complete Data Science Bootcamp

Passed 19/02/2024 10:00 AM 19/02/2024 11:00 AM
course

Java Programming Masterclass for Software Developers

32% 18/02/2024 04:00 AM 18/02/2024 05:00 AM
course

Deep Learning A-Z™: Hands-On Artificial Neural Networks

Failed 17/02/2024 05:00 PM 17/02/2024 06:00 PM
course

Python for Finance: Investment Fundamentals & Data Analytics

Passed 16/02/2024 12:00 PM 16/02/2024 01:00 PM
course

Node.js for Beginners: Go From Zero to Hero with Node.js

87% 15/02/2024 03:00 AM 15/02/2024 04:00 AM
course

Learn The Fundamentals Of Working With Angular And How To Create

Failed 18/02/2024 04:00 AM 18/02/2024 05:00 AM
Showing 1 To 5 Of 20 Entries

<div class="card bg-white border-0 rounded-10 mb-4">
    <div class="card-body p-4">
        <div class="d-flex justify-content-between align-items-center border-bottom pb-20 mb-20">
            <ul class="nav nav-tabs border-0 courses-tab" id="myTab" role="tablist">
                <li class="nav-item" role="presentation">
                    <button class="nav-link fs-18 fw-semibold border-0 active" id="enrolled-tab" data-bs-toggle="tab" data-bs-target="#enrolled-tab-pane" type="button" role="tab" aria-controls="enrolled-tab-pane" aria-selected="true">Enrolled</button>
                </li>
                <li class="nav-item" role="presentation">
                    <button class="nav-link fs-18 fw-semibold border-0" id="created-tab" data-bs-toggle="tab" data-bs-target="#created-tab-pane" type="button" role="tab" aria-controls="created-tab-pane" aria-selected="false">Created</button>
                </li>
            </ul>
            <div class="dropdown action-opt">
                <button class="btn bg-transparent p-0" type="button" data-bs-toggle="dropdown" aria-expanded="false">
                    <i data-feather="more-horizontal"></i>
                </button>
                <ul class="dropdown-menu dropdown-menu-end bg-white border box-shadow">
                    <li>
                        <a class="dropdown-item" href="javascript:;">
                            <i data-feather="clock"></i>
                            Today
                        </a>
                    </li>
                    <li>
                        <a class="dropdown-item" href="javascript:;">
                            <i data-feather="pie-chart"></i>
                            Last 7 Days
                        </a>
                    </li>
                    <li>
                        <a class="dropdown-item" href="javascript:;">
                            <i data-feather="rotate-cw"></i>
                            Last Month
                        </a>
                    </li>
                    <li>
                        <a class="dropdown-item" href="javascript:;">
                            <i data-feather="calendar"></i>
                            Last 1 Year
                        </a>
                    </li>
                    <li>
                        <a class="dropdown-item" href="javascript:;">
                            <i data-feather="bar-chart"></i>
                            All Time
                        </a>
                    </li>
                    <li>
                        <a class="dropdown-item" href="javascript:;">
                            <i data-feather="eye"></i>
                            View
                        </a>
                    </li>
                    <li>
                        <a class="dropdown-item" href="javascript:;">
                            <i data-feather="trash"></i>
                            Delete
                        </a>
                    </li>
                </ul>
            </div>
        </div>
        <div class="tab-content" id="myTabContent">
            <div class="tab-pane fade show active" id="enrolled-tab-pane" role="tabpanel" aria-labelledby="enrolled-tab" tabindex="0">
                <div class="default-table-area course-list">
                    <div class="table-responsive">
                        <table class="table align-middle">
                            <thead>
                                <tr>
                                    <th scope="col" class="text-primary">Course</th>
                                    <th scope="col">Result</th>
                                    <th scope="col">Start Time</th>
                                    <th scope="col">End Time</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>
                                        <a href="course-details.html" class="d-flex align-items-center mw-380">
                                            <div class="flex-shrink-0">
                                                <img src="assets/images/course-1.jpg" class="rounded-3 wh-75" alt="course">
                                            </div>
                                            <div class="flex-grow-1 ms-3">
                                                <h4 class="fw-semibold fs-16 mb-0 lh-base hover">Node.js For Beginners: Go From Zero To Hero With Node.js</h4>
                                            </div>
                                        </a>
                                    </td>
                                    <td>
                                        <span class="badge bg-primary bg-opacity-10 text-primary py-2 px-3 fw-semibold">87%</span>
                                    </td>
                                    <td>
                                        <span class="d-block fs-15">19/02/2024</span>
                                        <span class="d-block fs-15">10:00 AM</span>
                                    </td>
                                    <td>
                                        <span class="d-block fs-15">19/02/2024</span>
                                        <span class="d-block fs-15">11:00 AM</span>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <a href="course-details.html" class="d-flex align-items-center mw-380">
                                            <div class="flex-shrink-0">
                                                <img src="assets/images/course-2.jpg" class="rounded-3 wh-75" alt="course">
                                            </div>
                                            <div class="flex-grow-1 ms-3">
                                                <h4class="fw-semibold fs-16 mb-0 lh-base hover">Learn The Fundamentals Of Working With Angular And How To Create</h4>
                                            </div>
                                        </a>
                                    </td>
                                    <td>
                                        <span class="badge bg-danger bg-opacity-10 text-danger py-2 px-3 fw-semibold">Failed</span>
                                    </td>
                                    <td>
                                        <span class="d-block fs-15">18/02/2024</span>
                                        <span class="d-block fs-15">04:00 AM</span>
                                    </td>
                                    <td>
                                        <span class="d-block fs-15">18/02/2024</span>
                                        <span class="d-block fs-15">05:00 AM</span>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <a href="course-details.html" class="d-flex align-items-center mw-380">
                                            <div class="flex-shrink-0">
                                                <img src="assets/images/course-3.jpg" class="rounded-3 wh-75" alt="course">
                                            </div>
                                            <div class="flex-grow-1 ms-3">
                                                <h4 class="fw-semibold fs-16 mb-0 lh-base hover">Build An Ios Application In Swift Learn The Fundamentals</h4>
                                            </div>
                                        </a>
                                    </td>
                                    <td>
                                        <span class="badge bg-success bg-opacity-10 text-success py-2 px-3 fw-semibold">Passed</span>
                                    </td>
                                    <td>
                                        <span class="d-block fs-15">17/02/2024</span>
                                        <span class="d-block fs-15">05:00 PM</span>
                                    </td>
                                    <td>
                                        <span class="d-block fs-15">17/02/2024</span>
                                        <span class="d-block fs-15">06:00 PM</span>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <a href="course-details.html" class="d-flex align-items-center mw-380">
                                            <div class="flex-shrink-0">
                                                <img src="assets/images/course-4.jpg" class="rounded-3 wh-75" alt="course">
                                            </div>
                                            <div class="flex-grow-1 ms-3">
                                                <h4 class="fw-semibold fs-16 mb-0 lh-base hover">Programming Language Become A React Native Developer</h4>
                                            </div>
                                        </a>
                                    </td>
                                    <td>
                                        <span class="badge bg-primary bg-opacity-10 text-primary py-2 px-3 fw-semibold">95%</span>
                                    </td>
                                    <td>
                                        <span class="d-block fs-15">16/02/2024</span>
                                        <span class="d-block fs-15">12:00 PM</span>
                                    </td>
                                    <td>
                                        <span class="d-block fs-15">16/02/2024</span>
                                        <span class="d-block fs-15">01:00 PM</span>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <a href="course-details.html" class="d-flex align-items-center mw-380">
                                            <div class="flex-shrink-0">
                                                <img src="assets/images/course-5.jpg" class="rounded-3 wh-75" alt="course">
                                            </div>
                                            <div class="flex-grow-1 ms-3">
                                                <h4 class="fw-semibold fs-16 mb-0 lh-base hover">The Data Science Course 2024: Complete Data Science Bootcamp</h4>
                                            </div>
                                        </a>
                                    </td>
                                    <td>
                                        <span class="badge bg-success bg-opacity-10 text-success py-2 px-3 fw-semibold">Passed</span>
                                    </td>
                                    <td>
                                        <span class="d-block fs-15">15/02/2024</span>
                                        <span class="d-block fs-15">03:00 AM</span>
                                    </td>
                                    <td>
                                        <span class="d-block fs-15">15/02/2024</span>
                                        <span class="d-block fs-15">04:00 AM</span>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <a href="course-details.html" class="d-flex align-items-center mw-380">
                                            <div class="flex-shrink-0">
                                                <img src="assets/images/course-8.jpg" class="rounded-3 wh-75" alt="course">
                                            </div>
                                            <div class="flex-grow-1 ms-3">
                                                <h4 class="fw-semibold fs-16 mb-0 lh-base hover">Python for Finance: Investment Fundamentals & Data Analytics</h4>
                                            </div>
                                        </a>
                                    </td>
                                    <td>
                                        <span class="badge bg-success bg-opacity-10 text-success py-2 px-3 fw-semibold">Passed</span>
                                    </td>
                                    <td>
                                        <span class="d-block fs-15">16/02/2024</span>
                                        <span class="d-block fs-15">12:00 PM</span>
                                    </td>
                                    <td>
                                        <span class="d-block fs-15">16/02/2024</span>
                                        <span class="d-block fs-15">01:00 PM</span>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                    <div class="d-sm-flex justify-content-between align-items-center text-center">
                        <span class="fs-14">Showing 1 To 5 Of 20 Entries</span>
                        <nav aria-label="Page navigation example">
                            <ul class="pagination mb-0 mt-3 mt-sm-0 justify-content-center">
                                <li class="page-item">
                                    <a class="page-link icon" href="#" aria-label="Previous">
                                        <i data-feather="arrow-left"></i>
                                    </a>
                                </li>
                                <li class="page-item"><a class="page-link active" href="#">1</a></li>
                                <li class="page-item"><a class="page-link" href="#">2</a></li>
                                <li class="page-item"><a class="page-link" href="#">3</a></li>
                                <li class="page-item">
                                    <a class="page-link icon" href="#" aria-label="Next">
                                        <i data-feather="arrow-right"></i>
                                    </a>
                                </li>
                            </ul>
                        </nav>
                    </div>
                </div>
            </div>
            <div class="tab-pane fade" id="created-tab-pane" role="tabpanel" aria-labelledby="created-tab" tabindex="0">
                <div class="default-table-area course-list">
                    <div class="table-responsive">
                        <table class="table align-middle">
                            <thead>
                                <tr>
                                    <th scope="col" class="text-primary">Course</th>
                                    <th scope="col">Result</th>
                                    <th scope="col">Start Time</th>
                                    <th scope="col">End Time</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>
                                        <a href="course-details.html" class="d-flex align-items-center mw-380">
                                            <div class="flex-shrink-0">
                                                <img src="assets/images/course-5.jpg" class="rounded-3 wh-75" alt="course">
                                            </div>
                                            <div class="flex-grow-1 ms-3">
                                                <h4 class="fw-semibold fs-16 mb-0 lh-base hover">The Data Science Course 2024: Complete Data Science Bootcamp</h4>
                                            </div>
                                        </a>
                                    </td>
                                    <td>
                                        <span class="badge bg-success bg-opacity-10 text-success py-2 px-3 fw-semibold">Passed</span>
                                    </td>
                                    <td>
                                        <span class="d-block fs-15">19/02/2024</span>
                                        <span class="d-block fs-15">10:00 AM</span>
                                    </td>
                                    <td>
                                        <span class="d-block fs-15">19/02/2024</span>
                                        <span class="d-block fs-15">11:00 AM</span>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <a href="course-details.html" class="d-flex align-items-center mw-380">
                                            <div class="flex-shrink-0">
                                                <img src="assets/images/course-6.jpg" class="rounded-3 wh-75" alt="course">
                                            </div>
                                            <div class="flex-grow-1 ms-3">
                                                <h4class="fw-semibold fs-16 mb-0 lh-base hover">Java Programming Masterclass for Software Developers</h4>
                                            </div>
                                        </a>
                                    </td>
                                    <td>
                                        <span class="badge bg-primary bg-opacity-10 text-primary py-2 px-3 fw-semibold">32%</span>
                                    </td>
                                    <td>
                                        <span class="d-block fs-15">18/02/2024</span>
                                        <span class="d-block fs-15">04:00 AM</span>
                                    </td>
                                    <td>
                                        <span class="d-block fs-15">18/02/2024</span>
                                        <span class="d-block fs-15">05:00 AM</span>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <a href="course-details.html" class="d-flex align-items-center mw-380">
                                            <div class="flex-shrink-0">
                                                <img src="assets/images/course-7.jpg" class="rounded-3 wh-75" alt="course">
                                            </div>
                                            <div class="flex-grow-1 ms-3">
                                                <h4 class="fw-semibold fs-16 mb-0 lh-base hover">Deep Learning A-Z™: Hands-On Artificial Neural Networks</h4>
                                            </div>
                                        </a>
                                    </td>
                                    <td>
                                        <span class="badge bg-danger bg-opacity-10 text-danger py-2 px-3 fw-semibold">Failed</span>
                                    </td>
                                    <td>
                                        <span class="d-block fs-15">17/02/2024</span>
                                        <span class="d-block fs-15">05:00 PM</span>
                                    </td>
                                    <td>
                                        <span class="d-block fs-15">17/02/2024</span>
                                        <span class="d-block fs-15">06:00 PM</span>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <a href="course-details.html" class="d-flex align-items-center mw-380">
                                            <div class="flex-shrink-0">
                                                <img src="assets/images/course-8.jpg" class="rounded-3 wh-75" alt="course">
                                            </div>
                                            <div class="flex-grow-1 ms-3">
                                                <h4 class="fw-semibold fs-16 mb-0 lh-base hover">Python for Finance: Investment Fundamentals & Data Analytics</h4>
                                            </div>
                                        </a>
                                    </td>
                                    <td>
                                        <span class="badge bg-success bg-opacity-10 text-success py-2 px-3 fw-semibold">Passed</span>
                                    </td>
                                    <td>
                                        <span class="d-block fs-15">16/02/2024</span>
                                        <span class="d-block fs-15">12:00 PM</span>
                                    </td>
                                    <td>
                                        <span class="d-block fs-15">16/02/2024</span>
                                        <span class="d-block fs-15">01:00 PM</span>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <a href="course-details.html" class="d-flex align-items-center mw-380">
                                            <div class="flex-shrink-0">
                                                <img src="assets/images/course-1.jpg" class="rounded-3 wh-75" alt="course">
                                            </div>
                                            <div class="flex-grow-1 ms-3">
                                                <h4 class="fw-semibold fs-16 mb-0 lh-base hover">Node.js for Beginners: Go From Zero to Hero with Node.js</h4>
                                            </div>
                                        </a>
                                    </td>
                                    <td>
                                        <span class="badge bg-primary bg-opacity-10 text-primary py-2 px-3 fw-semibold">87%</span>
                                    </td>
                                    <td>
                                        <span class="d-block fs-15">15/02/2024</span>
                                        <span class="d-block fs-15">03:00 AM</span>
                                    </td>
                                    <td>
                                        <span class="d-block fs-15">15/02/2024</span>
                                        <span class="d-block fs-15">04:00 AM</span>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <a href="course-details.html" class="d-flex align-items-center mw-380">
                                            <div class="flex-shrink-0">
                                                <img src="assets/images/course-2.jpg" class="rounded-3 wh-75" alt="course">
                                            </div>
                                            <div class="flex-grow-1 ms-3">
                                                <h4class="fw-semibold fs-16 mb-0 lh-base hover">Learn The Fundamentals Of Working With Angular And How To Create</h4>
                                            </div>
                                        </a>
                                    </td>
                                    <td>
                                        <span class="badge bg-danger bg-opacity-10 text-danger py-2 px-3 fw-semibold">Failed</span>
                                    </td>
                                    <td>
                                        <span class="d-block fs-15">18/02/2024</span>
                                        <span class="d-block fs-15">04:00 AM</span>
                                    </td>
                                    <td>
                                        <span class="d-block fs-15">18/02/2024</span>
                                        <span class="d-block fs-15">05:00 AM</span>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                    <div class="d-sm-flex justify-content-between align-items-center text-center">
                        <span class="fs-14">Showing 1 To 5 Of 20 Entries</span>
                        <nav aria-label="Page navigation example">
                            <ul class="pagination mb-0 mt-3 mt-sm-0 justify-content-center">
                                <li class="page-item">
                                    <a class="page-link icon" href="#" aria-label="Previous">
                                        <i data-feather="arrow-left"></i>
                                    </a>
                                </li>
                                <li class="page-item"><a class="page-link active" href="#">1</a></li>
                                <li class="page-item"><a class="page-link" href="#">2</a></li>
                                <li class="page-item"><a class="page-link" href="#">3</a></li>
                                <li class="page-item">
                                    <a class="page-link icon" href="#" aria-label="Next">
                                        <i data-feather="arrow-right"></i>
                                    </a>
                                </li>
                            </ul>
                        </nav>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Default Tables

# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

<table class="table">
    <thead>
        <tr>
            <th scope="col">#</th>
            <th scope="col">First</th>
            <th scope="col">Last</th>
            <th scope="col">Handle</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th scope="row">1</th>
            <td>Mark</td>
            <td>Otto</td>
            <td>@mdo</td>
        </tr>
        <tr>
            <th scope="row">2</th>
            <td>Jacob</td>
            <td>Thornton</td>
            <td>@fat</td>
        </tr>
        <tr>
            <th scope="row">3</th>
            <td colspan="2">Larry the Bird</td>
            <td>@twitter</td>
        </tr>
    </tbody>
</table>

Dark Tables

# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

<table class="table table-dark table-striped">
    <thead>
        <tr>
            <th scope="col">#</th>
            <th scope="col">First</th>
            <th scope="col">Last</th>
            <th scope="col">Handle</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th scope="row">1</th>
            <td>Mark</td>
            <td>Otto</td>
            <td>@mdo</td>
        </tr>
        <tr>
            <th scope="row">2</th>
            <td>Jacob</td>
            <td>Thornton</td>
            <td>@fat</td>
        </tr>
        <tr>
            <th scope="row">3</th>
            <td colspan="2">Larry the Bird</td>
            <td>@twitter</td>
        </tr>
    </tbody>
</table>

Hoverable Rows Tables

# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

<table class="table table-hover">
    <thead>
        <tr>
            <th scope="col">#</th>
            <th scope="col">First</th>
            <th scope="col">Last</th>
            <th scope="col">Handle</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th scope="row">1</th>
            <td>Mark</td>
            <td>Otto</td>
            <td>@mdo</td>
        </tr>
        <tr>
            <th scope="row">2</th>
            <td>Jacob</td>
            <td>Thornton</td>
            <td>@fat</td>
        </tr>
        <tr>
            <th scope="row">3</th>
            <td colspan="2">Larry the Bird</td>
            <td>@twitter</td>
        </tr>
    </tbody>
</table>

Hoverable Rows Tables

# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

<table class="table table-bordered">
    <thead>
        <tr>
            <th scope="col" class="bg-white">#</th>
            <th scope="col" class="bg-white">First</th>
            <th scope="col" class="bg-white">Last</th>
            <th scope="col" class="bg-white">Handle</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th class="bg-white" scope="row">1</th>
            <td class="bg-white">Mark</td>
            <td class="bg-white">Otto</td>
            <td class="bg-white">@mdo</td>
        </tr>
        <tr>
            <th class="bg-white" scope="row">2</th>
            <td class="bg-white">Jacob</td>
            <td class="bg-white">Thornton</td>
            <td class="bg-white">@fat</td>
        </tr>
        <tr>
            <th class="bg-white" scope="row">3</th>
            <td class="bg-white" colspan="2">Larry the Bird</td>
            <td class="bg-white">@twitter</td>
        </tr>
    </tbody>
</table>