@if (currentTheme === 'tailwind') {

<section class="bg-gray-50 dark:bg-gray-950">
    <div class="overflow-x-auto m-auto">
        <div class="flex justify-center min-w-max m-6">
            <table class="table w-full table-bordered">
                <thead class="bg-white dark:bg-gray-900 hover:bg-white hover:dark:bg-gray-900">
                    <tr class="bg-white dark:bg-gray-900 hover:bg-white hover:dark:bg-gray-900">
                        <th class="border-none w-52 align-baseline">
                            <div class="align-baseline text-left font-medium p-5 text-lg text-gray-900 dark:text-white">
                                Compare Plans
                            </div>
                        </th>
                        <th class="text-center w-72 font-medium text-base border-l border-r border-gray-200 dark:border-gray-600">
                            <div class="e-card rounded-none bg-white dark:bg-gray-900 hover:bg-white hover:dark:bg-gray-900 border-none shadow-none e-bigger py-2">
                                <div class="e-card-header">
                                    <div class="e-card-header-caption">
                                        <div class="e-card-title font-medium text-lg text-gray-900 dark:text-white">
                                            Single
                                        </div>
                                    </div>
                                </div>
                                <div class="e-card-content mb-4 mt-2">
                                    <div class="mt-3 mb-8">
                                        <h2 class="text-5xl text-gray-900 dark:text-white leading-tight font-bold">$69<span class="font-normal text-gray-700 dark:text-gray-200 text-3xl ml-2 line-through">$199</span></h2>
                                    </div>
                                    <p class="text-gray-700 text-base px-6 font-normal dark:text-gray-200">No monthly subscription, you only pay once.</p>
                                </div>
                                <div class="e-card-actions leading-9">
                                    <button ejs-button class="e-primary text-lg font-medium e-outline w-full" content="Choose a plan" type="button" aria-label="choose a plan" role="button"></button>
                                </div>
                            </div>
                        </th>
                        <th class="text-center w-72 font-medium text-base border-r border-gray-200 dark:border-gray-600">
                            <div class="e-card bg-white dark:bg-gray-900 hover:bg-white hover:dark:bg-gray-900 rounded-none border-none shadow-none e-bigger py-2">
                                <div class="e-card-header">
                                    <div class="e-card-header-caption">
                                        <div class="e-card-title font-medium text-lg text-gray-900 dark:text-white">
                                            Premium
                                        </div>
                                    </div>
                                </div>
                                <div class="e-card-content mb-4 mt-2">
                                    <div class="mt-3 mb-8">
                                        <h2 class="text-5xl leading-tight text-gray-900 dark:text-white font-bold">$149<span class="font-normal text-gray-700 dark:text-gray-200 text-3xl ml-2 line-through">$599</span></h2>
                                    </div>
                                    <p class="text-gray-700 text-base px-6 font-normal dark:text-gray-200">No monthly subscription, you only pay once.</p>
                                </div>
                                <div class="e-card-actions leading-9">
                                    <button ejs-button class="e-primary text-lg font-medium w-full" content="Choose a plan" type="button" aria-label="choose a plan" role="button"></button>
                                </div>
                            </div>
                        </th>
                        <th class="text-center w-72 font-medium text-base">
                            <div class="e-card rounded-none bg-white dark:bg-gray-900 hover:bg-white hover:dark:bg-gray-900 border-none shadow-none e-bigger py-2">
                                <div class="e-card-header">
                                    <div class="e-card-header-caption">
                                        <div class="e-card-title font-medium text-lg text-gray-900 dark:text-white">
                                            Business
                                        </div>
                                    </div>
                                </div>
                                <div class="e-card-content mb-4 mt-2">
                                    <div class="mt-3 mb-8">
                                        <h2 class="text-5xl text-gray-900 dark:text-white leading-tight font-bold">$249<span class="font-normal text-gray-700 dark:text-gray-200 text-3xl ml-2 line-through">$699</span></h2>
                                    </div>
                                    <p class="text-gray-700 text-base px-6 font-normal dark:text-gray-200">No monthly subscription, you only pay once.</p>
                                </div>
                                <div class="e-card-actions leading-9">
                                    <button ejs-button class="e-primary text-lg font-medium e-outline w-full" content="Choose a plan" type="button" aria-label="choose a plan" role="button"></button>
                                </div>
                            </div>
                        </th>
                    </tr>
                </thead>
                <tbody>
                    <tr class="border-b border-gray-200 dark:border-gray-600 border-none">
                        <td>
                            <h2 class="my-4 font-semibold text-gray-900 dark:text-white">Features</h2>
                        </td>
                    </tr>
                    <tr class="border-b border-gray-200 dark:border-gray-600">
                        <td class="border-r border-gray-200 dark:border-gray-600 text-gray-900 dark:text-white py-3 text-sm font-normal px-2">
                            Only 1 User
                        </td>
                        <td class="text-center border-r border-gray-200 dark:border-gray-600 py-3"><span class="e-icons text-gray-700 dark:text-white e-circle-check e-medium"></span></td>
                        <td class="text-center border-r border-gray-200 dark:border-gray-600 py-3"><span class="e-icons text-gray-700 dark:text-white e-circle-check e-medium"></span></td>
                        <td class="text-center py-3"><span class="e-icons text-gray-700 dark:text-white e-circle-check e-medium"></span></td>
                    </tr>
                    <tr class="border-b border-gray-200 dark:border-gray-600">
                        <td class="border-r border-gray-200 dark:border-gray-600 text-gray-900 dark:text-white py-3 text-sm font-normal px-2">
                            10 Projects
                        </td>
                        <td class="text-center border-r border-gray-200 dark:border-gray-600 py-3"><span class="e-icons text-gray-700 dark:text-white e-circle-check e-medium"></span></td>
                        <td class="text-center border-r border-gray-200 dark:border-gray-600 py-3"><span class="e-icons text-gray-700 dark:text-white e-circle-check e-medium"></span></td>
                        <td class="text-center py-3"><span class="e-icons text-gray-700 dark:text-white e-circle-check e-medium"></span></td>
                    </tr>
                    <tr class="border-b border-gray-200 dark:border-gray-600">
                        <td class="border-r border-gray-200 dark:border-gray-600 text-gray-900 dark:text-white py-3 text-sm font-normal px-2">
                            Agents Count
                        </td>
                        <td class="text-center border-r border-gray-200 dark:border-gray-600 text-gray-900 dark:text-white py-3 font-normal text-sm">
                            24
                        </td>
                        <td class="text-center border-r border-gray-200 dark:border-gray-600 text-gray-900 dark:text-white py-3 font-normal text-sm">
                            32
                        </td>
                        <td class="text-center py-3 font-normal text-sm text-gray-900 dark:text-white">100</td>
                    </tr>
                    <tr class="border-b border-gray-200 dark:border-gray-600">
                        <td class="border-r border-gray-200 dark:border-gray-600 text-gray-900 dark:text-white py-3 text-sm font-normal px-2">
                            Unlimited Bandwidth
                        </td>
                        <td class="text-center border-r border-gray-200 dark:border-gray-600 py-3"><span class="e-icons text-gray-700 dark:text-white e-circle-check e-medium"></span></td>
                        <td class="text-center border-r border-gray-200 dark:border-gray-600 py-3"><span class="e-icons text-gray-700 dark:text-white e-circle-check e-medium"></span></td>
                        <td class="text-center py-3"><span class="e-icons text-gray-700 dark:text-white e-circle-check e-medium"></span></td>
                    </tr>
                    <tr class="border-b border-gray-200 dark:border-gray-600">
                        <td class="border-r border-gray-200 dark:border-gray-600 text-gray-900 dark:text-white py-3 text-sm font-normal px-2">
                            Unlimited Data
                        </td>
                        <td class="text-center border-r border-gray-200 dark:border-gray-600 py-3"><span class="e-icons text-gray-700 dark:text-white e-circle-check e-medium"></span></td>
                        <td class="text-center border-r border-gray-200 dark:border-gray-600 py-3"><span class="e-icons text-gray-700 dark:text-white e-circle-check e-medium"></span></td>
                        <td class="text-center py-3"><span class="e-icons text-gray-700 dark:text-white e-circle-check e-medium"></span></td>
                    </tr>
                    <tr class="border-b border-gray-200 dark:border-gray-600 border-none">
                        <td>
                            <h2 class="my-4 font-semibold text-gray-900 dark:text-white">Storage & Security</h2>
                        </td>
                    </tr>
                    <tr class="border-b border-gray-200 dark:border-gray-600">
                        <td class="border-r border-gray-200 dark:border-gray-600 text-gray-900 dark:text-white py-3 text-sm font-normal px-2">
                            5 GB Storage
                        </td>
                        <td class="text-center border-r border-gray-200 dark:border-gray-600 py-3"><span class="e-icons text-gray-700 dark:text-white e-circle-check e-medium"></span></td>
                        <td class="text-center border-r border-gray-200 dark:border-gray-600 py-3"><span class="e-icons text-gray-700 dark:text-white e-circle-check e-medium"></span></td>
                        <td class="text-center py-3"><span class="e-icons text-gray-700 dark:text-white e-circle-check e-medium"></span></td>
                    </tr>
                    <tr class="border-b border-gray-200 dark:border-gray-600">
                        <td class="border-r border-gray-200 dark:border-gray-600 text-gray-900 dark:text-white py-3 text-sm font-normal px-2">
                            Fully Security Suite
                        </td>
                        <td class="text-center border-r border-gray-200 dark:border-gray-600 py-3"><span class="e-icons text-gray-700 dark:text-white e-circle-check e-medium"></span></td>
                        <td class="text-center border-r border-gray-200 dark:border-gray-600 py-3"><span class="e-icons text-gray-700 dark:text-white e-circle-check e-medium"></span></td>
                        <td class="text-center py-3"><span class="e-icons text-gray-700 dark:text-white e-circle-check e-medium"></span></td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</section>

} @else if (currentTheme === 'bootstrap5.3') {

<section class="bg-body">
    <div class="table-responsive">
        <div class="d-flex justify-content-center m-auto px-5 py-4" style="min-width: 1050px;">
            <table class="table">
                <thead>
                    <tr>
                        <th class="align-baseline w-25 p-0 border-0 border-end">
                            <div class="align-baseline text-left fw-medium lh-lg p-4 fs-6 text-body">
                                <div>Compare Plans</div>
                            </div>
                        </th>
                        <th class="text-center fw-medium fs-5 w-25 p-0 border-0 border-end">
                            <div class="e-card e-bigger lh-base border-0 shadow-none p-4">
                                <div class="e-card-header p-0">
                                    <div class="e-card-header-caption">
                                        <div class="card-title fw-medium fs-6">Single</div>
                                    </div>
                                </div>
                                <div class="e-card-content p-0">
                                    <h2 class="fs-1 my-3 fw-bold text-body">$69<span class="fw-normal text-body-tertiary fs-4 ms-2 text-decoration-line-through mt-1">$199</span></h2>
                                    <p class="fs-6 w-75 mx-auto fw-normal text-center text-light-emphasis m-0">No monthly subscription, you only pay once.</p>
                                </div>
                                <div class="e-card-actions p-0">
                                    <div class="mt-4 e-bigger">
                                        <button ejs-button class="e-primary e-outline e-block" type="button" aria-label="choose a plan" role="button">Choose a plan</button>
                                    </div>
                                </div>
                            </div>
                        </th>
                        <th class="text-center fw-medium fs-5 w-25 p-0 border-0 border-end">
                            <div class="e-card e-bigger lh-base border-0 shadow-none p-4">
                                <div class="e-card-header p-0">
                                    <div class="e-card-header-caption">
                                        <div class="card-title fw-medium fs-6 text-body">Premium</div>
                                    </div>
                                </div>
                                <div class="e-card-content p-0">
                                    <h2 class="fs-1 my-3 fw-bold text-body">$149<span class="fw-normal text-body-tertiary fs-4 ms-2 text-decoration-line-through mt-1">$599</span></h2>
                                    <p class="fs-6 w-75 mx-auto fw-normal text-center text-light-emphasis m-0">No monthly subscription, you only pay once.</p>
                                </div>
                                <div class="e-card-actions p-0">
                                    <div class="mt-4 e-bigger">
                                        <button ejs-button class="e-primary e-block" type="button" aria-label="choose a plan" role="button">Choose a plan</button>
                                    </div>
                                </div>
                            </div>
                        </th>
                        <th class="text-center fw-medium fs-5 w-25 p-0 border-0">
                            <div class="e-card e-bigger lh-base border-0 shadow-none p-4">
                                <div class="e-card-header p-0">
                                    <div class="e-card-header-caption">
                                        <div class="card-title fw-medium fs-6 text-body">Business</div>
                                    </div>
                                </div>
                                <div class="e-card-content p-0">
                                    <h2 class="fs-1 my-3 fw-bold text-body">$249<span class="fw-normal text-body-tertiary fs-4 ms-2 text-decoration-line-through mt-1">$699</span></h2>
                                    <p class="fs-6 w-75 mx-auto fw-normal text-center text-light-emphasis m-0">No monthly subscription, you only pay once.</p>
                                </div>
                                <div class="e-card-actions p-0">
                                    <div class="mt-4 e-bigger">
                                        <button ejs-button class="e-outline e-primary e-block" type="button" aria-label="choose a plan" role="button">Choose a plan</button>
                                    </div>
                                </div>
                            </div>
                        </th>
                    </tr>
                </thead>
                <tbody class="border-0">
                    <tr class="border-0">
                        <td class="border-0 ps-0">
                            <h2 class="my-3 fs-6 fw-bold text-body">Features</h2>
                        </td>
                    </tr>
                    <tr class="border-bottom border-0">
                        <td class="border-0 border-end py-3 text-sm px-2 text-body">Only 1 User</td>
                        <td class="text-center border-end py-3"><span class="e-icons text-body-secondary e-circle-check"></span></td>
                        <td class="text-center border-end py-3"><span class="e-icons text-body-secondary e-circle-check"></span></td>
                        <td class="text-center border-end-0 py-3"><span class="e-icons text-body-secondary e-circle-check"></span></td>
                    </tr>
                    <tr class="border-bottom">
                        <td class="border-start-0 border py-3 text-sm px-2 text-body">10 Projects</td>
                        <td class="text-center border-end py-3"><span class="e-icons text-body-secondary e-circle-check"></span></td>
                        <td class="text-center border-end py-3"><span class="e-icons text-body-secondary e-circle-check"></span></td>
                        <td class="text-center border-end-0 py-3"><span class="e-icons text-body-secondary e-circle-check"></span></td>
                    </tr>
                    <tr class="border-bottom">
                        <td class="border-start-0 border-end py-3 text-sm px-2 text-body">Agents Count</td>
                        <td class="text-center border-end py-3 text-body">24</td>
                        <td class="text-center border-end py-3 text-body">32</td>
                        <td class="text-center border-end-0 py-3 text-body">100</td>
                    </tr>
                    <tr class="border-bottom">
                        <td class="border-start-0 border-end py-3 text-sm px-2 text-body">Unlimited Bandwidth</td>
                        <td class="text-center border-end py-3"><span class="e-icons text-body-secondary e-circle-check"></span></td>
                        <td class="text-center border-end py-3"><span class="e-icons text-body-secondary e-circle-check"></span></td>
                        <td class="text-center border-end-0 py-3"><span class="e-icons text-body-secondary e-circle-check"></span></td>
                    </tr>
                    <tr class="border-bottom">
                        <td class="border-start-0 border-end py-3 text-sm px-2 text-body">Unlimited Data</td>
                        <td class="text-center border-end py-3"><span class="e-icons text-body-secondary e-circle-check"></span></td>
                        <td class="text-center border-end py-3"><span class="e-icons text-body-secondary e-circle-check"></span></td>
                        <td class="text-center border-end-0 py-3"><span class="e-icons text-body-secondary e-circle-check"></span></td>
                    </tr>
                    <tr class="border-0">
                        <td class="border-0 ps-0">
                            <h2 class="my-3 fs-6 fw-bold text-body">Storage & Security</h2>
                        </td>
                    </tr>
                    <tr class="border-0 border-bottom">
                        <td class="border-start-0 border-end py-3 text-sm px-2 text-body">5 GB Storage</td>
                        <td class="text-center border-end py-3"><span class="e-icons text-body-secondary e-circle-check"></span></td>
                        <td class="text-center border-end py-3"><span class="e-icons text-body-secondary e-circle-check"></span></td>
                        <td class="text-center border-end-0 py-3"><span class="e-icons text-body-secondary e-circle-check"></span></td>
                    </tr>
                    <tr class="border-bottom">
                        <td class="border-start-0 border-end py-3 text-sm px-2 text-body">Fully Security Suite</td>
                        <td class="text-center border-end py-3"><span class="e-icons text-body-secondary e-circle-check"></span></td>
                        <td class="text-center border-end py-3"><span class="e-icons text-body-secondary e-circle-check"></span></td>
                        <td class="text-center border-end-0 py-3"><span class="e-icons text-body-secondary e-circle-check"></span></td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</section>

}