@extends('layouts.master')

@section('styles')

@endsection

@section('content')

                    <div class="content">

                        <!-- Start::main-content -->
                        <div class="main-content">

                            <!-- Page Header -->
                            <div class="block justify-between page-header sm:flex">
                                <div>
                                    <h3 class="text-gray-700 hover:text-gray-900 dark:text-white dark:hover:text-white text-2xl font-medium">Basic Tables</h3>
                                </div>
                                <ol class="flex items-center whitespace-nowrap min-w-0">
                                    <li class="text-sm">
                                    <a class="flex items-center font-semibold text-primary hover:text-primary dark:text-primary truncate" href="javascript:void(0);">
                                    Basic Ui
                                        <i class="ti ti-chevrons-right flex-shrink-0 mx-3 overflow-visible text-gray-300 dark:text-gray-300 rtl:rotate-180"></i>
                                    </a>
                                    </li>
                                    <li class="text-sm text-gray-500 hover:text-primary dark:text-white/70 " aria-current="page">
                                    Basic Tables
                                    </li>
                                </ol>
                            </div>
                            <!-- Page Header Close -->

                            <!-- Start::row-1 -->
                            <div class="grid grid-cols-12 gap-6">
                            <div class="col-span-12 lg:col-span-6">
                                <div class="box">
                                <div class="box-header">
                                    <h5 class="box-title">Default Table</h5>
                                </div>
                                <div class="box-body p-0">
                                    <div class="overflow-auto">
                                    <table class="ti-custom-table ti-custom-table-head">
                                        <thead>
                                        <tr>
                                            <th scope="col">Name</th>
                                            <th scope="col">Age</th>
                                            <th scope="col">Address</th>
                                            <th scope="col" class="!text-end">Action</th>
                                        </tr>
                                        </thead>
                                        <tbody>
                                        <tr>
                                            <td class="font-medium">John Brown</td>
                                            <td>45</td>
                                            <td>New York No. 1 Lake Park</td>
                                            <td class="!text-end font-medium">
                                            <a class="text-primary hover:text-primary" href="javascript:void(0);">Delete</a>
                                            </td>
                                        </tr>

                                        <tr>
                                            <td class="font-medium">Jim Green</td>
                                            <td>27</td>
                                            <td>London No. 1 Lake Park</td>
                                            <td class="!text-end font-medium">
                                            <a class="text-primary hover:text-primary" href="javascript:void(0);">Delete</a>
                                            </td>
                                        </tr>

                                        <tr>
                                            <td class="font-medium">Joe Black</td>
                                            <td>31</td>
                                            <td>Sidney No. 1 Lake Park</td>
                                            <td class="!text-end font-medium">
                                            <a class="text-primary hover:text-primary" href="javascript:void(0);">Delete</a>
                                            </td>
                                        </tr>

                                        <tr>
                                            <td class="font-medium">Edward King</td>
                                            <td>16</td>
                                            <td>LA No. 1 Lake Park</td>
                                            <td class="text-end font-medium">
                                            <a class="text-primary hover:text-primary" href="javascript:void(0);">Delete</a>
                                            </td>
                                        </tr>

                                        <tr>
                                            <td class="font-medium">Jim Red</td>
                                            <td>45</td>
                                            <td>Melbourne No. 1 Lake Park</td>
                                            <td class="text-end font-medium">
                                            <a class="text-primary hover:text-primary" href="javascript:void(0);">Delete</a>
                                            </td>
                                        </tr>
                                        </tbody>
                                    </table>
                                    </div>
                                </div>
                                </div>
                            </div>
                            <div class="col-span-12 lg:col-span-6">
                                <div class="box">
                                <div class="box-header">
                                    <h5 class="box-title">Striped Table</h5>
                                </div>
                                <div class="box-body p-0">
                                    <div class="overflow-auto">
                                    <table class="ti-custom-table ti-custom-table-head ti-striped-table">
                                        <thead>
                                        <tr>
                                            <th scope="col">Name</th>
                                            <th scope="col">Age</th>
                                            <th scope="col">Address</th>
                                            <th scope="col" class="!text-end">Action</th>
                                        </tr>
                                        </thead>
                                        <tbody>
                                        <tr>
                                            <td class="font-medium">John Brown</td>
                                            <td>45</td>
                                            <td>New York No. 1 Lake Park</td>
                                            <td class="text-end font-medium">
                                            <a class="text-primary hover:text-primary" href="javascript:void(0);">Delete</a>
                                            </td>
                                        </tr>

                                        <tr>
                                            <td class="font-medium">Jim Green</td>
                                            <td>27</td>
                                            <td>London No. 1 Lake Park</td>
                                            <td class="text-end font-medium">
                                            <a class="text-primary hover:text-primary" href="javascript:void(0);">Delete</a>
                                            </td>
                                        </tr>

                                        <tr>
                                            <td class="font-medium">Joe Black</td>
                                            <td>31</td>
                                            <td>Sidney No. 1 Lake Park</td>
                                            <td class="text-end font-medium">
                                            <a class="text-primary hover:text-primary" href="javascript:void(0);">Delete</a>
                                            </td>
                                        </tr>

                                        <tr>
                                            <td class="font-medium">Edward King</td>
                                            <td>16</td>
                                            <td>LA No. 1 Lake Park</td>
                                            <td class="text-end font-medium">
                                            <a class="text-primary hover:text-primary" href="javascript:void(0);">Delete</a>
                                            </td>
                                        </tr>

                                        <tr>
                                            <td class="font-medium">Jim Red</td>
                                            <td>45</td>
                                            <td>Melbourne No. 1 Lake Park</td>
                                            <td class="text-end font-medium">
                                            <a class="text-primary hover:text-primary" href="javascript:void(0);">Delete</a>
                                            </td>
                                        </tr>
                                        </tbody>
                                    </table>
                                    </div>
                                </div>
                                </div>
                            </div>
                            </div>
                            <!-- End::row-1 -->

                            <!-- Start::row-2 -->
                            <div class="grid grid-cols-12 gap-6">
                                <div class="col-span-12 lg:col-span-6">
                                <div class="box">
                                    <div class="box-header">
                                        <h5 class="box-title">Hovarable Table</h5>
                                    </div>
                                    <div class="box-body p-0">
                                    <div class="overflow-auto">
                                        <table class="ti-custom-table ti-custom-table-head ti-custom-table-hover">
                                        <thead>
                                            <tr>
                                            <th scope="col">Name</th>
                                            <th scope="col">Age</th>
                                            <th scope="col">Address</th>
                                            <th scope="col" class="!text-end">Action</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr>
                                            <td class="font-medium">John Brown</td>
                                            <td>45</td>
                                            <td>New York No. 1 Lake Park</td>
                                            <td class="text-end font-medium">
                                                <a class="text-primary hover:text-primary" href="javascript:void(0);">Delete</a>
                                            </td>
                                            </tr>

                                            <tr>
                                            <td class="font-medium">Jim Green</td>
                                            <td>27</td>
                                            <td>London No. 1 Lake Park</td>
                                            <td class="text-end font-medium">
                                                <a class="text-primary hover:text-primary" href="javascript:void(0);">Delete</a>
                                            </td>
                                            </tr>

                                            <tr>
                                            <td class="font-medium">Joe Black</td>
                                            <td>31</td>
                                            <td>Sidney No. 1 Lake Park</td>
                                            <td class="text-end font-medium">
                                                <a class="text-primary hover:text-primary" href="javascript:void(0);">Delete</a>
                                            </td>
                                            </tr>

                                            <tr>
                                            <td class="font-medium">Edward King</td>
                                            <td>16</td>
                                            <td>LA No. 1 Lake Park</td>
                                            <td class="text-end font-medium">
                                                <a class="text-primary hover:text-primary" href="javascript:void(0);">Delete</a>
                                            </td>
                                            </tr>

                                            <tr>
                                            <td class="font-medium">Jim Red</td>
                                            <td>45</td>
                                            <td>Melbourne No. 1 Lake Park</td>
                                            <td class="text-end font-medium">
                                                <a class="text-primary hover:text-primary" href="javascript:void(0);">Delete</a>
                                            </td>
                                            </tr>
                                        </tbody>
                                        </table>
                                    </div>
                                    </div>
                                </div>
                                </div>
                                <div class="col-span-12 lg:col-span-6">
                                    <div class="box">
                                        <div class="box-header">
                                            <h5 class="box-title">Hoverable with Striped Table</h5>
                                        </div>
                                        <div class="box-body p-0">
                                        <div class="overflow-auto">
                                            <table class="ti-custom-table ti-custom-table-head ti-striped-table ti-custom-table-hover">
                                            <thead>
                                                <tr>
                                                <th scope="col">Name</th>
                                                <th scope="col">Age</th>
                                                <th scope="col">Address</th>
                                                <th scope="col" class="!text-end">Action</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                <tr>
                                                <td class="font-medium">John Brown</td>
                                                <td>45</td>
                                                <td>New York No. 1 Lake Park</td>
                                                <td class="text-end font-medium">
                                                    <a class="text-primary hover:text-primary" href="javascript:void(0);">Delete</a>
                                                </td>
                                                </tr>

                                                <tr>
                                                <td class="font-medium">Jim Green</td>
                                                <td>27</td>
                                                <td>London No. 1 Lake Park</td>
                                                <td class="text-end font-medium">
                                                    <a class="text-primary hover:text-primary" href="javascript:void(0);">Delete</a>
                                                </td>
                                                </tr>

                                                <tr>
                                                <td class="font-medium">Joe Black</td>
                                                <td>31</td>
                                                <td>Sidney No. 1 Lake Park</td>
                                                <td class="text-end font-medium">
                                                    <a class="text-primary hover:text-primary" href="javascript:void(0);">Delete</a>
                                                </td>
                                                </tr>

                                                <tr>
                                                <td class="font-medium">Edward King</td>
                                                <td>16</td>
                                                <td>LA No. 1 Lake Park</td>
                                                <td class="text-end font-medium">
                                                    <a class="text-primary hover:text-primary" href="javascript:void(0);">Delete</a>
                                                </td>
                                                </tr>

                                                <tr>
                                                <td class="font-medium">Jim Red</td>
                                                <td>45</td>
                                                <td>Melbourne No. 1 Lake Park</td>
                                                <td class="text-end font-medium">
                                                    <a class="text-primary hover:text-primary" href="javascript:void(0);">Delete</a>
                                                </td>
                                                </tr>
                                            </tbody>
                                            </table>
                                        </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- End::row-2-->

                            <!-- Start::row-3 -->
                            <div class="grid grid-cols-12 gap-6">
                            <div class="col-span-12 lg:col-span-6">
                                <div class="box overflow-auto">
                                <div class="box-header">
                                    <h5 class="box-title">Higlighted Table</h5>
                                </div>
                                <div class="box-body p-0">
                                    <div class="overflow-auto">
                                    <table class="ti-custom-table ti-custom-table-head">
                                        <thead>
                                        <tr>
                                            <th scope="col">Name</th>
                                            <th scope="col">Age</th>
                                            <th scope="col">Address</th>
                                            <th scope="col" class="!text-end">Action</th>
                                        </tr>
                                        </thead>
                                        <tbody>
                                        <tr>
                                            <td class="bg-primary font-medium dark:!text-white !text-white">John Brown</td>
                                            <td>45</td>
                                            <td>New York No. 1 Lake Park</td>
                                            <td class="text-end font-medium">
                                            <a class="text-primary hover:text-primary" href="javascript:void(0);">Delete</a>
                                            </td>
                                        </tr>

                                        <tr>
                                            <td class="font-medium">Jim Green</td>
                                            <td class="bg-orange-500 dark:!text-white !text-white">27</td>
                                            <td>London No. 1 Lake Park</td>
                                            <td class="text-end font-medium">
                                            <a class="text-primary hover:text-primary" href="javascript:void(0);">Delete</a>
                                            </td>
                                        </tr>

                                        <tr>
                                            <td class="bg-red-500 font-medium dark:!text-white !text-white">Joe Black</td>
                                            <td class="bg-primary dark:!text-white !text-white">31</td>
                                            <td class="bg-primary dark:!text-white !text-white">Sidney No. 1 Lake Park</td>
                                            <td class="text-end font-medium">
                                            <a class="text-primary hover:text-primary" href="javascript:void(0);">Delete</a>
                                            </td>
                                        </tr>
                                        </tbody>
                                    </table>
                                    </div>
                                </div>
                                </div>
                            </div>
                            <div class="col-span-12 lg:col-span-6">
                                <div class="box">
                                <div class="box-header">
                                    <h5 class="box-title">Bordered Table</h5>
                                </div>
                                <div class="box-body">
                                    <div class="overflow-auto table-bordered rounded-sm ">
                                        <table class="ti-custom-table ti-custom-table-head">
                                        <thead>
                                            <tr>
                                            <th scope="col">Name</th>
                                            <th scope="col">Age</th>
                                            <th scope="col">Address</th>
                                            <th scope="col" class="!text-end">Action</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr>
                                            <td class="font-medium">John Brown</td>
                                            <td>45</td>
                                            <td>New York No. 1 Lake Park</td>
                                            <td class="text-end font-medium">
                                                <a class="text-primary hover:text-primary" href="javascript:void(0);">Delete</a>
                                            </td>
                                            </tr>

                                            <tr>
                                            <td class="font-medium">Jim Green</td>
                                            <td>27</td>
                                            <td>London No. 1 Lake Park</td>
                                            <td class="text-end font-medium">
                                                <a class="text-primary hover:text-primary" href="javascript:void(0);">Delete</a>
                                            </td>
                                            </tr>

                                            <tr>
                                            <td class="font-medium">Joe Black</td>
                                            <td>31</td>
                                            <td>Sidney No. 1 Lake Park</td>
                                            <td class="text-end font-medium">
                                                <a class="text-primary hover:text-primary" href="javascript:void(0);">Delete</a>
                                            </td>
                                            </tr>
                                        </tbody>
                                        </table>
                                    </div>
                                </div>
                                </div>
                            </div>
                            </div>
                            <!-- End::row-3-->

                            <!-- Start::row-4 -->
                            <div class="grid grid-cols-12 gap-6">
                            <div class="col-span-12 lg:col-span-6">
                                <div class="box">
                                <div class="box-header">
                                    <h5 class="box-title">Tables Without Borders</h5>
                                </div>
                                <div class="box-body p-0">
                                    <div class="overflow-auto">
                                    <table class="ti-custom-table">
                                        <thead>
                                        <tr>
                                            <th scope="col">Name</th>
                                            <th scope="col">Age</th>
                                            <th scope="col">Address</th>
                                            <th scope="col" class="!text-end">Action</th>
                                        </tr>
                                        </thead>
                                        <tbody>
                                        <tr>
                                            <td class="font-medium">John Brown</td>
                                            <td>45</td>
                                            <td>New York No. 1 Lake Park</td>
                                            <td class="text-end font-medium">
                                            <a class="text-primary hover:text-primary" href="javascript:void(0);">Delete</a>
                                            </td>
                                        </tr>

                                        <tr>
                                            <td class="font-medium">Jim Green</td>
                                            <td>27</td>
                                            <td>London No. 1 Lake Park</td>
                                            <td class="text-end font-medium">
                                            <a class="text-primary hover:text-primary" href="javascript:void(0);">Delete</a>
                                            </td>
                                        </tr>

                                        <tr>
                                            <td class="font-medium">Joe Black</td>
                                            <td>31</td>
                                            <td>Sidney No. 1 Lake Park</td>
                                            <td class="text-end font-medium">
                                            <a class="text-primary hover:text-primary" href="javascript:void(0);">Delete</a>
                                            </td>
                                        </tr>
                                        </tbody>
                                    </table>
                                    </div>
                                </div>
                                </div>
                            </div>
                            <div class="col-span-12 lg:col-span-6">
                                <div class="box">
                                <div class="box-header">
                                    <h5 class="box-title">Rounded Tables</h5>
                                </div>
                                <div class="box-body">
                                    <div class="table-bordered rounded-sm overflow-auto">
                                    <table class="ti-custom-table ti-custom-table-head">
                                        <thead>
                                        <tr>
                                            <th scope="col">Name</th>
                                            <th scope="col">Age</th>
                                            <th scope="col">Address</th>
                                            <th scope="col" class="!text-end">Action</th>
                                        </tr>
                                        </thead>
                                        <tbody>
                                        <tr>
                                            <td class="font-medium">John Brown</td>
                                            <td>45</td>
                                            <td>New York No. 1 Lake Park</td>
                                            <td class="text-end font-medium">
                                            <a class="text-primary hover:text-primary" href="javascript:void(0);">Delete</a>
                                            </td>
                                        </tr>

                                        <tr>
                                            <td class="font-medium">Jim Green</td>
                                            <td>27</td>
                                            <td>London No. 1 Lake Park</td>
                                            <td class="text-end font-medium">
                                            <a class="text-primary hover:text-primary" href="javascript:void(0);">Delete</a>
                                            </td>
                                        </tr>

                                        <tr>
                                            <td class="font-medium">Joe Black</td>
                                            <td>31</td>
                                            <td>Sidney No. 1 Lake Park</td>
                                            <td class="text-end font-medium">
                                            <a class="text-primary hover:text-primary" href="javascript:void(0);">Delete</a>
                                            </td>
                                        </tr>
                                        </tbody>
                                    </table>
                                    </div>
                                </div>
                                </div>
                            </div>
                            </div>
                            <!-- End::row-4-->

                            <!-- Start::row-5 -->
                            <div class="grid grid-cols-12 gap-6">
                            <div class="col-span-12 lg:col-span-6">
                                <div class="box">
                                <div class="box-header">
                                    <h5 class="box-title">Table Thead Horizontally Divided</h5>
                                </div>
                                <div class="box-body">
                                    <div class="table-bordered rounded-sm shadow overflow-auto dark:shadow-white/10">
                                    <table class="ti-custom-table ti-custom-table-head">
                                        <thead>
                                        <tr class="">
                                            <th scope="col">Name</th>
                                            <th scope="col">Age</th>
                                            <th scope="col">Address</th>
                                            <th scope="col" class="!text-end">Action</th>
                                        </tr>
                                        </thead>
                                        <tbody>
                                        <tr>
                                            <td class="font-medium">John Brown</td>
                                            <td>45</td>
                                            <td>New York No. 1 Lake Park</td>
                                            <td class="text-end font-medium">
                                            <a class="text-primary hover:text-primary" href="javascript:void(0);">Delete</a>
                                            </td>
                                        </tr>

                                        <tr>
                                            <td class="font-medium">Jim Green</td>
                                            <td>27</td>
                                            <td>London No. 1 Lake Park</td>
                                            <td class="text-end font-medium">
                                            <a class="text-primary hover:text-primary" href="javascript:void(0);">Delete</a>
                                            </td>
                                        </tr>

                                        <tr>
                                            <td class="font-medium">Joe Black</td>
                                            <td>31</td>
                                            <td>Sidney No. 1 Lake Park</td>
                                            <td class="text-end font-medium">
                                            <a class="text-primary hover:text-primary" href="javascript:void(0);">Delete</a>
                                            </td>
                                        </tr>
                                        </tbody>
                                    </table>
                                    </div>
                                </div>
                                </div>
                            </div>
                            <div class="col-span-12 lg:col-span-6">
                                <div class="box">
                                    <div class="box-header">
                                        <h5 class="box-title">Header In Gray Color</h5>
                                    </div>
                                    <div class="box-body">
                                    <div class="table-bordered rounded-sm overflow-auto">
                                        <table class="ti-custom-table ti-custom-table-head">
                                        <thead class="bg-gray-100 dark:bg-black/20">
                                            <tr>
                                            <th scope="col" class="dark:text-white/70">Name</th>
                                            <th scope="col" class="dark:text-white/70">Age</th>
                                            <th scope="col" class="dark:text-white/70">Address</th>
                                            <th scope="col" class="!text-end dark:text-white/70">Action</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr>
                                            <td class="font-medium">John Brown</td>
                                            <td>45</td>
                                            <td>New York No. 1 Lake Park</td>
                                            <td class="text-end font-medium">
                                                <a class="text-primary hover:text-primary" href="javascript:void(0);">Delete</a>
                                            </td>
                                            </tr>

                                            <tr>
                                            <td class="font-medium">Jim Green</td>
                                            <td>27</td>
                                            <td>London No. 1 Lake Park</td>
                                            <td class="text-end font-medium">
                                                <a class="text-primary hover:text-primary" href="javascript:void(0);">Delete</a>
                                            </td>
                                            </tr>

                                            <tr>
                                            <td class="font-medium">Joe Black</td>
                                            <td>31</td>
                                            <td>Sidney No. 1 Lake Park</td>
                                            <td class="text-end font-medium">
                                                <a class="text-primary hover:text-primary" href="javascript:void(0);">Delete</a>
                                            </td>
                                            </tr>
                                        </tbody>
                                        </table>
                                    </div>
                                    </div>
                                </div>
                            </div>
                            </div>
                            <!-- End::row-5-->

                            <!-- Start::row-6 -->
                            <div class="grid grid-cols-12 gap-6">
                            <div class="col-span-12 lg:col-span-6">
                                <div class="box">
                                    <div class="box-header">
                                        <h5 class="box-title">Tables Without Borders With Shadow</h5>
                                    </div>
                                    <div class="box-body">
                                    <div class="table-bordered rounded-sm shadow overflow-auto dark:shadow-white/10">
                                        <table class="ti-custom-table ti-custom-table-head">
                                        <thead class="bg-gray-100 dark:bg-black/20">
                                            <tr>
                                            <th scope="col" class="dark:text-white/70">Name</th>
                                            <th scope="col" class="dark:text-white/70">Age</th>
                                            <th scope="col" class="dark:text-white/70">Address</th>
                                            <th scope="col" class="!text-end dark:text-white/70">Action</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr>
                                            <td class="font-medium">John Brown</td>
                                            <td>45</td>
                                            <td>New York No. 1 Lake Park</td>
                                            <td class="text-end font-medium">
                                                <a class="text-primary hover:text-primary" href="javascript:void(0);">Delete</a>
                                            </td>
                                            </tr>

                                            <tr>
                                            <td class="font-medium">Jim Green</td>
                                            <td>27</td>
                                            <td>London No. 1 Lake Park</td>
                                            <td class="text-end font-medium">
                                                <a class="text-primary hover:text-primary" href="javascript:void(0);">Delete</a>
                                            </td>
                                            </tr>

                                            <tr>
                                            <td class="font-medium">Joe Black</td>
                                            <td>31</td>
                                            <td>Sidney No. 1 Lake Park</td>
                                            <td class="text-end font-medium">
                                                <a class="text-primary hover:text-primary" href="javascript:void(0);">Delete</a>
                                            </td>
                                            </tr>
                                        </tbody>
                                        </table>
                                    </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-span-12 lg:col-span-6">
                                <div class="box">
                                <div class="box-header">
                                    <h5 class="box-title"> Headless Tables</h5>
                                </div>
                                <div class="box-body">
                                    <div class="table-bordered rounded-sm shadow overflow-auto dark:shadow-white/10">
                                    <table class="ti-custom-table ti-custom-table-head">
                                        <tbody>
                                        <tr>
                                            <td class="font-medium">John Brown</td>
                                            <td>45</td>
                                            <td>New York No. 1 Lake Park</td>
                                            <td class="text-end font-medium">
                                            <a class="text-primary hover:text-primary" href="javascript:void(0);">Delete</a>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td class="font-medium">Jim Green</td>
                                            <td>27</td>
                                            <td>London No. 1 Lake Park</td>
                                            <td class="text-end font-medium">
                                            <a class="text-primary hover:text-primary" href="javascript:void(0);">Delete</a>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td class="font-medium">Joe Black</td>
                                            <td>31</td>
                                            <td>Sidney No. 1 Lake Park</td>
                                            <td class="text-end font-medium">
                                            <a class="text-primary hover:text-primary" href="javascript:void(0);">Delete</a>
                                            </td>
                                        </tr>
                                        </tbody>
                                    </table>
                                    </div>
                                </div>
                                </div>
                            </div>
                            </div>
                            <!-- End::row-6-->

                            <!-- Start::row-7 -->
                            <div class="grid grid-cols-12 gap-6">
                            <div class="col-span-12 lg:col-span-6">
                                <div class="box">
                                <div class="box-header">
                                    <h5 class="box-title">Tables with Footer</h5>
                                </div>
                                <div class="box-body p-0">
                                    <div class="overflow-auto">
                                    <table class="ti-custom-table ti-custom-table-head">
                                        <thead>
                                        <tr>
                                            <th scope="col">Name</th>
                                            <th scope="col">Age</th>
                                            <th scope="col">Address</th>
                                            <th scope="col" class="!text-end">Action</th>
                                        </tr>
                                        </thead>
                                        <tbody>
                                        <tr>
                                            <td class="font-medium">John Brown</td>
                                            <td>45</td>
                                            <td>New York No. 1 Lake Park</td>
                                            <td class="text-end font-medium">
                                            <a class="text-primary hover:text-primary" href="javascript:void(0);">Delete</a>
                                            </td>
                                        </tr>

                                        <tr>
                                            <td class="font-medium">Jim Green</td>
                                            <td>27</td>
                                            <td>London No. 1 Lake Park</td>
                                            <td class="text-end font-medium">
                                            <a class="text-primary hover:text-primary" href="javascript:void(0);">Delete</a>
                                            </td>
                                        </tr>
                                        </tbody>

                                        <tfoot>
                                        <tr>
                                            <td class="font-medium">Footer</td>
                                            <td>Footer</td>
                                            <td>Footer</td>
                                            <td class="text-end font-medium">
                                            <a class="text-primary hover:text-primary" href="javascript:void(0);">Footer</a>
                                            </td>
                                        </tr>
                                        </tfoot>
                                    </table>
                                    </div>
                                </div>
                                </div>
                            </div>
                            <div class="col-span-12 lg:col-span-6">
                                <div class="box">
                                <div class="box-header">
                                    <h5 class="box-title">Tables With Captions</h5>
                                </div>
                                <div class="box-body p-0">
                                    <div class="overflow-auto">
                                    <table class="ti-custom-table ti-custom-table-head">
                                        <caption class="py-2 px-4 text-start text-sm text-gray-600 dark:text-white/70">List of users</caption>
                                        <thead>
                                        <tr>
                                            <th scope="col">Name</th>
                                            <th scope="col">Age</th>
                                            <th scope="col">Address</th>
                                            <th scope="col" class="!text-end">Action</th>
                                        </tr>
                                        </thead>
                                        <tbody>
                                        <tr>
                                            <td class="font-medium">John Brown</td>
                                            <td>45</td>
                                            <td>New York No. 1 Lake Park</td>
                                            <td class="text-end font-medium">
                                            <a class="text-primary hover:text-primary" href="javascript:void(0);">Delete</a>
                                            </td>
                                        </tr>

                                        <tr>
                                            <td class="font-medium">Jim Green</td>
                                            <td>27</td>
                                            <td>London No. 1 Lake Park</td>
                                            <td class="text-end font-medium">
                                            <a class="text-primary hover:text-primary" href="javascript:void(0);">Delete</a>
                                            </td>
                                        </tr>

                                        <tr>
                                            <td class="font-medium">Joe Black</td>
                                            <td>31</td>
                                            <td>Sidney No. 1 Lake Park</td>
                                            <td class="text-end font-medium">
                                            <a class="text-primary hover:text-primary" href="javascript:void(0);">Delete</a>
                                            </td>
                                        </tr>
                                        </tbody>
                                    </table>
                                    </div>
                                </div>
                                </div>
                            </div>
                            </div>
                            <!-- End::row-7-->

                            <!-- Start::row-8 -->
                            <div class="grid grid-cols-12 gap-6">
                            <div class="col-span-12 lg:col-span-6">
                                <div class="box">
                                    <div class="box-header">
                                        <h5 class="box-title">Overflow Tables</h5>
                                    </div>
                                    <div class="box-body">
                                    <div class="flex flex-col">
                                        <div class="-m-1.5 overflow-x-auto">
                                        <div class="p-1.5 min-w-full inline-block align-middle">
                                            <div class="overflow-auto table-bordered">
                                            <table class="ti-custom-table ti-custom-table-head">
                                                <thead>
                                                <tr>
                                                    <th scope="col">Name</th>
                                                    <th scope="col">Title</th>
                                                    <th scope="col">Age</th>
                                                    <th scope="col">Email</th>
                                                    <th scope="col">Address</th>
                                                    <th scope="col" class="!text-end">Action</th>
                                                </tr>
                                                </thead>
                                                <tbody>
                                                <tr>
                                                    <td class="font-medium">John Brown</td>
                                                    <td>Regional Paradigm Technician</td>
                                                    <td>john@site.com</td>
                                                    <td>45</td>
                                                    <td>New York No. 1 Lake Park</td>
                                                    <td class="text-end font-medium">
                                                    <a class="text-primary hover:text-primary" href="javascript:void(0);">Delete</a>
                                                    </td>
                                                </tr>

                                                <tr>
                                                    <td class="font-medium">Jim Green</td>
                                                    <td>Forward Response Developer</td>
                                                    <td>jim@site.com</td>
                                                    <td>27</td>
                                                    <td>London No. 1 Lake Park</td>
                                                    <td class="text-end font-medium">
                                                    <a class="text-primary hover:text-primary" href="javascript:void(0);">Delete</a>
                                                    </td>
                                                </tr>

                                                <tr>
                                                    <td class="font-medium">Joe Black</td>
                                                    <td>Product Directives Officer</td>
                                                    <td>joe@site.com</td>
                                                    <td>31</td>
                                                    <td>Sidney No. 1 Lake Park</td>
                                                    <td class="text-end font-medium">
                                                    <a class="text-primary hover:text-primary" href="javascript:void(0);">Delete</a>
                                                    </td>
                                                </tr>
                                                </tbody>
                                            </table>
                                            </div>
                                        </div>
                                        </div>
                                    </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-span-12 lg:col-span-6">
                                <div class="box">
                                    <div class="box-header">
                                        <h5 class="box-title">Tables With Selection</h5>
                                    </div>
                                    <div class="box-body">
                                        <div class="table-bordered rounded-sm overflow-auto">
                                        <table class="ti-custom-table ti-custom-table-head">
                                            <thead class="bg-gray-50 dark:bg-black/20">
                                            <tr>
                                                <th scope="col" class="py-3 ltr:pl-4 rtl:pr-4">
                                                <div class="flex items-center h-5">
                                                    <input id="hs-table-checkbox-all" type="checkbox" class="ti-form-checkbox">
                                                    <label for="hs-table-checkbox-all" class="sr-only">Checkbox</label>
                                                </div>
                                                </th>
                                                <th scope="col">Name</th>
                                                <th scope="col">Age</th>
                                                <th scope="col">Address</th>
                                                <th scope="col" class="!text-end">Action</th>
                                            </tr>
                                            </thead>
                                            <tbody>
                                            <tr>
                                                <td class="py-3 ltr:pl-4 rtl:pr-4">
                                                <div class="flex items-center h-5">
                                                    <input id="hs-table-checkbox-1" type="checkbox" class="ti-form-checkbox">
                                                    <label for="hs-table-checkbox-1" class="sr-only">Checkbox</label>
                                                </div>
                                                </td>
                                                <td class="font-medium">John Brown</td>
                                                <td>45</td>
                                                <td>New York No. 1 Lake Park</td>
                                                <td class="text-end font-medium">
                                                <a class="text-primary hover:text-primary" href="javascript:void(0);">Delete</a>
                                                </td>
                                            </tr>

                                            <tr>
                                                <td class="py-3 ltr:pl-4 rtl:pr-4">
                                                <div class="flex items-center h-5">
                                                    <input id="hs-table-checkbox-2" type="checkbox" class="ti-form-checkbox">
                                                    <label for="hs-table-checkbox-2" class="sr-only">Checkbox</label>
                                                </div>
                                                </td>
                                                <td class="font-medium">Jim Green</td>
                                                <td>27</td>
                                                <td>London No. 1 Lake Park</td>
                                                <td class="text-end font-medium">
                                                <a class="text-primary hover:text-primary" href="javascript:void(0);">Delete</a>
                                                </td>
                                            </tr>

                                            <tr>
                                                <td class="py-3 ltr:pl-4 rtl:pr-4">
                                                <div class="flex items-center h-5">
                                                    <input id="hs-table-checkbox-3" type="checkbox" class="ti-form-checkbox">
                                                    <label for="hs-table-checkbox-3" class="sr-only">Checkbox</label>
                                                </div>
                                                </td>
                                                <td class="font-medium">Joe Black</td>
                                                <td>31</td>
                                                <td>Sidney No. 1 Lake Park</td>
                                                <td class="text-end font-medium">
                                                <a class="text-primary hover:text-primary" href="javascript:void(0);">Delete</a>
                                                </td>
                                            </tr>

                                            <tr>
                                                <td class="py-3 ltr:pl-4 rtl:pr-4">
                                                <div class="flex items-center h-5">
                                                    <input id="hs-table-checkbox-4" type="checkbox" class="ti-form-checkbox">
                                                    <label for="hs-table-checkbox-4" class="sr-only">Checkbox</label>
                                                </div>
                                                </td>
                                                <td class="font-medium">Edward King</td>
                                                <td>16</td>
                                                <td>LA No. 1 Lake Park</td>
                                                <td class="text-end font-medium">
                                                <a class="text-primary hover:text-primary" href="javascript:void(0);">Delete</a>
                                                </td>
                                            </tr>

                                            <tr>
                                                <td class="py-3 ltr:pl-4 rtl:pr-4">
                                                <div class="flex items-center h-5">
                                                    <input id="hs-table-checkbox-5" type="checkbox" class="ti-form-checkbox">
                                                    <label for="hs-table-checkbox-5" class="sr-only">Checkbox</label>
                                                </div>
                                                </td>
                                                <td class="font-medium">Jim Red</td>
                                                <td>45</td>
                                                <td>Melbourne No. 1 Lake Park</td>
                                                <td class="text-end font-medium">
                                                <a class="text-primary hover:text-primary" href="javascript:void(0);">Delete</a>
                                                </td>
                                            </tr>
                                            </tbody>
                                        </table>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            </div>
                            <!-- End::row-8-->

                            <!-- Start::row-9 -->
                            <div class="grid grid-cols-12 gap-6">
                            <div class="col-span-12 lg:col-span-6">
                                <div class="box">
                                    <div class="box-header">
                                        <h5 class="box-title">Tables With Search Input</h5>
                                    </div>
                                    <div class="box-body">
                                        <div class="table-bordered rounded-sm ti-custom-table-head">
                                        <div class="py-2 px-3">
                                            <div class="relative max-w-xs">
                                            <label for="hs-table-search1" class="sr-only">Search</label>
                                            <input type="text" name="hs-table-search1" id="hs-table-search1" class="p-3 ltr:pl-10 rtl:pr-10 ti-form-input" placeholder="Search for items">
                                            <div class="absolute inset-y-0 ltr:left-0 rtl:right-0 flex items-center pointer-events-none ltr:pl-4 rtl:pr-4">
                                                <svg class="h-3.5 w-3.5 text-gray-400 dark:text-white/70" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                                                <path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z"/>
                                                </svg>
                                            </div>
                                            </div>
                                        </div>
                                        <div class="overflow-auto">
                                            <table class="ti-custom-table ti-custom-table-head">
                                            <thead class="bg-gray-50 dark:bg-black/20">
                                                <tr>
                                                <th scope="col" class="py-2 ltr:pr-0 rtl:pl-0">
                                                    <div class="flex items-center h-5">
                                                    <input id="hs-table-search-checkbox-all1" type="checkbox" class="ti-form-checkbox">
                                                    <label for="hs-table-search-checkbox-all1" class="sr-only">Checkbox</label>
                                                    </div>
                                                </th>
                                                <th scope="col" class="">Name</th>
                                                <th scope="col" class="">Age</th>
                                                <th scope="col" class="">Address</th>
                                                <th scope="col" class="!text-end">Action</th>
                                                </tr>
                                            </thead>
                                            <tbody class="">
                                                <tr>
                                                <td class="py-3">
                                                    <div class="flex items-center h-5">
                                                    <input id="hs-table-search-checkbox-1" type="checkbox" class="ti-form-checkbox">
                                                    <label for="hs-table-search-checkbox-1" class="sr-only">Checkbox</label>
                                                    </div>
                                                </td>
                                                <td class="font-medium">John Brown</td>
                                                <td>45</td>
                                                <td>New York No. 1 Lake Park</td>
                                                <td class="text-end font-medium">
                                                    <a class="text-primary hover:text-primary" href="javascript:void(0);">Delete</a>
                                                </td>
                                                </tr>

                                                <tr>
                                                <td class="py-3">
                                                    <div class="flex items-center h-5">
                                                    <input id="hs-table-search-checkbox-2" type="checkbox" class="ti-form-checkbox">
                                                    <label for="hs-table-search-checkbox-2" class="sr-only">Checkbox</label>
                                                    </div>
                                                </td>
                                                <td class="font-medium">Jim Green</td>
                                                <td>27</td>
                                                <td>London No. 1 Lake Park</td>
                                                <td class="text-end font-medium">
                                                    <a class="text-primary hover:text-primary" href="javascript:void(0);">Delete</a>
                                                </td>
                                                </tr>

                                                <tr>
                                                <td class="py-3">
                                                    <div class="flex items-center h-5">
                                                    <input id="hs-table-search-checkbox-3" type="checkbox" class="ti-form-checkbox">
                                                    <label for="hs-table-search-checkbox-3" class="sr-only">Checkbox</label>
                                                    </div>
                                                </td>
                                                <td class="font-medium">Joe Black</td>
                                                <td>31</td>
                                                <td>Sidney No. 1 Lake Park</td>
                                                <td class="text-end font-medium">
                                                    <a class="text-primary hover:text-primary" href="javascript:void(0);">Delete</a>
                                                </td>
                                                </tr>

                                                <tr>
                                                <td class="py-3">
                                                    <div class="flex items-center h-5">
                                                    <input id="hs-table-search-checkbox-4" type="checkbox" class="ti-form-checkbox">
                                                    <label for="hs-table-search-checkbox-4" class="sr-only">Checkbox</label>
                                                    </div>
                                                </td>
                                                <td class="font-medium">Edward King</td>
                                                <td>16</td>
                                                <td>LA No. 1 Lake Park</td>
                                                <td class="text-end font-medium">
                                                    <a class="text-primary hover:text-primary" href="javascript:void(0);">Delete</a>
                                                </td>
                                                </tr>

                                                <tr>
                                                <td class="py-3">
                                                    <div class="flex items-center h-5">
                                                    <input id="hs-table-search-checkbox-5" type="checkbox" class="ti-form-checkbox">
                                                    <label for="hs-table-search-checkbox-5" class="sr-only">Checkbox</label>
                                                    </div>
                                                </td>
                                                <td class="font-medium">Jim Red</td>
                                                <td>45</td>
                                                <td>Melbourne No. 1 Lake Park</td>
                                                <td class="text-end font-medium">
                                                    <a class="text-primary hover:text-primary" href="javascript:void(0);">Delete</a>
                                                </td>
                                                </tr>
                                            </tbody>
                                            </table>
                                        </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-span-12 lg:col-span-6">
                                <div class="box">
                                    <div class="box-header">
                                        <h5 class="box-title">Tables With Search Input</h5>
                                    </div>
                                    <div class="box-body">
                                    <div class="table-bordered rounded-sm ti-custom-table-head">
                                        <div class="py-2 px-3">
                                        <div class="relative max-w-xs">
                                            <label for="hs-table-search2" class="sr-only">Search</label>
                                            <input type="text" name="hs-table-search2" id="hs-table-search2" class="p-3 ltr:pl-10 rtl:pr-10 ti-form-input" placeholder="Search for items">
                                            <div class="absolute inset-y-0 ltr:left-0 rtl:right-0 flex items-center pointer-events-none ltr:pl-4 rtl:pr-4">
                                            <svg class="h-3.5 w-3.5 text-gray-400 dark:text-white/70" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                                                <path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z"/>
                                            </svg>
                                            </div>
                                        </div>
                                        </div>
                                        <div class="overflow-auto">
                                        <table class="ti-custom-table ti-custom-table-head">
                                            <thead class="bg-gray-50 dark:bg-black/20">
                                            <tr>
                                                <th scope="col" class="py-2 ltr:pr-0 rtl:pl-0">
                                                <div class="flex items-center h-5">
                                                    <input id="hs-table-search-checkbox-all" type="checkbox" class="ti-form-checkbox">
                                                    <label for="hs-table-search-checkbox-all" class="sr-only">Checkbox</label>
                                                </div>
                                                </th>
                                                <th scope="col" class="">Name</th>
                                                <th scope="col" class="">Age</th>
                                                <th scope="col" class="">Address</th>
                                                <th scope="col" class="!text-end">Action</th>
                                            </tr>
                                            </thead>
                                            <tbody class="">
                                            <tr>
                                                <td class="py-3">
                                                <div class="flex items-center h-5">
                                                    <input id="hs-table-search-checkbox-11" type="checkbox" class="ti-form-checkbox">
                                                    <label for="hs-table-search-checkbox-11" class="sr-only">Checkbox</label>
                                                </div>
                                                </td>
                                                <td class="font-medium">John Brown</td>
                                                <td>45</td>
                                                <td>New York No. 1 Lake Park</td>
                                                <td class="text-end font-medium">
                                                <a class="text-primary hover:text-primary" href="javascript:void(0);">Delete</a>
                                                </td>
                                            </tr>

                                            <tr>
                                                <td class="py-3">
                                                <div class="flex items-center h-5">
                                                    <input id="hs-table-search-checkbox-12" type="checkbox" class="ti-form-checkbox">
                                                    <label for="hs-table-search-checkbox-12" class="sr-only">Checkbox</label>
                                                </div>
                                                </td>
                                                <td class="font-medium">Jim Green</td>
                                                <td>27</td>
                                                <td>London No. 1 Lake Park</td>
                                                <td class="text-end font-medium">
                                                <a class="text-primary hover:text-primary" href="javascript:void(0);">Delete</a>
                                                </td>
                                            </tr>

                                            <tr>
                                                <td class="py-3">
                                                <div class="flex items-center h-5">
                                                    <input id="hs-table-search-checkbox-13" type="checkbox" class="ti-form-checkbox">
                                                    <label for="hs-table-search-checkbox-13" class="sr-only">Checkbox</label>
                                                </div>
                                                </td>
                                                <td class="font-medium">Joe Black</td>
                                                <td>31</td>
                                                <td>Sidney No. 1 Lake Park</td>
                                                <td class="text-end font-medium">
                                                <a class="text-primary hover:text-primary" href="javascript:void(0);">Delete</a>
                                                </td>
                                            </tr>

                                            <tr>
                                                <td class="py-3">
                                                <div class="flex items-center h-5">
                                                    <input id="hs-table-search-checkbox-14" type="checkbox" class="ti-form-checkbox">
                                                    <label for="hs-table-search-checkbox-14" class="sr-only">Checkbox</label>
                                                </div>
                                                </td>
                                                <td class="font-medium">Edward King</td>
                                                <td>16</td>
                                                <td>LA No. 1 Lake Park</td>
                                                <td class="text-end font-medium">
                                                <a class="text-primary hover:text-primary" href="javascript:void(0);">Delete</a>
                                                </td>
                                            </tr>

                                            <tr>
                                                <td class="py-3">
                                                <div class="flex items-center h-5">
                                                    <input id="hs-table-search-checkbox-15" type="checkbox" class="ti-form-checkbox">
                                                    <label for="hs-table-search-checkbox-15" class="sr-only">Checkbox</label>
                                                </div>
                                                </td>
                                                <td class="font-medium">Jim Red</td>
                                                <td>45</td>
                                                <td>Melbourne No. 1 Lake Park</td>
                                                <td class="text-end font-medium">
                                                <a class="text-primary hover:text-primary" href="javascript:void(0);">Delete</a>
                                                </td>
                                            </tr>
                                            </tbody>
                                        </table>
                                        </div>
                                        <div class="py-1 px-4">
                                        <nav class="flex items-center sm:space-x-2 rtl:space-x-reverse">
                                            <a class="text-gray-400 dark:text-white/70 hover:text-primary p-4 inline-flex items-center gap-2 font-medium rounded-sm" href="javascript:void(0);">
                                            <span aria-hidden="true">«</span>
                                            <span class="sr-only">Previous</span>
                                            </a>
                                            <a class="w-10 h-10 bg-primary text-white p-4 inline-flex items-center text-sm font-medium rounded-full" href="javascript:void(0);" aria-current="page">1</a>
                                            <a class="w-10 h-10 text-gray-400 dark:text-white/70 hover:text-primary p-4 inline-flex items-center text-sm font-medium rounded-full" href="javascript:void(0);">2</a>
                                            <a class="w-10 h-10 text-gray-400 dark:text-white/70 hover:text-primary p-4 inline-flex items-center text-sm font-medium rounded-full" href="javascript:void(0);">3</a>
                                            <a class="text-gray-400 dark:text-white/70 hover:text-primary p-4 inline-flex items-center gap-2 font-medium rounded-sm" href="javascript:void(0);">
                                            <span class="sr-only">Next</span>
                                            <span aria-hidden="true">»</span>
                                            </a>
                                        </nav>
                                        </div>
                                    </div>
                                    </div>
                                </div>
                            </div>
                            </div>
                            <!-- End::row-9-->

                            <!-- Start::row-10 -->
                            <div class="grid grid-cols-12 gap-6">
                            <div class="col-span-12">
                                <div class="box overflow-auto">
                                    <div class="box-header">
                                        <h5 class="box-title">Tables With Div</h5>
                                    </div>
                                    <div class="box-body p-0">
                                        <div class="-m-1.5">
                                        <div class="p-1.5 min-w-full inline-block align-middle">
                                            <div class="overflow-auto">
                                            <div class="table border-collapse table-auto w-full divide-y divide-gray-200 dark:divide-white/10">
                                                <div class="table-header-group">
                                                <div class="table-row">
                                                    <div class="table-cell px-6 py-3 text-start text-xs font-medium text-gray-500 uppercase">Name</div>
                                                    <div class="table-cell px-6 py-3 text-start text-xs font-medium text-gray-500 uppercase">Age</div>
                                                    <div class="table-cell px-6 py-3 text-start text-xs font-medium text-gray-500 uppercase">Address</div>
                                                    <div class="table-cell px-6 py-3 text-end text-xs font-medium text-gray-500 uppercase">Action</div>
                                                </div>
                                                </div>
                                                <div class="table-row-group divide-y divide-gray-200 bg-white dark:divide-white/10 dark:bg-black/20">
                                                <div class="table-row">
                                                    <div class="table-cell px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-800 dark:text-gray-200">John Brown</div>
                                                    <div class="table-cell px-6 py-4 whitespace-nowrap text-sm text-gray-800 dark:text-gray-200">45</div>
                                                    <div class="table-cell px-6 py-4 whitespace-nowrap text-sm text-gray-800 dark:text-gray-200">New York No. 1 Lake Park</div>
                                                    <div class="table-cell px-6 py-4 whitespace-nowrap text-end text-sm font-medium">
                                                    <a class="text-primary hover:text-primary" href="javascript:void(0);">Delete</a>
                                                    </div>
                                                </div>
                                                <div class="table-row">
                                                    <div class="table-cell px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-800 dark:text-gray-200">Jim Green</div>
                                                    <div class="table-cell px-6 py-4 whitespace-nowrap text-sm text-gray-800 dark:text-gray-200">27</div>
                                                    <div class="table-cell px-6 py-4 whitespace-nowrap text-sm text-gray-800 dark:text-gray-200">London No. 1 Lake Park</div>
                                                    <div class="table-cell px-6 py-4 whitespace-nowrap text-end text-sm font-medium">
                                                    <a class="text-primary hover:text-primary" href="javascript:void(0);">Delete</a>
                                                    </div>
                                                </div>
                                                <div class="table-row">
                                                    <div class="table-cell px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-800 dark:text-gray-200">Joe Black</div>
                                                    <div class="table-cell px-6 py-4 whitespace-nowrap text-sm text-gray-800 dark:text-gray-200">31</div>
                                                    <div class="table-cell px-6 py-4 whitespace-nowrap text-sm text-gray-800 dark:text-gray-200">Sidney No. 1 Lake Park</div>
                                                    <div class="table-cell px-6 py-4 whitespace-nowrap text-end text-sm font-medium">
                                                    <a class="text-primary hover:text-primary" href="javascript:void(0);">Delete</a>
                                                    </div>
                                                </div>
                                                </div>
                                            </div>
                                            </div>
                                        </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            </div>
                            <!-- End::row-10-->

                            <!-- Start::row-11 -->
                            <div class="grid grid-cols-12 gap-x-6">
                            <div class="col-span-12 lg:col-span-6">
                                <div class="box">
                                    <div class="box-header">
                                        <h5 class="box-title">Table Head Primary</h5>
                                    </div>
                                    <div class="box-body">
                                        <div class="table-bordered rounded-sm overflow-auto">
                                        <table class="ti-custom-table ti-custom-table-head ti-head-primary">
                                            <thead class="">
                                            <tr class="!divide-primary/10 dark:!divide-primary/10 ">
                                                <th scope="col" class="!text-gray-800  dark:!text-white/70">Name</th>
                                                <th scope="col" class="!text-gray-800  dark:!text-white/70">Age</th>
                                                <th scope="col" class="!text-gray-800  dark:!text-white/70">Address</th>
                                                <th scope="col" class="!text-end !text-gray-800  dark:!text-white/70">Action</th>
                                            </tr>
                                            </thead>
                                            <tbody>
                                            <tr>
                                                <td class="font-medium">John Brown</td>
                                                <td>45</td>
                                                <td>New York No. 1 Lake Park</td>
                                                <td class="text-end font-medium">
                                                <a class="text-primary hover:text-primary" href="javascript:void(0);">Delete</a>
                                                </td>
                                            </tr>

                                            <tr>
                                                <td class="font-medium">Jim Green</td>
                                                <td>27</td>
                                                <td>London No. 1 Lake Park</td>
                                                <td class="text-end font-medium">
                                                <a class="text-primary hover:text-primary" href="javascript:void(0);">Delete</a>
                                                </td>
                                            </tr>

                                            <tr>
                                                <td class="font-medium">Joe Black</td>
                                                <td>31</td>
                                                <td>Sidney No. 1 Lake Park</td>
                                                <td class="text-end font-medium">
                                                <a class="text-primary hover:text-primary" href="javascript:void(0);">Delete</a>
                                                </td>
                                            </tr>
                                            </tbody>
                                        </table>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-span-12 lg:col-span-6">
                                <div class="box">
                                    <div class="box-header">
                                        <h5 class="box-title">Table Head Secondary</h5>
                                    </div>
                                    <div class="box-body">
                                        <div class="table-bordered rounded-sm overflow-auto">
                                        <table class="ti-custom-table ti-custom-table-head ti-head-secondary">
                                            <thead class="">
                                            <tr class="!divide-secondary/10 dark:!divide-secondary/10 ">
                                                <th scope="col" class="!text-gray-800  dark:!text-white/70">Name</th>
                                                <th scope="col" class="!text-gray-800  dark:!text-white/70">Age</th>
                                                <th scope="col" class="!text-gray-800  dark:!text-white/70">Address</th>
                                                <th scope="col" class="!text-end !text-gray-800  dark:!text-white/70">Action</th>
                                            </tr>
                                            </thead>
                                            <tbody>
                                            <tr>
                                                <td class="font-medium">John Brown</td>
                                                <td>45</td>
                                                <td>New York No. 1 Lake Park</td>
                                                <td class="text-end font-medium">
                                                <a class="text-secondary hover:text-secondary" href="javascript:void(0);">Delete</a>
                                                </td>
                                            </tr>

                                            <tr>
                                                <td class="font-medium">Jim Green</td>
                                                <td>27</td>
                                                <td>London No. 1 Lake Park</td>
                                                <td class="text-end font-medium">
                                                <a class="text-secondary hover:text-secondary" href="javascript:void(0);">Delete</a>
                                                </td>
                                            </tr>

                                            <tr>
                                                <td class="font-medium">Joe Black</td>
                                                <td>31</td>
                                                <td>Sidney No. 1 Lake Park</td>
                                                <td class="text-end font-medium">
                                                <a class="text-secondary hover:text-secondary" href="javascript:void(0);">Delete</a>
                                                </td>
                                            </tr>
                                            </tbody>
                                        </table>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-span-12 lg:col-span-6">
                                <div class="box">
                                    <div class="box-header">
                                        <h5 class="box-title">Table Head Warning</h5>
                                    </div>
                                    <div class="box-body">
                                        <div class="table-bordered rounded-sm overflow-auto">
                                        <table class="ti-custom-table ti-custom-table-head ti-head-warning">
                                            <thead class="">
                                            <tr class="!divide-warning/10 dark:!divide-warning/10 ">
                                                <th scope="col" class="!text-gray-800  dark:!text-white/70">Name</th>
                                                <th scope="col" class="!text-gray-800  dark:!text-white/70">Age</th>
                                                <th scope="col" class="!text-gray-800  dark:!text-white/70">Address</th>
                                                <th scope="col" class="!text-end !text-gray-800  dark:!text-white/70">Action</th>
                                            </tr>
                                            </thead>
                                            <tbody>
                                            <tr>
                                                <td class="font-medium">John Brown</td>
                                                <td>45</td>
                                                <td>New York No. 1 Lake Park</td>
                                                <td class="text-end font-medium">
                                                <a class="text-warning hover:text-warning" href="javascript:void(0);">Delete</a>
                                                </td>
                                            </tr>

                                            <tr>
                                                <td class="font-medium">Jim Green</td>
                                                <td>27</td>
                                                <td>London No. 1 Lake Park</td>
                                                <td class="text-end font-medium">
                                                <a class="text-warning hover:text-warning" href="javascript:void(0);">Delete</a>
                                                </td>
                                            </tr>

                                            <tr>
                                                <td class="font-medium">Joe Black</td>
                                                <td>31</td>
                                                <td>Sidney No. 1 Lake Park</td>
                                                <td class="text-end font-medium">
                                                <a class="text-warning hover:text-warning" href="javascript:void(0);">Delete</a>
                                                </td>
                                            </tr>
                                            </tbody>
                                        </table>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-span-12 lg:col-span-6">
                                <div class="box">
                                    <div class="box-header">
                                        <h5 class="box-title">Table Head Info</h5>
                                    </div>
                                    <div class="box-body">
                                        <div class="table-bordered rounded-sm overflow-auto">
                                        <table class="ti-custom-table ti-custom-table-head ti-head-info">
                                            <thead class="">
                                            <tr class="!divide-info/10 dark:!divide-info/10 ">
                                                <th scope="col" class="!text-gray-800  dark:!text-white/70">Name</th>
                                                <th scope="col" class="!text-gray-800  dark:!text-white/70">Age</th>
                                                <th scope="col" class="!text-gray-800  dark:!text-white/70">Address</th>
                                                <th scope="col" class="!text-end !text-gray-800  dark:!text-white/70">Action</th>
                                            </tr>
                                            </thead>
                                            <tbody>
                                            <tr>
                                                <td class="font-medium">John Brown</td>
                                                <td>45</td>
                                                <td>New York No. 1 Lake Park</td>
                                                <td class="text-end font-medium">
                                                <a class="text-info hover:text-info" href="javascript:void(0);">Delete</a>
                                                </td>
                                            </tr>

                                            <tr>
                                                <td class="font-medium">Jim Green</td>
                                                <td>27</td>
                                                <td>London No. 1 Lake Park</td>
                                                <td class="text-end font-medium">
                                                <a class="text-info hover:text-info" href="javascript:void(0);">Delete</a>
                                                </td>
                                            </tr>

                                            <tr>
                                                <td class="font-medium">Joe Black</td>
                                                <td>31</td>
                                                <td>Sidney No. 1 Lake Park</td>
                                                <td class="text-end font-medium">
                                                <a class="text-info hover:text-info" href="javascript:void(0);">Delete</a>
                                                </td>
                                            </tr>
                                            </tbody>
                                        </table>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-span-12 lg:col-span-6">
                                <div class="box">
                                    <div class="box-header">
                                        <h5 class="box-title">Table Head Danger</h5>
                                    </div>
                                    <div class="box-body">
                                        <div class="table-bordered rounded-sm overflow-auto">
                                        <table class="ti-custom-table ti-custom-table-head ti-head-danger">
                                            <thead class="bg-danger/20 dark:bg-danger/20">
                                            <tr class="!divide-danger/10 dark:!divide-danger/10 ">
                                                <th scope="col" class="!text-gray-800  dark:!text-white/70">Name</th>
                                                <th scope="col" class="!text-gray-800  dark:!text-white/70">Age</th>
                                                <th scope="col" class="!text-gray-800  dark:!text-white/70">Address</th>
                                                <th scope="col" class="!text-end !text-gray-800  dark:!text-white/70">Action</th>
                                            </tr>
                                            </thead>
                                            <tbody>
                                            <tr>
                                                <td class="font-medium">John Brown</td>
                                                <td>45</td>
                                                <td>New York No. 1 Lake Park</td>
                                                <td class="text-end font-medium">
                                                <a class="text-danger hover:text-danger" href="javascript:void(0);">Delete</a>
                                                </td>
                                            </tr>

                                            <tr>
                                                <td class="font-medium">Jim Green</td>
                                                <td>27</td>
                                                <td>London No. 1 Lake Park</td>
                                                <td class="text-end font-medium">
                                                <a class="text-danger hover:text-danger" href="javascript:void(0);">Delete</a>
                                                </td>
                                            </tr>

                                            <tr>
                                                <td class="font-medium">Joe Black</td>
                                                <td>31</td>
                                                <td>Sidney No. 1 Lake Park</td>
                                                <td class="text-end font-medium">
                                                <a class="text-danger hover:text-danger" href="javascript:void(0);">Delete</a>
                                                </td>
                                            </tr>
                                            </tbody>
                                        </table>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-span-12 lg:col-span-6">
                                <div class="box">
                                    <div class="box-header">
                                        <h5 class="box-title">Table Head Success</h5>
                                    </div>
                                    <div class="box-body">
                                        <div class="table-bordered rounded-sm overflow-auto">
                                        <table class="ti-custom-table ti-custom-table-head ti-head-success">
                                            <thead class="">
                                            <tr class="!divide-success/10 dark:!divide-success/10 ">
                                                <th scope="col" class="!text-gray-800  dark:!text-white/70">Name</th>
                                                <th scope="col" class="!text-gray-800  dark:!text-white/70">Age</th>
                                                <th scope="col" class="!text-gray-800  dark:!text-white/70">Address</th>
                                                <th scope="col" class="!text-end !text-gray-800  dark:!text-white/70">Action</th>
                                            </tr>
                                            </thead>
                                            <tbody>
                                            <tr>
                                                <td class="font-medium">John Brown</td>
                                                <td>45</td>
                                                <td>New York No. 1 Lake Park</td>
                                                <td class="text-end font-medium">
                                                <a class="text-success hover:text-success" href="javascript:void(0);">Delete</a>
                                                </td>
                                            </tr>

                                            <tr>
                                                <td class="font-medium">Jim Green</td>
                                                <td>27</td>
                                                <td>London No. 1 Lake Park</td>
                                                <td class="text-end font-medium">
                                                <a class="text-success hover:text-success" href="javascript:void(0);">Delete</a>
                                                </td>
                                            </tr>

                                            <tr>
                                                <td class="font-medium">Joe Black</td>
                                                <td>31</td>
                                                <td>Sidney No. 1 Lake Park</td>
                                                <td class="text-end font-medium">
                                                <a class="text-success hover:text-success" href="javascript:void(0);">Delete</a>
                                                </td>
                                            </tr>
                                            </tbody>
                                        </table>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            </div>
                            <!-- End::row-11-->

                            <!-- Start::row-12 -->
                            <div class="grid grid-cols-12 gap-x-6">
                            <div class="col-span-12 lg:col-span-6">
                                <div class="box">
                                    <div class="box-header">
                                        <h5 class="box-title">Bordered Primary</h5>
                                    </div>
                                    <div class="box-body">
                                        <div class="overflow-auto table-bordered-primary rounded-sm">
                                        <table class="ti-custom-table ti-custom-table-head">
                                            <thead>
                                            <tr>
                                                <th scope="col">Name</th>
                                                <th scope="col">Age</th>
                                                <th scope="col">Address</th>
                                                <th scope="col" class="!text-end">Action</th>
                                            </tr>
                                            </thead>
                                            <tbody>
                                            <tr>
                                                <td class="font-medium">John Brown</td>
                                                <td>45</td>
                                                <td>New York No. 1 Lake Park</td>
                                                <td class="text-end font-medium">
                                                <a class="text-primary hover:text-primary" href="javascript:void(0);">Delete</a>
                                                </td>
                                            </tr>

                                            <tr>
                                                <td class="font-medium">Jim Green</td>
                                                <td>27</td>
                                                <td>London No. 1 Lake Park</td>
                                                <td class="text-end font-medium">
                                                <a class="text-primary hover:text-primary" href="javascript:void(0);">Delete</a>
                                                </td>
                                            </tr>

                                            <tr>
                                                <td class="font-medium">Joe Black</td>
                                                <td>31</td>
                                                <td>Sidney No. 1 Lake Park</td>
                                                <td class="text-end font-medium">
                                                <a class="text-primary hover:text-primary" href="javascript:void(0);">Delete</a>
                                                </td>
                                            </tr>
                                            </tbody>
                                        </table>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-span-12 lg:col-span-6">
                                <div class="box">
                                    <div class="box-header">
                                        <h5 class="box-title">Bordered Secondary</h5>
                                    </div>
                                    <div class="box-body">
                                        <div class="overflow-auto table-bordered-secondary rounded-sm">
                                        <table class="ti-custom-table ti-custom-table-head">
                                            <thead>
                                            <tr>
                                                <th scope="col">Name</th>
                                                <th scope="col">Age</th>
                                                <th scope="col">Address</th>
                                                <th scope="col" class="!text-end">Action</th>
                                            </tr>
                                            </thead>
                                            <tbody>
                                            <tr>
                                                <td class="font-medium">John Brown</td>
                                                <td>45</td>
                                                <td>New York No. 1 Lake Park</td>
                                                <td class="text-end font-medium">
                                                <a class="text-secondary hover:text-secondary" href="javascript:void(0);">Delete</a>
                                                </td>
                                            </tr>

                                            <tr>
                                                <td class="font-medium">Jim Green</td>
                                                <td>27</td>
                                                <td>London No. 1 Lake Park</td>
                                                <td class="text-end font-medium">
                                                <a class="text-secondary hover:text-secondary" href="javascript:void(0);">Delete</a>
                                                </td>
                                            </tr>

                                            <tr>
                                                <td class="font-medium">Joe Black</td>
                                                <td>31</td>
                                                <td>Sidney No. 1 Lake Park</td>
                                                <td class="text-end font-medium">
                                                <a class="text-secondary hover:text-secondary" href="javascript:void(0);">Delete</a>
                                                </td>
                                            </tr>
                                            </tbody>
                                        </table>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-span-12 lg:col-span-6">
                                <div class="box">
                                    <div class="box-header">
                                        <h5 class="box-title">Bordered Warning</h5>
                                    </div>
                                    <div class="box-body">
                                        <div class="overflow-auto table-bordered-warning rounded-sm">
                                        <table class="ti-custom-table ti-custom-table-head">
                                            <thead>
                                            <tr>
                                                <th scope="col">Name</th>
                                                <th scope="col">Age</th>
                                                <th scope="col">Address</th>
                                                <th scope="col" class="!text-end">Action</th>
                                            </tr>
                                            </thead>
                                            <tbody>
                                            <tr>
                                                <td class="font-medium">John Brown</td>
                                                <td>45</td>
                                                <td>New York No. 1 Lake Park</td>
                                                <td class="text-end font-medium">
                                                <a class="text-warning hover:text-warning" href="javascript:void(0);">Delete</a>
                                                </td>
                                            </tr>

                                            <tr>
                                                <td class="font-medium">Jim Green</td>
                                                <td>27</td>
                                                <td>London No. 1 Lake Park</td>
                                                <td class="text-end font-medium">
                                                <a class="text-warning hover:text-warning" href="javascript:void(0);">Delete</a>
                                                </td>
                                            </tr>

                                            <tr>
                                                <td class="font-medium">Joe Black</td>
                                                <td>31</td>
                                                <td>Sidney No. 1 Lake Park</td>
                                                <td class="text-end font-medium">
                                                <a class="text-warning hover:text-warning" href="javascript:void(0);">Delete</a>
                                                </td>
                                            </tr>
                                            </tbody>
                                        </table>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-span-12 lg:col-span-6">
                                <div class="box">
                                    <div class="box-header">
                                        <h5 class="box-title">Bordered Info</h5>
                                    </div>
                                    <div class="box-body">
                                        <div class="overflow-auto table-bordered-info rounded-sm">
                                        <table class="ti-custom-table ti-custom-table-head">
                                            <thead>
                                            <tr>
                                                <th scope="col">Name</th>
                                                <th scope="col">Age</th>
                                                <th scope="col">Address</th>
                                                <th scope="col" class="!text-end">Action</th>
                                            </tr>
                                            </thead>
                                            <tbody>
                                            <tr>
                                                <td class="font-medium">John Brown</td>
                                                <td>45</td>
                                                <td>New York No. 1 Lake Park</td>
                                                <td class="text-end font-medium">
                                                <a class="text-info hover:text-info" href="javascript:void(0);">Delete</a>
                                                </td>
                                            </tr>

                                            <tr>
                                                <td class="font-medium">Jim Green</td>
                                                <td>27</td>
                                                <td>London No. 1 Lake Park</td>
                                                <td class="text-end font-medium">
                                                <a class="text-info hover:text-info" href="javascript:void(0);">Delete</a>
                                                </td>
                                            </tr>

                                            <tr>
                                                <td class="font-medium">Joe Black</td>
                                                <td>31</td>
                                                <td>Sidney No. 1 Lake Park</td>
                                                <td class="text-end font-medium">
                                                <a class="text-info hover:text-info" href="javascript:void(0);">Delete</a>
                                                </td>
                                            </tr>
                                            </tbody>
                                        </table>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-span-12 lg:col-span-6">
                                <div class="box">
                                    <div class="box-header">
                                        <h5 class="box-title">Bordered Danger</h5>
                                    </div>
                                    <div class="box-body">
                                        <div class="overflow-auto table-bordered-danger rounded-sm">
                                        <table class="ti-custom-table ti-custom-table-head">
                                            <thead>
                                            <tr>
                                                <th scope="col">Name</th>
                                                <th scope="col">Age</th>
                                                <th scope="col">Address</th>
                                                <th scope="col" class="!text-end">Action</th>
                                            </tr>
                                            </thead>
                                            <tbody>
                                            <tr>
                                                <td class="font-medium">John Brown</td>
                                                <td>45</td>
                                                <td>New York No. 1 Lake Park</td>
                                                <td class="text-end font-medium">
                                                <a class="text-danger hover:text-danger" href="javascript:void(0);">Delete</a>
                                                </td>
                                            </tr>

                                            <tr>
                                                <td class="font-medium">Jim Green</td>
                                                <td>27</td>
                                                <td>London No. 1 Lake Park</td>
                                                <td class="text-end font-medium">
                                                <a class="text-danger hover:text-danger" href="javascript:void(0);">Delete</a>
                                                </td>
                                            </tr>

                                            <tr>
                                                <td class="font-medium">Joe Black</td>
                                                <td>31</td>
                                                <td>Sidney No. 1 Lake Park</td>
                                                <td class="text-end font-medium">
                                                <a class="text-danger hover:text-danger" href="javascript:void(0);">Delete</a>
                                                </td>
                                            </tr>
                                            </tbody>
                                        </table>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-span-12 lg:col-span-6">
                                <div class="box">
                                    <div class="box-header">
                                        <h5 class="box-title">Bordered Success</h5>
                                    </div>
                                    <div class="box-body">
                                        <div class="overflow-auto table-bordered-success rounded-sm">
                                        <table class="ti-custom-table ti-custom-table-head">
                                            <thead>
                                            <tr>
                                                <th scope="col">Name</th>
                                                <th scope="col">Age</th>
                                                <th scope="col">Address</th>
                                                <th scope="col" class="!text-end">Action</th>
                                            </tr>
                                            </thead>
                                            <tbody>
                                            <tr>
                                                <td class="font-medium">John Brown</td>
                                                <td>45</td>
                                                <td>New York No. 1 Lake Park</td>
                                                <td class="text-end font-medium">
                                                <a class="text-success hover:text-success" href="javascript:void(0);">Delete</a>
                                                </td>
                                            </tr>

                                            <tr>
                                                <td class="font-medium">Jim Green</td>
                                                <td>27</td>
                                                <td>London No. 1 Lake Park</td>
                                                <td class="text-end font-medium">
                                                <a class="text-success hover:text-success" href="javascript:void(0);">Delete</a>
                                                </td>
                                            </tr>

                                            <tr>
                                                <td class="font-medium">Joe Black</td>
                                                <td>31</td>
                                                <td>Sidney No. 1 Lake Park</td>
                                                <td class="text-end font-medium">
                                                <a class="text-success hover:text-success" href="javascript:void(0);">Delete</a>
                                                </td>
                                            </tr>
                                            </tbody>
                                        </table>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            </div>
                            <!-- End::row-12-->

                            <!-- Start::row-13 -->
                            <div class="grid grid-cols-12 gap-x-6">
                            <div class="col-span-12 lg:col-span-6">
                                <div class="box">
                                    <div class="box-header">
                                        <h5 class="box-title">Primary Table</h5>
                                    </div>
                                    <div class="box-body">
                                        <div class="overflow-auto table-primary rounded-sm border border-gray-200 dark:border-white/10">
                                        <table class="ti-custom-table ti-custom-table-head">
                                            <thead>
                                            <tr>
                                                <th scope="col">Name</th>
                                                <th scope="col">Age</th>
                                                <th scope="col">Address</th>
                                                <th scope="col" class="!text-end">Action</th>
                                            </tr>
                                            </thead>
                                            <tbody>
                                            <tr>
                                                <td class="font-medium">John Brown</td>
                                                <td>45</td>
                                                <td>New York No. 1 Lake Park</td>
                                                <td class="text-end font-medium">
                                                <a class="text-primary hover:text-primary" href="javascript:void(0);">Delete</a>
                                                </td>
                                            </tr>

                                            <tr>
                                                <td class="font-medium">Jim Green</td>
                                                <td>27</td>
                                                <td>London No. 1 Lake Park</td>
                                                <td class="text-end font-medium">
                                                <a class="text-primary hover:text-primary" href="javascript:void(0);">Delete</a>
                                                </td>
                                            </tr>

                                            <tr>
                                                <td class="font-medium">Joe Black</td>
                                                <td>31</td>
                                                <td>Sidney No. 1 Lake Park</td>
                                                <td class="text-end font-medium">
                                                <a class="text-primary hover:text-primary" href="javascript:void(0);">Delete</a>
                                                </td>
                                            </tr>
                                            </tbody>
                                        </table>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-span-12 lg:col-span-6">
                                <div class="box">
                                    <div class="box-header">
                                        <h5 class="box-title">Secondary Table</h5>
                                    </div>
                                    <div class="box-body">
                                        <div class="overflow-auto table-secondary rounded-sm border border-gray-200 dark:border-white/10">
                                        <table class="ti-custom-table ti-custom-table-head">
                                            <thead>
                                            <tr>
                                                <th scope="col">Name</th>
                                                <th scope="col">Age</th>
                                                <th scope="col">Address</th>
                                                <th scope="col" class="!text-end">Action</th>
                                            </tr>
                                            </thead>
                                            <tbody>
                                            <tr>
                                                <td class="font-medium">John Brown</td>
                                                <td>45</td>
                                                <td>New York No. 1 Lake Park</td>
                                                <td class="text-end font-medium">
                                                <a class="text-secondary hover:text-secondary" href="javascript:void(0);">Delete</a>
                                                </td>
                                            </tr>

                                            <tr>
                                                <td class="font-medium">Jim Green</td>
                                                <td>27</td>
                                                <td>London No. 1 Lake Park</td>
                                                <td class="text-end font-medium">
                                                <a class="text-secondary hover:text-secondary" href="javascript:void(0);">Delete</a>
                                                </td>
                                            </tr>

                                            <tr>
                                                <td class="font-medium">Joe Black</td>
                                                <td>31</td>
                                                <td>Sidney No. 1 Lake Park</td>
                                                <td class="text-end font-medium">
                                                <a class="text-secondary hover:text-secondary" href="javascript:void(0);">Delete</a>
                                                </td>
                                            </tr>
                                            </tbody>
                                        </table>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-span-12 lg:col-span-6">
                                <div class="box">
                                    <div class="box-header">
                                        <h5 class="box-title">Warning Table</h5>
                                    </div>
                                    <div class="box-body">
                                        <div class="overflow-auto table-warning rounded-sm border border-gray-200 dark:border-white/10">
                                        <table class="ti-custom-table ti-custom-table-head">
                                            <thead>
                                            <tr>
                                                <th scope="col">Name</th>
                                                <th scope="col">Age</th>
                                                <th scope="col">Address</th>
                                                <th scope="col" class="!text-end">Action</th>
                                            </tr>
                                            </thead>
                                            <tbody>
                                            <tr>
                                                <td class="font-medium">John Brown</td>
                                                <td>45</td>
                                                <td>New York No. 1 Lake Park</td>
                                                <td class="text-end font-medium">
                                                <a class="text-warning hover:text-warning" href="javascript:void(0);">Delete</a>
                                                </td>
                                            </tr>

                                            <tr>
                                                <td class="font-medium">Jim Green</td>
                                                <td>27</td>
                                                <td>London No. 1 Lake Park</td>
                                                <td class="text-end font-medium">
                                                <a class="text-warning hover:text-warning" href="javascript:void(0);">Delete</a>
                                                </td>
                                            </tr>

                                            <tr>
                                                <td class="font-medium">Joe Black</td>
                                                <td>31</td>
                                                <td>Sidney No. 1 Lake Park</td>
                                                <td class="text-end font-medium">
                                                <a class="text-warning hover:text-warning" href="javascript:void(0);">Delete</a>
                                                </td>
                                            </tr>
                                            </tbody>
                                        </table>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-span-12 lg:col-span-6">
                                <div class="box">
                                    <div class="box-header">
                                        <h5 class="box-title">Info Table</h5>
                                    </div>
                                    <div class="box-body">
                                        <div class="overflow-auto table-info rounded-sm border border-gray-200 dark:border-white/10">
                                        <table class="ti-custom-table ti-custom-table-head">
                                            <thead>
                                            <tr>
                                                <th scope="col">Name</th>
                                                <th scope="col">Age</th>
                                                <th scope="col">Address</th>
                                                <th scope="col" class="!text-end">Action</th>
                                            </tr>
                                            </thead>
                                            <tbody>
                                            <tr>
                                                <td class="font-medium">John Brown</td>
                                                <td>45</td>
                                                <td>New York No. 1 Lake Park</td>
                                                <td class="text-end font-medium">
                                                <a class="text-info hover:text-info" href="javascript:void(0);">Delete</a>
                                                </td>
                                            </tr>

                                            <tr>
                                                <td class="font-medium">Jim Green</td>
                                                <td>27</td>
                                                <td>London No. 1 Lake Park</td>
                                                <td class="text-end font-medium">
                                                <a class="text-info hover:text-info" href="javascript:void(0);">Delete</a>
                                                </td>
                                            </tr>

                                            <tr>
                                                <td class="font-medium">Joe Black</td>
                                                <td>31</td>
                                                <td>Sidney No. 1 Lake Park</td>
                                                <td class="text-end font-medium">
                                                <a class="text-info hover:text-info" href="javascript:void(0);">Delete</a>
                                                </td>
                                            </tr>
                                            </tbody>
                                        </table>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-span-12 lg:col-span-6">
                                <div class="box">
                                    <div class="box-header">
                                        <h5 class="box-title">Danger Table</h5>
                                    </div>
                                    <div class="box-body">
                                        <div class="overflow-auto table-danger rounded-sm border border-gray-200 dark:border-white/10">
                                        <table class="ti-custom-table ti-custom-table-head">
                                            <thead>
                                            <tr>
                                                <th scope="col">Name</th>
                                                <th scope="col">Age</th>
                                                <th scope="col">Address</th>
                                                <th scope="col" class="!text-end">Action</th>
                                            </tr>
                                            </thead>
                                            <tbody>
                                            <tr>
                                                <td class="font-medium">John Brown</td>
                                                <td>45</td>
                                                <td>New York No. 1 Lake Park</td>
                                                <td class="text-end font-medium">
                                                <a class="text-danger hover:text-danger" href="javascript:void(0);">Delete</a>
                                                </td>
                                            </tr>

                                            <tr>
                                                <td class="font-medium">Jim Green</td>
                                                <td>27</td>
                                                <td>London No. 1 Lake Park</td>
                                                <td class="text-end font-medium">
                                                <a class="text-danger hover:text-danger" href="javascript:void(0);">Delete</a>
                                                </td>
                                            </tr>

                                            <tr>
                                                <td class="font-medium">Joe Black</td>
                                                <td>31</td>
                                                <td>Sidney No. 1 Lake Park</td>
                                                <td class="text-end font-medium">
                                                <a class="text-danger hover:text-danger" href="javascript:void(0);">Delete</a>
                                                </td>
                                            </tr>
                                            </tbody>
                                        </table>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-span-12 lg:col-span-6">
                                <div class="box">
                                    <div class="box-header">
                                        <h5 class="box-title">Success Table</h5>
                                    </div>
                                    <div class="box-body">
                                        <div class="overflow-auto table-success rounded-sm border border-gray-200 dark:border-white/10">
                                        <table class="ti-custom-table ti-custom-table-head">
                                            <thead>
                                            <tr>
                                                <th scope="col">Name</th>
                                                <th scope="col">Age</th>
                                                <th scope="col">Address</th>
                                                <th scope="col" class="!text-end">Action</th>
                                            </tr>
                                            </thead>
                                            <tbody>
                                            <tr>
                                                <td class="font-medium">John Brown</td>
                                                <td>45</td>
                                                <td>New York No. 1 Lake Park</td>
                                                <td class="text-end font-medium">
                                                <a class="text-success hover:text-success" href="javascript:void(0);">Delete</a>
                                                </td>
                                            </tr>

                                            <tr>
                                                <td class="font-medium">Jim Green</td>
                                                <td>27</td>
                                                <td>London No. 1 Lake Park</td>
                                                <td class="text-end font-medium">
                                                <a class="text-success hover:text-success" href="javascript:void(0);">Delete</a>
                                                </td>
                                            </tr>

                                            <tr>
                                                <td class="font-medium">Joe Black</td>
                                                <td>31</td>
                                                <td>Sidney No. 1 Lake Park</td>
                                                <td class="text-end font-medium">
                                                <a class="text-success hover:text-success" href="javascript:void(0);">Delete</a>
                                                </td>
                                            </tr>
                                            </tbody>
                                        </table>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            </div>
                            <!-- End::row-13-->


                        </div>
                        <!-- Start::main-content -->

                    </div>

@endsection

@section('scripts')

@endsection