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

<section class="bg-gray-50 dark:bg-gray-950">
    <div class="container overflow-x-auto m-auto" style="min-height: 36rem;">
        <div class="m-6 flex justify-center" style="min-width: 700px;">
            <table class="table w-full text-gray-900 dark:text-white table-bordered">
                <thead>
                    <tr>
                        <th class="w-1/4 py-2 text-left text-xl font-medium">
                            <h2>Compare Plans</h2>
                        </th>
                        <th class="py-2 px-4 w-1/4"></th>
                        <th class="py-2 px-4 w-1/4"></th>
                        <th class="py-2 px-4 w-1/4"></th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>
                            <h2 class="my-4 font-semibold">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 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 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 py-3 text-sm font-normal px-2">Agents Count</td>
                        <td class="text-center border-r border-gray-200 dark:border-gray-600 py-3 font-normal text-sm">
                            24
                        </td>
                        <td class="text-center border-r border-gray-200 dark:border-gray-600 py-3 font-normal text-sm">
                            32
                        </td>
                        <td class="text-center py-3 font-normal text-sm">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 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 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-none">
                        <td>
                            <h2 class="my-4 font-semibold">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 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 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: 760px;">
            <table class="table">
                <thead>
                    <tr class="border-0">
                        <th class="border-0 p-0 fs-4 fw-medium w-25 pb-3 font-semibold text-nowrap text-left text-body">
                            Compare Plans
                        </th>
                        <th class="border-0 py-2 px-4 w-25"></th>
                        <th class="border-0 py-2 px-4 w-25"></th>
                        <th class="border-0 py-2 px-4 w-25"></th>
                    </tr>
                </thead>
                <tbody class="border-0">
                    <tr class="border-0">
                        <td class="border-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 small text-body" style="width: 200px;">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 small 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 small text-body">Agents Count</td>
                        <td class="text-center border-end py-3 text-body small">24</td>
                        <td class="text-center border-end py-3 text-body small">32</td>
                        <td class="text-center border-end-0 py-3 text-body small">100</td>
                    </tr>
                    <tr class="border-bottom">
                        <td class="border-start-0 border-end py-3 text-sm px-2 small 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 small 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">
                            <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 small 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 small 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>

}