如何与CSS创建功能比较表
#html #网络开发人员 #教程 #tailwindcss

Live Demo / Download

毫无疑问，设计最复杂的组件之一是定价选项卡，因为它不断发展（基于产品的特征和功能），并且需要进行连续测试以确保最大的转换。

定价选项卡用于显示每个特定层的成本，其主要目的是显示价格与每个计划中的功能之间的关系。

在本教程中，谈到功能，将开发一个具有功能比较表的响应式定价表。当产品提供多个功能时，这种类型的表特别有用，并且需要突出不同计划之间的差异。

我们已经在我们的两个Tailwind CSS templates中设计了一些东西，因此，如果您想看看我们如何做，请访问 Stellar ，一个dark next.js landing page template和 simple ，simple website template。

用CSS开制桌子

好吧，让我们创建一个新的HTML文档，我们在其中使用Tailwind CSS为价格表编写代码。现在，这是我们的价格表结构的计划：

  • 在较小的屏幕上，我们希望一个单列布局保持整洁和整洁
  • 一旦我们击中了md断点（这是至少768px的浏览器窗口宽度），我们将切换到 4列网格布局 
<div class="max-w-sm mx-auto md:max-w-none grid md:grid-cols-4 md:-mx-6 text-sm">
    <!-- Column with labels -->
    <section>
        <!-- Cell with the pricing toggle -->
        <!-- Cell withLabel #1 -->
        <!-- Cell withLabel #2 -->
        <!-- ... -->
    </section>
    <!-- Essential table -->
    <section>
        <!-- Cell with price -->
        <!-- Cell with feature #1 -->
        <!-- Cell with feature #2 -->
        <!-- ... -->
    </section>
    <!-- Perform table -->
    <section>
        <!-- Cell with price -->
        <!-- Cell with feature #1 -->
        <!-- Cell with feature #2 -->
        <!-- ... -->
    </section>
    <!-- Enterprise table -->
    <section>
        <!-- Cell with price -->
        <!-- Cell with feature #1 -->
        <!-- Cell with feature #2 -->
        <!-- ... -->
    </section>

</div>

现在，如果您是经验丰富的开发人员，您可能已经发现了我们刚刚定义的结构的问题。它在移动设备上工作得很漂亮，在移动设备上垂直堆叠，但由于桌面网格布局而降低了，因此由于各自的<section>元素包裹了桌面网格布局。

。

为了解决这个问题，我们将使用CSS属性display: contents从768px及向上开始。通过简单地将Tailwind Utility类md:contents添加到<section>元素，我们可以神奇地使其成为隐形容器，允许每个单元格作为网格的直接后代出现。

<div class="max-w-sm mx-auto md:max-w-none grid md:grid-cols-4 md:-mx-6 text-sm">
    <!-- Column with labels -->
    <section class="md:contents">
        <!-- Pricing toggle -->
        <!-- Label #1 -->
        <!-- Label #2 -->
        <!-- ... -->
    </section>
    <!-- Essential table -->
    <section class="md:contents">
        <!-- Cell with price -->
        <!-- Feature #1 -->
        <!-- Feature #2 -->
        <!-- ... -->
    </section>
    <!-- Perform table -->
    <section class="md:contents">
        <!-- Cell with price -->
        <!-- Feature #1 -->
        <!-- Feature #2 -->
        <!-- ... -->
    </section>
    <!-- Enterprise table -->
    <section class="md:contents">
        <!-- Cell with price -->
        <!-- Feature #1 -->
        <!-- Feature #2 -->
        <!-- ... -->
    </section>

</div>

好吧，我们解决了一个问题，但是在我们继续前进之前，还有另一个障碍要克服。虽然我们的布局在移动屏幕上的魅力就像魅力一样，但我们在台式机上的手机顺序遇到了一个小问题。。

。

由于我们使用了CSS网格，因此单元格自然遵循它们在HTML代码中显示的顺序。结果，如果我们坚持到目前为止所写的代码，我们的表将按此顺序显示单元格：

Pricing toggle | Label #1        | Label #2        | Cell with price
--------------------------------------------------------------------
Feature #1     | Feature #2      | Cell with price | Feature #1     
--------------------------------------------------------------------
Feature #2     | Cell with price | Feature #1      | Feature #2

但是，这不是我们想要的！我们需要在正确的顺序中显示细胞，例如：

Pricing toggle | Cell with price | Cell with price | Cell with price
--------------------------------------------------------------------
Label #1       | Feature #1      | Feature #1      | Feature #1     
--------------------------------------------------------------------
Label #2       | Feature #2      | Feature #2      | Feature #2

要恢复正确的单元格顺序，我们将使用CSS属性order，并为每个单元格分配一个唯一的类以指示其在网格中的位置。就像这样：

<div class="max-w-sm mx-auto md:max-w-none grid md:grid-cols-4 md:-mx-6 text-sm">
    <!-- Column with labels -->
    <section class="md:contents">
        <!-- Pricing toggle -->
        <div>...</div>
        <!-- Label #1 -->
        <div class="md:order-1">...</div>
        <!-- Label #2 -->
        <div class="md:order-2">...</div>
        <!-- ... -->
    </section>
    <!-- Essential table -->
    <section class="md:contents">
        <!-- Cell with price -->
        <div>...</div>
        <!-- Feature #1 -->
        <div class="md:order-1">...</div>
        <!-- Feature #2 -->
        <div class="md:order-2">...</div>
        <!-- ... -->
    </section>
    <!-- Perform table -->
    <section class="md:contents">
        <!-- Cell with price -->
        <div>...</div>
        <!-- Feature #1 -->
        <div class="md:order-1">...</div>
        <!-- Feature #2 -->
        <div class="md:order-2">...</div>
        <!-- ... -->
    </section>
    <!-- Enterprise table -->
    <section class="md:contents [&>div:first-child]:pt-10 [&>div:first-child]:rounded-t-2xl [&>div:last-child]:pb-10 [&>div:last-child]:rounded-b-2xl">
        <!-- Cell with price -->
        <div>...</div>
        <!-- Feature #1 -->
        <div class="md:order-1">...</div>
        <!-- Feature #2 -->
        <div class="md:order-2">...</div>
        <!-- ... -->
    </section>

</div>

太好了！我们取得了进步。随着表结构的设置，是时候将一些多汁的含量注入这些细胞中了。

创建定价切换按钮

让我们通过创建定价切换来开始问题，这使用户可以在每月和年度价格之间切换：

<div class="relative bg-white dark:bg-slate-900 px-6 flex flex-col justify-end">
    <div class="pb-5 md:border-b border-slate-200 dark:border-slate-700">
        <!-- Toggle switch -->
        <div class="max-md:text-center">
            <div class="inline-flex items-center whitespace-nowrap">
                <div class="text-sm text-slate-500 mr-2 md:max-lg:sr-only">Monthly</div>
                <div class="relative">
                    <input type="checkbox" id="toggle" class="peer sr-only" />
                    <label for="toggle" class="relative flex h-6 w-11 cursor-pointer items-center rounded-full bg-slate-400 px-0.5 outline-slate-400 transition-colors before:h-5 before:w-5 before:rounded-full before:bg-white before:shadow-sm before:transition-transform before:duration-150 peer-checked:bg-indigo-500 peer-checked:before:translate-x-full peer-focus-visible:outline peer-focus-visible:outline-offset-2 peer-focus-visible:outline-gray-400 peer-checked:peer-focus-visible:outline-indigo-500">
                        <span class="sr-only">Pay Yearly</span>
                    </label>
                </div>
                <div class="text-sm text-slate-500 ml-2">Yearly <span class="text-emerald-500">(-20%)</span></div>
            </div>
        </div>
    </div>
</div>

我们选择了复选框输入是最合适的选择。仅屏幕读取器可见本机复选框，并使用Tailwind CSS Utility类的功能类似于开关按钮。

在以下段落中，我们将向您展示如何使用Alpine.js。

添加功能标签

该功能标签只能在较大的屏幕上显示，以提供更好的概述，允许在每个计划的功能的功能之间进行轻松比较。但是，在移动设备上，我们没有足够的水平空间来显示它们。因此，我们将遵循这种方法：

  • 我们将使用尾风CSS类max-md:hidden将标签隐藏在小屏幕设备上。此外，我们将使用aria-hidden="true"属性将其隐藏在屏幕读取器中。
  • 在定价选项卡的每个单元格中，我们将包含特定的特征信息，我们将使用sr-only类隐藏在桌面屏幕上。我们使用sr-only代替hidden来确保所有三个定价表都为屏幕读取器提供所有必要的语义内容。

在这里第一列看起来：

<!-- Column with labels -->
<section class="md:contents">
    <!-- Pricing toggle -->
    <div class="relative bg-white dark:bg-slate-900 px-6 flex flex-col justify-end">
        <div class="pb-5 md:border-b border-slate-200 dark:border-slate-700">
            <!-- Toggle switch -->
            <div class="max-md:text-center">
                <div class="inline-flex items-center whitespace-nowrap">
                    <div class="text-sm text-slate-500 mr-2 md:max-lg:sr-only">Monthly</div>
                    <div class="relative">
                        <input type="checkbox" id="toggle" class="peer sr-only" />
                        <label for="toggle" class="relative flex h-6 w-11 cursor-pointer items-center rounded-full bg-slate-400 px-0.5 outline-slate-400 transition-colors before:h-5 before:w-5 before:rounded-full before:bg-white before:shadow-sm before:transition-transform before:duration-150 peer-checked:bg-indigo-500 peer-checked:before:translate-x-full peer-focus-visible:outline peer-focus-visible:outline-offset-2 peer-focus-visible:outline-gray-400 peer-checked:peer-focus-visible:outline-indigo-500">
                            <span class="sr-only">Pay Yearly</span>
                        </label>
                    </div>
                    <div class="text-sm text-slate-500 ml-2">Yearly <span class="text-emerald-500">(-20%)</span></div>
                </div>
            </div>
        </div>
    </div>
    <!-- # Platform -->
    <div class="bg-white dark:bg-slate-900 px-6 flex flex-col justify-end max-md:hidden md:order-1" aria-hidden="true">
        <div class="py-2 text-slate-900 font-medium mt-4">Platform</div>
    </div>
    <!-- Account Access -->
    <div class="bg-white dark:bg-slate-900 px-6 flex flex-col justify-end max-md:hidden md:order-2" aria-hidden="true">
        <div class="py-2 text-slate-600 dark:text-slate-400 border-b border-slate-200 dark:border-slate-700">Account Access</div>
    </div>
    <!-- Custom Domains -->
    <div class="bg-white dark:bg-slate-900 px-6 flex flex-col justify-end max-md:hidden md:order-3" aria-hidden="true">
        <div class="py-2 text-slate-600 dark:text-slate-400 border-b border-slate-200 dark:border-slate-700">Custom Domains</div>
    </div>
    <!-- Receipts Forward -->
    <div class="bg-white dark:bg-slate-900 px-6 flex flex-col justify-end max-md:hidden md:order-4" aria-hidden="true">
        <div class="py-2 text-slate-600 dark:text-slate-400 border-b border-slate-200 dark:border-slate-700">Receipts Forward</div>
    </div>
    <!-- Supplier Management -->
    <div class="bg-white dark:bg-slate-900 px-6 flex flex-col justify-end max-md:hidden md:order-5" aria-hidden="true">
        <div class="py-2 text-slate-600 dark:text-slate-400 border-b border-slate-200 dark:border-slate-700">Supplier Management</div>
    </div>
    <!-- # Features -->
    <div class="bg-white dark:bg-slate-900 px-6 flex flex-col justify-end max-md:hidden md:order-6" aria-hidden="true">
        <div class="py-2 text-slate-900 font-medium mt-4">Features</div>
    </div>
    <!-- Generate Public URLs -->
    <div class="bg-white dark:bg-slate-900 px-6 flex flex-col justify-end max-md:hidden md:order-7" aria-hidden="true">
        <div class="py-2 text-slate-600 dark:text-slate-400 border-b border-slate-200 dark:border-slate-700">Generate Public URLs</div>
    </div>
    <!-- API Integrations -->
    <div class="bg-white dark:bg-slate-900 px-6 flex flex-col justify-end max-md:hidden md:order-8" aria-hidden="true">
        <div class="py-2 text-slate-600 dark:text-slate-400 border-b border-slate-200 dark:border-slate-700">API Integrations</div>
    </div>
    <!-- Extra Add-ons -->
    <div class="bg-white dark:bg-slate-900 px-6 flex flex-col justify-end max-md:hidden md:order-9" aria-hidden="true">
        <div class="py-2 text-slate-600 dark:text-slate-400 border-b border-slate-200 dark:border-slate-700">Extra Add-ons</div>
    </div>
    <!-- Admin Roles -->
    <div class="bg-white dark:bg-slate-900 px-6 flex flex-col justify-end max-md:hidden md:order-10" aria-hidden="true">
        <div class="py-2 text-slate-600 dark:text-slate-400 border-b border-slate-200 dark:border-slate-700">Admin Roles</div>
    </div>
    <!-- Admin Roles -->
    <div class="bg-white dark:bg-slate-900 px-6 flex flex-col justify-end max-md:hidden md:order-11" aria-hidden="true">
        <div class="py-2 text-slate-600 dark:text-slate-400 border-b border-slate-200 dark:border-slate-700">Admin Roles</div>
    </div>
    <!-- Enterprise Add-ons -->
    <div class="bg-white dark:bg-slate-900 px-6 flex flex-col justify-end max-md:hidden md:order-12" aria-hidden="true">
        <div class="py-2 text-slate-600 dark:text-slate-400 border-b border-slate-200 dark:border-slate-700">Enterprise Add-ons</div>
    </div>
    <!-- # Support -->
    <div class="bg-white dark:bg-slate-900 px-6 flex flex-col justify-end max-md:hidden md:order-[13]" aria-hidden="true">
        <div class="py-2 text-slate-900 font-medium mt-4">Support</div>
    </div>
    <!-- Custom Connection -->
    <div class="bg-white dark:bg-slate-900 px-6 flex flex-col justify-end max-md:hidden md:order-[14]" aria-hidden="true">
        <div class="py-2 text-slate-600 dark:text-slate-400 border-b border-slate-200 dark:border-slate-700">Custom Connection</div>
    </div>
</section>

定义定价表的内容

现在，让我们为我们的定价表定义内容。正如您可能从演示中注意到的那样，中间定价桌有一个黑暗的样式。我们为所有三个定价表提供了深色变体的课程，以便您可以选择将黑暗风格应用于哪个。您可以通过将dark类添加到所需的<section>元素来完成此操作。

无需进一步的解释，这里是完整的HTML代码，包括4列网格：

<div class="max-w-sm mx-auto md:max-w-none grid md:grid-cols-4 md:-mx-6 text-sm">
    <!-- Column with labels -->
    <section class="md:contents [&>div:first-child]:pt-10 [&>div:first-child]:rounded-t-2xl [&>div:last-child]:pb-10 [&>div:last-child]:rounded-b-2xl">
        <!-- Pricing toggle -->
        <div class="relative bg-white dark:bg-slate-900 px-6 flex flex-col justify-end">
            <div class="pb-5 md:border-b border-slate-200 dark:border-slate-700">
                <!-- Toggle switch -->
                <div class="max-md:text-center">
                    <div class="inline-flex items-center whitespace-nowrap">
                        <div class="text-sm text-slate-500 mr-2 md:max-lg:sr-only">Monthly</div>
                        <div class="relative">
                            <input type="checkbox" id="toggle" class="peer sr-only" />
                            <label for="toggle" class="relative flex h-6 w-11 cursor-pointer items-center rounded-full bg-slate-400 px-0.5 outline-slate-400 transition-colors before:h-5 before:w-5 before:rounded-full before:bg-white before:shadow-sm before:transition-transform before:duration-150 peer-checked:bg-indigo-500 peer-checked:before:translate-x-full peer-focus-visible:outline peer-focus-visible:outline-offset-2 peer-focus-visible:outline-gray-400 peer-checked:peer-focus-visible:outline-indigo-500">
                                <span class="sr-only">Pay Yearly</span>
                            </label>
                        </div>
                        <div class="text-sm text-slate-500 ml-2">Yearly <span class="text-emerald-500">(-20%)</span></div>
                    </div>
                </div>
            </div>
        </div>
        <!-- # Platform -->
        <div class="bg-white dark:bg-slate-900 px-6 flex flex-col justify-end max-md:hidden md:order-1" aria-hidden="true">
            <div class="py-2 text-slate-900 font-medium mt-4">Platform</div>
        </div>
        <!-- Account Access -->
        <div class="bg-white dark:bg-slate-900 px-6 flex flex-col justify-end max-md:hidden md:order-2" aria-hidden="true">
            <div class="py-2 text-slate-600 dark:text-slate-400 border-b border-slate-200 dark:border-slate-700">Account Access</div>
        </div>
        <!-- Custom Domains -->
        <div class="bg-white dark:bg-slate-900 px-6 flex flex-col justify-end max-md:hidden md:order-3" aria-hidden="true">
            <div class="py-2 text-slate-600 dark:text-slate-400 border-b border-slate-200 dark:border-slate-700">Custom Domains</div>
        </div>
        <!-- Receipts Forward -->
        <div class="bg-white dark:bg-slate-900 px-6 flex flex-col justify-end max-md:hidden md:order-4" aria-hidden="true">
            <div class="py-2 text-slate-600 dark:text-slate-400 border-b border-slate-200 dark:border-slate-700">Receipts Forward</div>
        </div>
        <!-- Supplier Management -->
        <div class="bg-white dark:bg-slate-900 px-6 flex flex-col justify-end max-md:hidden md:order-5" aria-hidden="true">
            <div class="py-2 text-slate-600 dark:text-slate-400 border-b border-slate-200 dark:border-slate-700">Supplier Management</div>
        </div>
        <!-- # Features -->
        <div class="bg-white dark:bg-slate-900 px-6 flex flex-col justify-end max-md:hidden md:order-6" aria-hidden="true">
            <div class="py-2 text-slate-900 font-medium mt-4">Features</div>
        </div>
        <!-- Generate Public URLs -->
        <div class="bg-white dark:bg-slate-900 px-6 flex flex-col justify-end max-md:hidden md:order-7" aria-hidden="true">
            <div class="py-2 text-slate-600 dark:text-slate-400 border-b border-slate-200 dark:border-slate-700">Generate Public URLs</div>
        </div>
        <!-- API Integrations -->
        <div class="bg-white dark:bg-slate-900 px-6 flex flex-col justify-end max-md:hidden md:order-8" aria-hidden="true">
            <div class="py-2 text-slate-600 dark:text-slate-400 border-b border-slate-200 dark:border-slate-700">API Integrations</div>
        </div>
        <!-- Extra Add-ons -->
        <div class="bg-white dark:bg-slate-900 px-6 flex flex-col justify-end max-md:hidden md:order-9" aria-hidden="true">
            <div class="py-2 text-slate-600 dark:text-slate-400 border-b border-slate-200 dark:border-slate-700">Extra Add-ons</div>
        </div>
        <!-- Admin Roles -->
        <div class="bg-white dark:bg-slate-900 px-6 flex flex-col justify-end max-md:hidden md:order-10" aria-hidden="true">
            <div class="py-2 text-slate-600 dark:text-slate-400 border-b border-slate-200 dark:border-slate-700">Admin Roles</div>
        </div>
        <!-- Admin Roles -->
        <div class="bg-white dark:bg-slate-900 px-6 flex flex-col justify-end max-md:hidden md:order-11" aria-hidden="true">
            <div class="py-2 text-slate-600 dark:text-slate-400 border-b border-slate-200 dark:border-slate-700">Admin Roles</div>
        </div>
        <!-- Enterprise Add-ons -->
        <div class="bg-white dark:bg-slate-900 px-6 flex flex-col justify-end max-md:hidden md:order-12" aria-hidden="true">
            <div class="py-2 text-slate-600 dark:text-slate-400 border-b border-slate-200 dark:border-slate-700">Enterprise Add-ons</div>
        </div>
        <!-- # Support -->
        <div class="bg-white dark:bg-slate-900 px-6 flex flex-col justify-end max-md:hidden md:order-[13]" aria-hidden="true">
            <div class="py-2 text-slate-900 font-medium mt-4">Support</div>
        </div>
        <!-- Custom Connection -->
        <div class="bg-white dark:bg-slate-900 px-6 flex flex-col justify-end max-md:hidden md:order-[14]" aria-hidden="true">
            <div class="py-2 text-slate-600 dark:text-slate-400 border-b border-slate-200 dark:border-slate-700">Custom Connection</div>
        </div>
    </section>
    <!-- End: Column with labels -->
    <!-- Essential table -->
    <section class="md:contents [&>div:first-child]:pt-10 [&>div:first-child]:rounded-t-2xl [&>div:last-child]:pb-10 [&>div:last-child]:rounded-b-2xl">
        <div class="relative bg-white dark:bg-slate-900 px-4 lg:px-6 flex flex-col justify-end">
            <div class="grow mb-5">
                <div class="font-semibold text-slate-900 dark:text-slate-200 mb-0.5">Essential</div>
                <div class="mb-1">
                    <span class="text-xl font-medium text-slate-900 dark:text-slate-200">$</span><span class="text-3xl font-bold text-slate-900 dark:text-slate-200">29</span><span class="text-slate-500 font-medium">/mo</span>
                </div>
                <div class="text-sm text-slate-500">Unlimited placeholder texts.</div>
            </div>
            <div class="pb-4 border-b border-slate-200 dark:border-slate-700">
                <a class="w-full inline-flex justify-center whitespace-nowrap rounded-lg bg-indigo-500 px-2.5 py-1.5 text-sm font-medium text-white shadow-sm shadow-indigo-950/10 hover:bg-indigo-600 focus-visible:outline-none focus-visible:ring focus-visible:ring-indigo-300 dark:focus-visible:ring-slate-600 transition-colors duration-150 group" href="#0">
                    Get Started <span class="tracking-normal text-indigo-300 group-hover:translate-x-0.5 transition-transform duration-150 ease-in-out ml-1">-&gt;</span>
                </a>
            </div>
        </div>
        <!-- # Platform -->
        <div class="bg-white dark:bg-slate-900 px-4 lg:px-6 flex flex-col justify-end md:order-1">
            <div class="py-2 text-slate-900 font-medium mt-4 md:sr-only">Platform</div>
        </div>
        <!-- Account Access -->
        <div class="bg-white dark:bg-slate-900 px-4 lg:px-6 flex flex-col justify-end md:order-2">
            <div class="flex items-center h-full border-b border-slate-200 dark:border-slate-700 py-2 text-slate-600 dark:text-slate-400">
                <svg class="shrink-0 fill-emerald-500 mr-3" xmlns="http://www.w3.org/2000/svg" width="12" height="9">
                    <path d="M10.28.28 3.989 6.575 1.695 4.28A1 1 0 0 0 .28 5.695l3 3a1 1 0 0 0 1.414 0l7-7A1 1 0 0 0 10.28.28Z" />
                </svg>
                <span>400 <span class="md:sr-only">Account Access</span></span>
            </div>
        </div>
        <!-- Custom Domains -->
        <div class="bg-white dark:bg-slate-900 px-4 lg:px-6 flex flex-col justify-end md:order-3">
            <div class="flex items-center h-full border-b border-slate-200 dark:border-slate-700 py-2 text-slate-600 dark:text-slate-400">
                <svg class="shrink-0 fill-emerald-500 mr-3" xmlns="http://www.w3.org/2000/svg" width="12" height="9">
                    <path d="M10.28.28 3.989 6.575 1.695 4.28A1 1 0 0 0 .28 5.695l3 3a1 1 0 0 0 1.414 0l7-7A1 1 0 0 0 10.28.28Z" />
                </svg>
                <span>4 <span class="md:sr-only">Custom Domains</span></span>
            </div>
        </div>
        <!-- Receipts Forward -->
        <div class="bg-white dark:bg-slate-900 px-4 lg:px-6 flex flex-col justify-end md:order-4">
            <div class="flex items-center h-full border-b border-slate-200 dark:border-slate-700 py-2 text-slate-600 dark:text-slate-400">
                <svg class="shrink-0 fill-emerald-500 mr-3" xmlns="http://www.w3.org/2000/svg" width="12" height="9">
                    <path d="M10.28.28 3.989 6.575 1.695 4.28A1 1 0 0 0 .28 5.695l3 3a1 1 0 0 0 1.414 0l7-7A1 1 0 0 0 10.28.28Z" />
                </svg>
                <span>Unlimited <span class="md:sr-only">Receipts Forward</span></span>
            </div>
        </div>
        <!-- Supplier Management -->
        <div class="bg-white dark:bg-slate-900 px-4 lg:px-6 flex flex-col justify-end md:order-5">
            <div class="flex items-center h-full border-b border-slate-200 dark:border-slate-700 py-2 text-slate-600 dark:text-slate-400">
                <svg class="shrink-0 fill-emerald-500 mr-3" xmlns="http://www.w3.org/2000/svg" width="12" height="9">
                    <path d="M10.28.28 3.989 6.575 1.695 4.28A1 1 0 0 0 .28 5.695l3 3a1 1 0 0 0 1.414 0l7-7A1 1 0 0 0 10.28.28Z" />
                </svg>
                <span>1 <span class="md:sr-only">Supplier Management</span></span>
            </div>
        </div>
        <!-- # Features -->
        <div class="bg-white dark:bg-slate-900 px-4 lg:px-6 flex flex-col justify-end md:order-6">
            <div class="py-2 text-slate-900 font-medium mt-4 md:sr-only">Features</div>
        </div>
        <!-- Generate Public URLs -->
        <div class="bg-white dark:bg-slate-900 px-4 lg:px-6 flex flex-col justify-end md:order-7">
            <div class="flex items-center h-full border-b border-slate-200 dark:border-slate-700 py-2 text-slate-600 dark:text-slate-400">
                <svg class="shrink-0 fill-emerald-500 mr-3" xmlns="http://www.w3.org/2000/svg" width="12" height="9">
                    <path d="M10.28.28 3.989 6.575 1.695 4.28A1 1 0 0 0 .28 5.695l3 3a1 1 0 0 0 1.414 0l7-7A1 1 0 0 0 10.28.28Z" />
                </svg>
                <span><span class="md:sr-only">Generate Public URLs</span></span>
            </div>
        </div>
        <!-- API Integrations -->
        <div class="bg-white dark:bg-slate-900 px-4 lg:px-6 flex flex-col justify-end md:order-8">
            <div class="flex items-center h-full border-b border-slate-200 dark:border-slate-700 py-2 text-slate-600 dark:text-slate-400">
                <svg class="shrink-0 fill-emerald-500 mr-3" xmlns="http://www.w3.org/2000/svg" width="12" height="9">
                    <path d="M10.28.28 3.989 6.575 1.695 4.28A1 1 0 0 0 .28 5.695l3 3a1 1 0 0 0 1.414 0l7-7A1 1 0 0 0 10.28.28Z" />
                </svg>
                <span><span class="md:sr-only">API Integrations</span></span>
            </div>
        </div>
        <!-- Extra Add-ons -->
        <div class="bg-white dark:bg-slate-900 px-4 lg:px-6 flex flex-col justify-end md:order-9">
            <div class="flex items-center h-full border-b border-slate-200 dark:border-slate-700 py-2 text-slate-600 dark:text-slate-400">
                <svg class="shrink-0 fill-emerald-500 mr-3" xmlns="http://www.w3.org/2000/svg" width="12" height="9">
                    <path d="M10.28.28 3.989 6.575 1.695 4.28A1 1 0 0 0 .28 5.695l3 3a1 1 0 0 0 1.414 0l7-7A1 1 0 0 0 10.28.28Z" />
                </svg>
                <span><span class="md:sr-only">Extra Add-ons</span></span>
            </div>
        </div>
        <!-- Admin Roles -->
        <div class="bg-white dark:bg-slate-900 px-4 lg:px-6 flex flex-col justify-end md:order-10">
            <div class="flex items-center border-b border-slate-200 dark:border-slate-700 py-2 text-slate-600 max-md:sr-only">
                <span><span class="md:sr-only">Admin Roles</span></span>
            </div>
        </div>
        <!-- Admin Roles -->
        <div class="bg-white dark:bg-slate-900 px-4 lg:px-6 flex flex-col justify-end md:order-11">
            <div class="flex items-center border-b border-slate-200 dark:border-slate-700 py-2 text-slate-600 max-md:sr-only">
                <span><span class="md:sr-only">Admin Roles</span></span>
            </div>
        </div>
        <!-- Enterprise Add-ons -->
        <div class="bg-white dark:bg-slate-900 px-4 lg:px-6 flex flex-col justify-end md:order-12">
            <div class="flex items-center border-b border-slate-200 dark:border-slate-700 py-2 text-slate-600 max-md:sr-only">
                <span><span class="md:sr-only">Enterprise Add-ons</span></span>
            </div>
        </div>
        <!-- # Support -->
        <div class="bg-white dark:bg-slate-900 px-4 lg:px-6 flex flex-col justify-end md:order-[13]">
            <div class="py-2 text-slate-900 font-medium mt-4 sr-only">Support</div>
        </div>
        <!-- Custom Connection -->
        <div class="bg-white dark:bg-slate-900 px-4 lg:px-6 flex flex-col justify-end md:order-[14]">
            <div class="flex items-center border-b border-slate-200 dark:border-slate-700 py-2 text-slate-600 max-md:sr-only">
                <span><span class="md:sr-only">Custom Connection</span></span>
            </div>
        </div>
    </section>
    <!-- End: Essential table -->
    <!-- Perform table -->
    <section class="md:contents [&>div:first-child]:pt-10 [&>div:first-child]:rounded-t-2xl [&>div:last-child]:pb-10 [&>div:last-child]:rounded-b-2xl dark">
        <div class="relative bg-white dark:bg-slate-900 px-4 lg:px-6 flex flex-col justify-end">
            <div class="absolute top-0 right-0 mr-6 -mt-4">
                <div class="inline-flex items-center text-xs font-semibold py-1.5 px-3 bg-emerald-500 text-white rounded-full shadow-sm shadow-slate-950/5">Most Popular</div>
            </div>
            <div class="grow mb-5">
                <div class="font-semibold text-slate-900 dark:text-slate-200 mb-0.5">Perform</div>
                <div class="mb-1">
                    <span class="text-xl font-medium text-slate-900 dark:text-slate-200">$</span><span class="text-3xl font-bold text-slate-900 dark:text-slate-200">49</span><span class="text-slate-500 font-medium">/mo</span>
                </div>
                <div class="text-sm text-slate-500">Unlimited placeholder texts.</div>
            </div>
            <div class="pb-4 border-b border-slate-200 dark:border-slate-700">
                <a class="w-full inline-flex justify-center whitespace-nowrap rounded-lg bg-indigo-500 px-2.5 py-1.5 text-sm font-medium text-white shadow-sm shadow-indigo-950/10 hover:bg-indigo-600 focus-visible:outline-none focus-visible:ring focus-visible:ring-indigo-300 dark:focus-visible:ring-slate-600 transition-colors duration-150 group" href="#0">
                    Get Started <span class="tracking-normal text-indigo-300 group-hover:translate-x-0.5 transition-transform duration-150 ease-in-out ml-1">-&gt;</span>
                </a>
            </div>
        </div>
        <!-- # Platform -->
        <div class="bg-white dark:bg-slate-900 px-4 lg:px-6 flex flex-col justify-end md:order-1">
            <div class="py-2 text-slate-900 font-medium mt-4 md:sr-only">Platform</div>
        </div>
        <!-- Account Access -->
        <div class="bg-white dark:bg-slate-900 px-4 lg:px-6 flex flex-col justify-end md:order-2">
            <div class="flex items-center h-full border-b border-slate-200 dark:border-slate-700 py-2 text-slate-600 dark:text-slate-400">
                <svg class="shrink-0 fill-emerald-500 mr-3" xmlns="http://www.w3.org/2000/svg" width="12" height="9">
                    <path d="M10.28.28 3.989 6.575 1.695 4.28A1 1 0 0 0 .28 5.695l3 3a1 1 0 0 0 1.414 0l7-7A1 1 0 0 0 10.28.28Z" />
                </svg>
                <span>800 <span class="md:sr-only">Account Access</span></span>
            </div>
        </div>
        <!-- Custom Domains -->
        <div class="bg-white dark:bg-slate-900 px-4 lg:px-6 flex flex-col justify-end md:order-3">
            <div class="flex items-center h-full border-b border-slate-200 dark:border-slate-700 py-2 text-slate-600 dark:text-slate-400">
                <svg class="shrink-0 fill-emerald-500 mr-3" xmlns="http://www.w3.org/2000/svg" width="12" height="9">
                    <path d="M10.28.28 3.989 6.575 1.695 4.28A1 1 0 0 0 .28 5.695l3 3a1 1 0 0 0 1.414 0l7-7A1 1 0 0 0 10.28.28Z" />
                </svg>
                <span>10 <span class="md:sr-only">Custom Domains</span></span>
            </div>
        </div>
        <!-- Receipts Forward -->
        <div class="bg-white dark:bg-slate-900 px-4 lg:px-6 flex flex-col justify-end md:order-4">
            <div class="flex items-center h-full border-b border-slate-200 dark:border-slate-700 py-2 text-slate-600 dark:text-slate-400">
                <svg class="shrink-0 fill-emerald-500 mr-3" xmlns="http://www.w3.org/2000/svg" width="12" height="9">
                    <path d="M10.28.28 3.989 6.575 1.695 4.28A1 1 0 0 0 .28 5.695l3 3a1 1 0 0 0 1.414 0l7-7A1 1 0 0 0 10.28.28Z" />
                </svg>
                <span>Unlimited <span class="md:sr-only">Receipts Forward</span></span>
            </div>
        </div>
        <!-- Supplier Management -->
        <div class="bg-white dark:bg-slate-900 px-4 lg:px-6 flex flex-col justify-end md:order-5">
            <div class="flex items-center h-full border-b border-slate-200 dark:border-slate-700 py-2 text-slate-600 dark:text-slate-400">
                <svg class="shrink-0 fill-emerald-500 mr-3" xmlns="http://www.w3.org/2000/svg" width="12" height="9">
                    <path d="M10.28.28 3.989 6.575 1.695 4.28A1 1 0 0 0 .28 5.695l3 3a1 1 0 0 0 1.414 0l7-7A1 1 0 0 0 10.28.28Z" />
                </svg>
                <span>10 <span class="md:sr-only">Supplier Management</span></span>
            </div>
        </div>
        <!-- # Features -->
        <div class="bg-white dark:bg-slate-900 px-4 lg:px-6 flex flex-col justify-end md:order-6">
            <div class="py-2 text-slate-900 font-medium mt-4 md:sr-only">Features</div>
        </div>
        <!-- Generate Public URLs -->
        <div class="bg-white dark:bg-slate-900 px-4 lg:px-6 flex flex-col justify-end md:order-7">
            <div class="flex items-center h-full border-b border-slate-200 dark:border-slate-700 py-2 text-slate-600 dark:text-slate-400">
                <svg class="shrink-0 fill-emerald-500 mr-3" xmlns="http://www.w3.org/2000/svg" width="12" height="9">
                    <path d="M10.28.28 3.989 6.575 1.695 4.28A1 1 0 0 0 .28 5.695l3 3a1 1 0 0 0 1.414 0l7-7A1 1 0 0 0 10.28.28Z" />
                </svg>
                <span><span class="md:sr-only">Generate Public URLs</span></span>
            </div>
        </div>
        <!-- API Integrations -->
        <div class="bg-white dark:bg-slate-900 px-6 flex flex-col justify-end md:order-8">
            <div class="flex items-center h-full border-b border-slate-200 dark:border-slate-700 py-2 text-slate-600 dark:text-slate-400">
                <svg class="shrink-0 fill-emerald-500 mr-3" xmlns="http://www.w3.org/2000/svg" width="12" height="9">
                    <path d="M10.28.28 3.989 6.575 1.695 4.28A1 1 0 0 0 .28 5.695l3 3a1 1 0 0 0 1.414 0l7-7A1 1 0 0 0 10.28.28Z" />
                </svg>
                <span><span class="md:sr-only">API Integrations</span></span>
            </div>
        </div>
        <!-- Extra Add-ons -->
        <div class="bg-white dark:bg-slate-900 px-6 flex flex-col justify-end md:order-9">
            <div class="flex items-center h-full border-b border-slate-200 dark:border-slate-700 py-2 text-slate-600 dark:text-slate-400">
                <svg class="shrink-0 fill-emerald-500 mr-3" xmlns="http://www.w3.org/2000/svg" width="12" height="9">
                    <path d="M10.28.28 3.989 6.575 1.695 4.28A1 1 0 0 0 .28 5.695l3 3a1 1 0 0 0 1.414 0l7-7A1 1 0 0 0 10.28.28Z" />
                </svg>
                <span><span class="md:sr-only">Extra Add-ons</span></span>
            </div>
        </div>
        <!-- Admin Roles -->
        <div class="bg-white dark:bg-slate-900 px-6 flex flex-col justify-end md:order-10">
            <div class="flex items-center border-b border-slate-200 dark:border-slate-700 py-2 text-slate-600 max-md:sr-only">
                <span><span class="md:sr-only">Admin Roles</span></span>
            </div>
        </div>
        <!-- Admin Roles -->
        <div class="bg-white dark:bg-slate-900 px-6 flex flex-col justify-end md:order-11">
            <div class="flex items-center border-b border-slate-200 dark:border-slate-700 py-2 text-slate-600 max-md:sr-only">
                <span><span class="md:sr-only">Admin Roles</span></span>
            </div>
        </div>
        <!-- Enterprise Add-ons -->
        <div class="bg-white dark:bg-slate-900 px-6 flex flex-col justify-end md:order-12">
            <div class="flex items-center border-b border-slate-200 dark:border-slate-700 py-2 text-slate-600 max-md:sr-only">
                <span><span class="md:sr-only">Enterprise Add-ons</span></span>
            </div>
        </div>
        <!-- # Support -->
        <div class="bg-white dark:bg-slate-900 px-6 flex flex-col justify-end md:order-[13]">
            <div class="py-2 text-slate-900 font-medium mt-4 sr-only">Support</div>
        </div>
        <!-- Custom Connection -->
        <div class="bg-white dark:bg-slate-900 px-6 flex flex-col justify-end md:order-[14]">
            <div class="flex items-center border-b border-slate-200 dark:border-slate-700 py-2 text-slate-600 max-md:sr-only">
                <span><span class="md:sr-only">Custom Connection</span></span>
            </div>
        </div>
    </section>
    <!-- End: Perform table -->
    <!-- Enterprise table -->
    <section class="md:contents [&>div:first-child]:pt-10 [&>div:first-child]:rounded-t-2xl [&>div:last-child]:pb-10 [&>div:last-child]:rounded-b-2xl">
        <div class="relative bg-white dark:bg-slate-900 px-6 flex flex-col justify-end">
            <div class="grow mb-5">
                <div class="font-semibold text-slate-900 dark:text-slate-200 mb-0.5">Enterprise</div>
                <div class="mb-1">
                    <span class="text-xl font-medium text-slate-900 dark:text-slate-200">$</span><span class="text-3xl font-bold text-slate-900 dark:text-slate-200">79</span><span class="text-slate-500 font-medium">/mo</span>
                </div>
                <div class="text-sm text-slate-500">Unlimited placeholder texts.</div>
            </div>
            <div class="pb-4 border-b border-slate-200 dark:border-slate-700">
                <a class="w-full inline-flex justify-center whitespace-nowrap rounded-lg bg-indigo-500 px-2.5 py-1.5 text-sm font-medium text-white shadow-sm shadow-indigo-950/10 hover:bg-indigo-600 focus-visible:outline-none focus-visible:ring focus-visible:ring-indigo-300 dark:focus-visible:ring-slate-600 transition-colors duration-150 group" href="#0">
                    Get Started <span class="tracking-normal text-indigo-300 group-hover:translate-x-0.5 transition-transform duration-150 ease-in-out ml-1">-&gt;</span>
                </a>
            </div>
        </div>
        <!-- # Platform -->
        <div class="bg-white dark:bg-slate-900 px-6 flex flex-col justify-end md:order-1">
            <div class="py-2 text-slate-900 font-medium mt-4 md:sr-only">Platform</div>
        </div>
        <!-- Account Access -->
        <div class="bg-white dark:bg-slate-900 px-6 flex flex-col justify-end md:order-2">
            <div class="flex items-center h-full border-b border-slate-200 dark:border-slate-700 py-2 text-slate-600 dark:text-slate-400">
                <svg class="shrink-0 fill-emerald-500 mr-3" xmlns="http://www.w3.org/2000/svg" width="12" height="9">
                    <path d="M10.28.28 3.989 6.575 1.695 4.28A1 1 0 0 0 .28 5.695l3 3a1 1 0 0 0 1.414 0l7-7A1 1 0 0 0 10.28.28Z" />
                </svg>
                <span>Unlimited <span class="md:sr-only">Account Access</span></span>
            </div>
        </div>
        <!-- Custom Domains -->
        <div class="bg-white dark:bg-slate-900 px-6 flex flex-col justify-end md:order-3">
            <div class="flex items-center h-full border-b border-slate-200 dark:border-slate-700 py-2 text-slate-600 dark:text-slate-400">
                <svg class="shrink-0 fill-emerald-500 mr-3" xmlns="http://www.w3.org/2000/svg" width="12" height="9">
                    <path d="M10.28.28 3.989 6.575 1.695 4.28A1 1 0 0 0 .28 5.695l3 3a1 1 0 0 0 1.414 0l7-7A1 1 0 0 0 10.28.28Z" />
                </svg>
                <span>Unlimited <span class="md:sr-only">Custom Domains</span></span>
            </div>
        </div>
        <!-- Receipts Forward -->
        <div class="bg-white dark:bg-slate-900 px-6 flex flex-col justify-end md:order-4">
            <div class="flex items-center h-full border-b border-slate-200 dark:border-slate-700 py-2 text-slate-600 dark:text-slate-400">
                <svg class="shrink-0 fill-emerald-500 mr-3" xmlns="http://www.w3.org/2000/svg" width="12" height="9">
                    <path d="M10.28.28 3.989 6.575 1.695 4.28A1 1 0 0 0 .28 5.695l3 3a1 1 0 0 0 1.414 0l7-7A1 1 0 0 0 10.28.28Z" />
                </svg>
                <span>Unlimited <span class="md:sr-only">Receipts Forward</span></span>
            </div>
        </div>
        <!-- Supplier Management -->
        <div class="bg-white dark:bg-slate-900 px-6 flex flex-col justify-end md:order-5">
            <div class="flex items-center h-full border-b border-slate-200 dark:border-slate-700 py-2 text-slate-600 dark:text-slate-400">
                <svg class="shrink-0 fill-emerald-500 mr-3" xmlns="http://www.w3.org/2000/svg" width="12" height="9">
                    <path d="M10.28.28 3.989 6.575 1.695 4.28A1 1 0 0 0 .28 5.695l3 3a1 1 0 0 0 1.414 0l7-7A1 1 0 0 0 10.28.28Z" />
                </svg>
                <span>Unlimited <span class="md:sr-only">Supplier Management</span></span>
            </div>
        </div>
        <!-- # Features -->
        <div class="bg-white dark:bg-slate-900 px-6 flex flex-col justify-end md:order-6">
            <div class="py-2 text-slate-900 font-medium mt-4 md:sr-only">Features</div>
        </div>
        <!-- Generate Public URLs -->
        <div class="bg-white dark:bg-slate-900 px-6 flex flex-col justify-end md:order-7">
            <div class="flex items-center h-full border-b border-slate-200 dark:border-slate-700 py-2 text-slate-600 dark:text-slate-400">
                <svg class="shrink-0 fill-emerald-500 mr-3" xmlns="http://www.w3.org/2000/svg" width="12" height="9">
                    <path d="M10.28.28 3.989 6.575 1.695 4.28A1 1 0 0 0 .28 5.695l3 3a1 1 0 0 0 1.414 0l7-7A1 1 0 0 0 10.28.28Z" />
                </svg>
                <span><span class="md:sr-only">Generate Public URLs</span></span>
            </div>
        </div>
        <!-- API Integrations -->
        <div class="bg-white dark:bg-slate-900 px-6 flex flex-col justify-end md:order-8">
            <div class="flex items-center h-full border-b border-slate-200 dark:border-slate-700 py-2 text-slate-600 dark:text-slate-400">
                <svg class="shrink-0 fill-emerald-500 mr-3" xmlns="http://www.w3.org/2000/svg" width="12" height="9">
                    <path d="M10.28.28 3.989 6.575 1.695 4.28A1 1 0 0 0 .28 5.695l3 3a1 1 0 0 0 1.414 0l7-7A1 1 0 0 0 10.28.28Z" />
                </svg>
                <span><span class="md:sr-only">API Integrations</span></span>
            </div>
        </div>
        <!-- Extra Add-ons -->
        <div class="bg-white dark:bg-slate-900 px-6 flex flex-col justify-end md:order-9">
            <div class="flex items-center h-full border-b border-slate-200 dark:border-slate-700 py-2 text-slate-600 dark:text-slate-400">
                <svg class="shrink-0 fill-emerald-500 mr-3" xmlns="http://www.w3.org/2000/svg" width="12" height="9">
                    <path d="M10.28.28 3.989 6.575 1.695 4.28A1 1 0 0 0 .28 5.695l3 3a1 1 0 0 0 1.414 0l7-7A1 1 0 0 0 10.28.28Z" />
                </svg>
                <span><span class="md:sr-only">Extra Add-ons</span></span>
            </div>
        </div>
        <!-- Admin Roles -->
        <div class="bg-white dark:bg-slate-900 px-6 flex flex-col justify-end md:order-10">
            <div class="flex items-center h-full border-b border-slate-200 dark:border-slate-700 py-2 text-slate-600 dark:text-slate-400">
                <svg class="shrink-0 fill-emerald-500 mr-3" xmlns="http://www.w3.org/2000/svg" width="12" height="9">
                    <path d="M10.28.28 3.989 6.575 1.695 4.28A1 1 0 0 0 .28 5.695l3 3a1 1 0 0 0 1.414 0l7-7A1 1 0 0 0 10.28.28Z" />
                </svg>
                <span><span class="md:sr-only">Admin Roles</span></span>
            </div>
        </div>
        <!-- Admin Roles -->
        <div class="bg-white dark:bg-slate-900 px-6 flex flex-col justify-end md:order-11">
            <div class="flex items-center h-full border-b border-slate-200 dark:border-slate-700 py-2 text-slate-600 dark:text-slate-400">
                <svg class="shrink-0 fill-emerald-500 mr-3" xmlns="http://www.w3.org/2000/svg" width="12" height="9">
                    <path d="M10.28.28 3.989 6.575 1.695 4.28A1 1 0 0 0 .28 5.695l3 3a1 1 0 0 0 1.414 0l7-7A1 1 0 0 0 10.28.28Z" />
                </svg>
                <span><span class="md:sr-only">Admin Roles</span></span>
            </div>
        </div>
        <!-- Enterprise Add-ons -->
        <div class="bg-white dark:bg-slate-900 px-6 flex flex-col justify-end md:order-12">
            <div class="flex items-center h-full border-b border-slate-200 dark:border-slate-700 py-2 text-slate-600 dark:text-slate-400">
                <svg class="shrink-0 fill-emerald-500 mr-3" xmlns="http://www.w3.org/2000/svg" width="12" height="9">
                    <path d="M10.28.28 3.989 6.575 1.695 4.28A1 1 0 0 0 .28 5.695l3 3a1 1 0 0 0 1.414 0l7-7A1 1 0 0 0 10.28.28Z" />
                </svg>
                <span><span class="md:sr-only">Enterprise Add-ons</span></span>
            </div>
        </div>
        <!-- # Support -->
        <div class="bg-white dark:bg-slate-900 px-6 flex flex-col justify-end md:order-[13]">
            <div class="py-2 text-slate-900 font-medium mt-4 sr-only">Support</div>
        </div>
        <!-- Custom Connection -->
        <div class="bg-white dark:bg-slate-900 px-6 flex flex-col justify-end md:order-[14]">
            <div class="flex items-center h-full border-b border-slate-200 dark:border-slate-700 py-2 text-slate-600 dark:text-slate-400">
                <svg class="shrink-0 fill-emerald-500 mr-3" xmlns="http://www.w3.org/2000/svg" width="12" height="9">
                    <path d="M10.28.28 3.989 6.575 1.695 4.28A1 1 0 0 0 .28 5.695l3 3a1 1 0 0 0 1.414 0l7-7A1 1 0 0 0 10.28.28Z" />
                </svg>
                <span><span class="md:sr-only">Custom Connection</span></span>
            </div>
        </div>
    </section>
    <!-- End: Enterprise table -->
</div>

您可以看到，第二个定价表也有一个绿色徽章，指示最受欢迎的计划。

此外，我们使用Tailwind CSS arbitrary variants [&>div:first-child]:pt-10 [&>div:last-child]:pb-10在每个计划的第一个和最后一个单元格中添加了垂直填充。使用相同的技术，我们还为每张桌子（[&>div:first-child]:rounded-t-2xl [&>div:last-child]:rounded-b-2xl）绕了拐角。

处理定价切换

尽管功能表布局已经完成，但仍缺少重要功能：定价切换。为了实现它，我们将使用Alpine.js，这是一个轻巧且声明的JavaScript库，它允许我们仅在3个步骤中向我们的HTML标记添加互动性！

！

首先，我们将x-data指令添加到我们的容器元素中，我们将定义isAnnual属性：

<div class="max-w-sm mx-auto md:max-w-none grid md:grid-cols-4 md:-mx-6 text-sm" x-data="{ isAnnual: true }">
    ...

接下来，我们将使用x-model指令在input元素上使用魔术：

<input type="checkbox" id="toggle" class="peer sr-only" x-model="isAnnual" />

这样做，只要输入状态更改，isAnnual属性就会相应更新。现在，我们将使用x-text指令来根据toggle state 显示正确的价格。让我们分解它：

<div class="mb-1">
    <span class="text-xl font-medium text-slate-900 dark:text-slate-200">$</span><span class="text-3xl font-bold text-slate-900 dark:text-slate-200" x-text="isAnnual ? '29' : '35'">29</span><span class="text-slate-500 font-medium">/mo</span>
</div>

简单地说，如果isAnnual是true，则价格为 $ 29 ;否则，它将为 $ 35 。

这是完整的代码：

<div class="max-w-sm mx-auto md:max-w-none grid md:grid-cols-4 md:-mx-6 text-sm" x-data="{ isAnnual: true }">
    <!-- Column with labels -->
    <section class="md:contents [&>div:first-child]:pt-10 [&>div:first-child]:rounded-t-2xl [&>div:last-child]:pb-10 [&>div:last-child]:rounded-b-2xl">
        <!-- Pricing toggle -->
        <div class="relative bg-white dark:bg-slate-900 px-6 flex flex-col justify-end">
            <div class="pb-5 md:border-b border-slate-200 dark:border-slate-700">
                <!-- Toggle switch -->
                <div class="max-md:text-center">
                    <div class="inline-flex items-center whitespace-nowrap">
                        <div class="text-sm text-slate-500 mr-2 md:max-lg:sr-only">Monthly</div>
                        <div class="relative">
                            <input type="checkbox" id="toggle" class="peer sr-only" x-model="isAnnual" />
                            <label for="toggle" class="relative flex h-6 w-11 cursor-pointer items-center rounded-full bg-slate-400 px-0.5 outline-slate-400 transition-colors before:h-5 before:w-5 before:rounded-full before:bg-white before:shadow-sm before:transition-transform before:duration-150 peer-checked:bg-indigo-500 peer-checked:before:translate-x-full peer-focus-visible:outline peer-focus-visible:outline-offset-2 peer-focus-visible:outline-gray-400 peer-checked:peer-focus-visible:outline-indigo-500">
                                <span class="sr-only">Pay Yearly</span>
                            </label>
                        </div>
                        <div class="text-sm text-slate-500 ml-2">Yearly <span class="text-emerald-500">(-20%)</span></div>
                    </div>
                </div>
            </div>
        </div>
        <!-- # Platform -->
        <div class="bg-white dark:bg-slate-900 px-6 flex flex-col justify-end max-md:hidden md:order-1" aria-hidden="true">
            <div class="py-2 text-slate-900 font-medium mt-4">Platform</div>
        </div>
        <!-- Account Access -->
        <div class="bg-white dark:bg-slate-900 px-6 flex flex-col justify-end max-md:hidden md:order-2" aria-hidden="true">
            <div class="py-2 text-slate-600 dark:text-slate-400 border-b border-slate-200 dark:border-slate-700">Account Access</div>
        </div>
        <!-- Custom Domains -->
        <div class="bg-white dark:bg-slate-900 px-6 flex flex-col justify-end max-md:hidden md:order-3" aria-hidden="true">
            <div class="py-2 text-slate-600 dark:text-slate-400 border-b border-slate-200 dark:border-slate-700">Custom Domains</div>
        </div>
        <!-- Receipts Forward -->
        <div class="bg-white dark:bg-slate-900 px-6 flex flex-col justify-end max-md:hidden md:order-4" aria-hidden="true">
            <div class="py-2 text-slate-600 dark:text-slate-400 border-b border-slate-200 dark:border-slate-700">Receipts Forward</div>
        </div>
        <!-- Supplier Management -->
        <div class="bg-white dark:bg-slate-900 px-6 flex flex-col justify-end max-md:hidden md:order-5" aria-hidden="true">
            <div class="py-2 text-slate-600 dark:text-slate-400 border-b border-slate-200 dark:border-slate-700">Supplier Management</div>
        </div>
        <!-- # Features -->
        <div class="bg-white dark:bg-slate-900 px-6 flex flex-col justify-end max-md:hidden md:order-6" aria-hidden="true">
            <div class="py-2 text-slate-900 font-medium mt-4">Features</div>
        </div>
        <!-- Generate Public URLs -->
        <div class="bg-white dark:bg-slate-900 px-6 flex flex-col justify-end max-md:hidden md:order-7" aria-hidden="true">
            <div class="py-2 text-slate-600 dark:text-slate-400 border-b border-slate-200 dark:border-slate-700">Generate Public URLs</div>
        </div>
        <!-- API Integrations -->
        <div class="bg-white dark:bg-slate-900 px-6 flex flex-col justify-end max-md:hidden md:order-8" aria-hidden="true">
            <div class="py-2 text-slate-600 dark:text-slate-400 border-b border-slate-200 dark:border-slate-700">API Integrations</div>
        </div>
        <!-- Extra Add-ons -->
        <div class="bg-white dark:bg-slate-900 px-6 flex flex-col justify-end max-md:hidden md:order-9" aria-hidden="true">
            <div class="py-2 text-slate-600 dark:text-slate-400 border-b border-slate-200 dark:border-slate-700">Extra Add-ons</div>
        </div>
        <!-- Admin Roles -->
        <div class="bg-white dark:bg-slate-900 px-6 flex flex-col justify-end max-md:hidden md:order-10" aria-hidden="true">
            <div class="py-2 text-slate-600 dark:text-slate-400 border-b border-slate-200 dark:border-slate-700">Admin Roles</div>
        </div>
        <!-- Admin Roles -->
        <div class="bg-white dark:bg-slate-900 px-6 flex flex-col justify-end max-md:hidden md:order-11" aria-hidden="true">
            <div class="py-2 text-slate-600 dark:text-slate-400 border-b border-slate-200 dark:border-slate-700">Admin Roles</div>
        </div>
        <!-- Enterprise Add-ons -->
        <div class="bg-white dark:bg-slate-900 px-6 flex flex-col justify-end max-md:hidden md:order-12" aria-hidden="true">
            <div class="py-2 text-slate-600 dark:text-slate-400 border-b border-slate-200 dark:border-slate-700">Enterprise Add-ons</div>
        </div>
        <!-- # Support -->
        <div class="bg-white dark:bg-slate-900 px-6 flex flex-col justify-end max-md:hidden md:order-[13]" aria-hidden="true">
            <div class="py-2 text-slate-900 font-medium mt-4">Support</div>
        </div>
        <!-- Custom Connection -->
        <div class="bg-white dark:bg-slate-900 px-6 flex flex-col justify-end max-md:hidden md:order-[14]" aria-hidden="true">
            <div class="py-2 text-slate-600 dark:text-slate-400 border-b border-slate-200 dark:border-slate-700">Custom Connection</div>
        </div>
    </section>
    <!-- End: Column with labels -->
    <!-- Essential table -->
    <section class="md:contents [&>div:first-child]:pt-10 [&>div:first-child]:rounded-t-2xl [&>div:last-child]:pb-10 [&>div:last-child]:rounded-b-2xl">
        <div class="relative bg-white dark:bg-slate-900 px-4 lg:px-6 flex flex-col justify-end">
            <div class="grow mb-5">
                <div class="font-semibold text-slate-900 dark:text-slate-200 mb-0.5">Essential</div>
                <div class="mb-1">
                    <span class="text-xl font-medium text-slate-900 dark:text-slate-200">$</span><span class="text-3xl font-bold text-slate-900 dark:text-slate-200" x-text="isAnnual ? '29' : '35'">29</span><span class="text-slate-500 font-medium">/mo</span>
                </div>
                <div class="text-sm text-slate-500">Unlimited placeholder texts.</div>
            </div>
            <div class="pb-4 border-b border-slate-200 dark:border-slate-700">
                <a class="w-full inline-flex justify-center whitespace-nowrap rounded-lg bg-indigo-500 px-2.5 py-1.5 text-sm font-medium text-white shadow-sm shadow-indigo-950/10 hover:bg-indigo-600 focus-visible:outline-none focus-visible:ring focus-visible:ring-indigo-300 dark:focus-visible:ring-slate-600 transition-colors duration-150 group" href="#0">
                    Get Started <span class="tracking-normal text-indigo-300 group-hover:translate-x-0.5 transition-transform duration-150 ease-in-out ml-1">-&gt;</span>
                </a>
            </div>
        </div>
        <!-- # Platform -->
        <div class="bg-white dark:bg-slate-900 px-4 lg:px-6 flex flex-col justify-end md:order-1">
            <div class="py-2 text-slate-900 font-medium mt-4 md:sr-only">Platform</div>
        </div>
        <!-- Account Access -->
        <div class="bg-white dark:bg-slate-900 px-4 lg:px-6 flex flex-col justify-end md:order-2">
            <div class="flex items-center h-full border-b border-slate-200 dark:border-slate-700 py-2 text-slate-600 dark:text-slate-400">
                <svg class="shrink-0 fill-emerald-500 mr-3" xmlns="http://www.w3.org/2000/svg" width="12" height="9">
                    <path d="M10.28.28 3.989 6.575 1.695 4.28A1 1 0 0 0 .28 5.695l3 3a1 1 0 0 0 1.414 0l7-7A1 1 0 0 0 10.28.28Z" />
                </svg>
                <span>400 <span class="md:sr-only">Account Access</span></span>
            </div>
        </div>
        <!-- Custom Domains -->
        <div class="bg-white dark:bg-slate-900 px-4 lg:px-6 flex flex-col justify-end md:order-3">
            <div class="flex items-center h-full border-b border-slate-200 dark:border-slate-700 py-2 text-slate-600 dark:text-slate-400">
                <svg class="shrink-0 fill-emerald-500 mr-3" xmlns="http://www.w3.org/2000/svg" width="12" height="9">
                    <path d="M10.28.28 3.989 6.575 1.695 4.28A1 1 0 0 0 .28 5.695l3 3a1 1 0 0 0 1.414 0l7-7A1 1 0 0 0 10.28.28Z" />
                </svg>
                <span>4 <span class="md:sr-only">Custom Domains</span></span>
            </div>
        </div>
        <!-- Receipts Forward -->
        <div class="bg-white dark:bg-slate-900 px-4 lg:px-6 flex flex-col justify-end md:order-4">
            <div class="flex items-center h-full border-b border-slate-200 dark:border-slate-700 py-2 text-slate-600 dark:text-slate-400">
                <svg class="shrink-0 fill-emerald-500 mr-3" xmlns="http://www.w3.org/2000/svg" width="12" height="9">
                    <path d="M10.28.28 3.989 6.575 1.695 4.28A1 1 0 0 0 .28 5.695l3 3a1 1 0 0 0 1.414 0l7-7A1 1 0 0 0 10.28.28Z" />
                </svg>
                <span>Unlimited <span class="md:sr-only">Receipts Forward</span></span>
            </div>
        </div>
        <!-- Supplier Management -->
        <div class="bg-white dark:bg-slate-900 px-4 lg:px-6 flex flex-col justify-end md:order-5">
            <div class="flex items-center h-full border-b border-slate-200 dark:border-slate-700 py-2 text-slate-600 dark:text-slate-400">
                <svg class="shrink-0 fill-emerald-500 mr-3" xmlns="http://www.w3.org/2000/svg" width="12" height="9">
                    <path d="M10.28.28 3.989 6.575 1.695 4.28A1 1 0 0 0 .28 5.695l3 3a1 1 0 0 0 1.414 0l7-7A1 1 0 0 0 10.28.28Z" />
                </svg>
                <span>1 <span class="md:sr-only">Supplier Management</span></span>
            </div>
        </div>
        <!-- # Features -->
        <div class="bg-white dark:bg-slate-900 px-4 lg:px-6 flex flex-col justify-end md:order-6">
            <div class="py-2 text-slate-900 font-medium mt-4 md:sr-only">Features</div>
        </div>
        <!-- Generate Public URLs -->
        <div class="bg-white dark:bg-slate-900 px-4 lg:px-6 flex flex-col justify-end md:order-7">
            <div class="flex items-center h-full border-b border-slate-200 dark:border-slate-700 py-2 text-slate-600 dark:text-slate-400">
                <svg class="shrink-0 fill-emerald-500 mr-3" xmlns="http://www.w3.org/2000/svg" width="12" height="9">
                    <path d="M10.28.28 3.989 6.575 1.695 4.28A1 1 0 0 0 .28 5.695l3 3a1 1 0 0 0 1.414 0l7-7A1 1 0 0 0 10.28.28Z" />
                </svg>
                <span><span class="md:sr-only">Generate Public URLs</span></span>
            </div>
        </div>
        <!-- API Integrations -->
        <div class="bg-white dark:bg-slate-900 px-4 lg:px-6 flex flex-col justify-end md:order-8">
            <div class="flex items-center h-full border-b border-slate-200 dark:border-slate-700 py-2 text-slate-600 dark:text-slate-400">
                <svg class="shrink-0 fill-emerald-500 mr-3" xmlns="http://www.w3.org/2000/svg" width="12" height="9">
                    <path d="M10.28.28 3.989 6.575 1.695 4.28A1 1 0 0 0 .28 5.695l3 3a1 1 0 0 0 1.414 0l7-7A1 1 0 0 0 10.28.28Z" />
                </svg>
                <span><span class="md:sr-only">API Integrations</span></span>
            </div>
        </div>
        <!-- Extra Add-ons -->
        <div class="bg-white dark:bg-slate-900 px-4 lg:px-6 flex flex-col justify-end md:order-9">
            <div class="flex items-center h-full border-b border-slate-200 dark:border-slate-700 py-2 text-slate-600 dark:text-slate-400">
                <svg class="shrink-0 fill-emerald-500 mr-3" xmlns="http://www.w3.org/2000/svg" width="12" height="9">
                    <path d="M10.28.28 3.989 6.575 1.695 4.28A1 1 0 0 0 .28 5.695l3 3a1 1 0 0 0 1.414 0l7-7A1 1 0 0 0 10.28.28Z" />
                </svg>
                <span><span class="md:sr-only">Extra Add-ons</span></span>
            </div>
        </div>
        <!-- Admin Roles -->
        <div class="bg-white dark:bg-slate-900 px-4 lg:px-6 flex flex-col justify-end md:order-10">
            <div class="flex items-center border-b border-slate-200 dark:border-slate-700 py-2 text-slate-600 max-md:sr-only">
                <span><span class="md:sr-only">Admin Roles</span></span>
            </div>
        </div>
        <!-- Admin Roles -->
        <div class="bg-white dark:bg-slate-900 px-4 lg:px-6 flex flex-col justify-end md:order-11">
            <div class="flex items-center border-b border-slate-200 dark:border-slate-700 py-2 text-slate-600 max-md:sr-only">
                <span><span class="md:sr-only">Admin Roles</span></span>
            </div>
        </div>
        <!-- Enterprise Add-ons -->
        <div class="bg-white dark:bg-slate-900 px-4 lg:px-6 flex flex-col justify-end md:order-12">
            <div class="flex items-center border-b border-slate-200 dark:border-slate-700 py-2 text-slate-600 max-md:sr-only">
                <span><span class="md:sr-only">Enterprise Add-ons</span></span>
            </div>
        </div>
        <!-- # Support -->
        <div class="bg-white dark:bg-slate-900 px-4 lg:px-6 flex flex-col justify-end md:order-[13]">
            <div class="py-2 text-slate-900 font-medium mt-4 sr-only">Support</div>
        </div>
        <!-- Custom Connection -->
        <div class="bg-white dark:bg-slate-900 px-4 lg:px-6 flex flex-col justify-end md:order-[14]">
            <div class="flex items-center border-b border-slate-200 dark:border-slate-700 py-2 text-slate-600 max-md:sr-only">
                <span><span class="md:sr-only">Custom Connection</span></span>
            </div>
        </div>
    </section>
    <!-- End: Essential table -->
    <!-- Perform table -->
    <section class="md:contents [&>div:first-child]:pt-10 [&>div:first-child]:rounded-t-2xl [&>div:last-child]:pb-10 [&>div:last-child]:rounded-b-2xl dark">
        <div class="relative bg-white dark:bg-slate-900 px-4 lg:px-6 flex flex-col justify-end">
            <div class="absolute top-0 right-0 mr-6 -mt-4">
                <div class="inline-flex items-center text-xs font-semibold py-1.5 px-3 bg-emerald-500 text-white rounded-full shadow-sm shadow-slate-950/5">Most Popular</div>
            </div>
            <div class="grow mb-5">
                <div class="font-semibold text-slate-900 dark:text-slate-200 mb-0.5">Perform</div>
                <div class="mb-1">
                    <span class="text-xl font-medium text-slate-900 dark:text-slate-200">$</span><span class="text-3xl font-bold text-slate-900 dark:text-slate-200" x-text="isAnnual ? '49' : '54'">49</span><span class="text-slate-500 font-medium">/mo</span>
                </div>
                <div class="text-sm text-slate-500">Unlimited placeholder texts.</div>
            </div>
            <div class="pb-4 border-b border-slate-200 dark:border-slate-700">
                <a class="w-full inline-flex justify-center whitespace-nowrap rounded-lg bg-indigo-500 px-2.5 py-1.5 text-sm font-medium text-white shadow-sm shadow-indigo-950/10 hover:bg-indigo-600 focus-visible:outline-none focus-visible:ring focus-visible:ring-indigo-300 dark:focus-visible:ring-slate-600 transition-colors duration-150 group" href="#0">
                    Get Started <span class="tracking-normal text-indigo-300 group-hover:translate-x-0.5 transition-transform duration-150 ease-in-out ml-1">-&gt;</span>
                </a>
            </div>
        </div>
        <!-- # Platform -->
        <div class="bg-white dark:bg-slate-900 px-4 lg:px-6 flex flex-col justify-end md:order-1">
            <div class="py-2 text-slate-900 font-medium mt-4 md:sr-only">Platform</div>
        </div>
        <!-- Account Access -->
        <div class="bg-white dark:bg-slate-900 px-4 lg:px-6 flex flex-col justify-end md:order-2">
            <div class="flex items-center h-full border-b border-slate-200 dark:border-slate-700 py-2 text-slate-600 dark:text-slate-400">
                <svg class="shrink-0 fill-emerald-500 mr-3" xmlns="http://www.w3.org/2000/svg" width="12" height="9">
                    <path d="M10.28.28 3.989 6.575 1.695 4.28A1 1 0 0 0 .28 5.695l3 3a1 1 0 0 0 1.414 0l7-7A1 1 0 0 0 10.28.28Z" />
                </svg>
                <span>800 <span class="md:sr-only">Account Access</span></span>
            </div>
        </div>
        <!-- Custom Domains -->
        <div class="bg-white dark:bg-slate-900 px-4 lg:px-6 flex flex-col justify-end md:order-3">
            <div class="flex items-center h-full border-b border-slate-200 dark:border-slate-700 py-2 text-slate-600 dark:text-slate-400">
                <svg class="shrink-0 fill-emerald-500 mr-3" xmlns="http://www.w3.org/2000/svg" width="12" height="9">
                    <path d="M10.28.28 3.989 6.575 1.695 4.28A1 1 0 0 0 .28 5.695l3 3a1 1 0 0 0 1.414 0l7-7A1 1 0 0 0 10.28.28Z" />
                </svg>
                <span>10 <span class="md:sr-only">Custom Domains</span></span>
            </div>
        </div>
        <!-- Receipts Forward -->
        <div class="bg-white dark:bg-slate-900 px-4 lg:px-6 flex flex-col justify-end md:order-4">
            <div class="flex items-center h-full border-b border-slate-200 dark:border-slate-700 py-2 text-slate-600 dark:text-slate-400">
                <svg class="shrink-0 fill-emerald-500 mr-3" xmlns="http://www.w3.org/2000/svg" width="12" height="9">
                    <path d="M10.28.28 3.989 6.575 1.695 4.28A1 1 0 0 0 .28 5.695l3 3a1 1 0 0 0 1.414 0l7-7A1 1 0 0 0 10.28.28Z" />
                </svg>
                <span>Unlimited <span class="md:sr-only">Receipts Forward</span></span>
            </div>
        </div>
        <!-- Supplier Management -->
        <div class="bg-white dark:bg-slate-900 px-4 lg:px-6 flex flex-col justify-end md:order-5">
            <div class="flex items-center h-full border-b border-slate-200 dark:border-slate-700 py-2 text-slate-600 dark:text-slate-400">
                <svg class="shrink-0 fill-emerald-500 mr-3" xmlns="http://www.w3.org/2000/svg" width="12" height="9">
                    <path d="M10.28.28 3.989 6.575 1.695 4.28A1 1 0 0 0 .28 5.695l3 3a1 1 0 0 0 1.414 0l7-7A1 1 0 0 0 10.28.28Z" />
                </svg>
                <span>10 <span class="md:sr-only">Supplier Management</span></span>
            </div>
        </div>
        <!-- # Features -->
        <div class="bg-white dark:bg-slate-900 px-4 lg:px-6 flex flex-col justify-end md:order-6">
            <div class="py-2 text-slate-900 font-medium mt-4 md:sr-only">Features</div>
        </div>
        <!-- Generate Public URLs -->
        <div class="bg-white dark:bg-slate-900 px-4 lg:px-6 flex flex-col justify-end md:order-7">
            <div class="flex items-center h-full border-b border-slate-200 dark:border-slate-700 py-2 text-slate-600 dark:text-slate-400">
                <svg class="shrink-0 fill-emerald-500 mr-3" xmlns="http://www.w3.org/2000/svg" width="12" height="9">
                    <path d="M10.28.28 3.989 6.575 1.695 4.28A1 1 0 0 0 .28 5.695l3 3a1 1 0 0 0 1.414 0l7-7A1 1 0 0 0 10.28.28Z" />
                </svg>
                <span><span class="md:sr-only">Generate Public URLs</span></span>
            </div>
        </div>
        <!-- API Integrations -->
        <div class="bg-white dark:bg-slate-900 px-6 flex flex-col justify-end md:order-8">
            <div class="flex items-center h-full border-b border-slate-200 dark:border-slate-700 py-2 text-slate-600 dark:text-slate-400">
                <svg class="shrink-0 fill-emerald-500 mr-3" xmlns="http://www.w3.org/2000/svg" width="12" height="9">
                    <path d="M10.28.28 3.989 6.575 1.695 4.28A1 1 0 0 0 .28 5.695l3 3a1 1 0 0 0 1.414 0l7-7A1 1 0 0 0 10.28.28Z" />
                </svg>
                <span><span class="md:sr-only">API Integrations</span></span>
            </div>
        </div>
        <!-- Extra Add-ons -->
        <div class="bg-white dark:bg-slate-900 px-6 flex flex-col justify-end md:order-9">
            <div class="flex items-center h-full border-b border-slate-200 dark:border-slate-700 py-2 text-slate-600 dark:text-slate-400">
                <svg class="shrink-0 fill-emerald-500 mr-3" xmlns="http://www.w3.org/2000/svg" width="12" height="9">
                    <path d="M10.28.28 3.989 6.575 1.695 4.28A1 1 0 0 0 .28 5.695l3 3a1 1 0 0 0 1.414 0l7-7A1 1 0 0 0 10.28.28Z" />
                </svg>
                <span><span class="md:sr-only">Extra Add-ons</span></span>
            </div>
        </div>
        <!-- Admin Roles -->
        <div class="bg-white dark:bg-slate-900 px-6 flex flex-col justify-end md:order-10">
            <div class="flex items-center border-b border-slate-200 dark:border-slate-700 py-2 text-slate-600 max-md:sr-only">
                <span><span class="md:sr-only">Admin Roles</span></span>
            </div>
        </div>
        <!-- Admin Roles -->
        <div class="bg-white dark:bg-slate-900 px-6 flex flex-col justify-end md:order-11">
            <div class="flex items-center border-b border-slate-200 dark:border-slate-700 py-2 text-slate-600 max-md:sr-only">
                <span><span class="md:sr-only">Admin Roles</span></span>
            </div>
        </div>
        <!-- Enterprise Add-ons -->
        <div class="bg-white dark:bg-slate-900 px-6 flex flex-col justify-end md:order-12">
            <div class="flex items-center border-b border-slate-200 dark:border-slate-700 py-2 text-slate-600 max-md:sr-only">
                <span><span class="md:sr-only">Enterprise Add-ons</span></span>
            </div>
        </div>
        <!-- # Support -->
        <div class="bg-white dark:bg-slate-900 px-6 flex flex-col justify-end md:order-[13]">
            <div class="py-2 text-slate-900 font-medium mt-4 sr-only">Support</div>
        </div>
        <!-- Custom Connection -->
        <div class="bg-white dark:bg-slate-900 px-6 flex flex-col justify-end md:order-[14]">
            <div class="flex items-center border-b border-slate-200 dark:border-slate-700 py-2 text-slate-600 max-md:sr-only">
                <span><span class="md:sr-only">Custom Connection</span></span>
            </div>
        </div>
    </section>
    <!-- End: Perform table -->
    <!-- Enterprise table -->
    <section class="md:contents [&>div:first-child]:pt-10 [&>div:first-child]:rounded-t-2xl [&>div:last-child]:pb-10 [&>div:last-child]:rounded-b-2xl">
        <div class="relative bg-white dark:bg-slate-900 px-6 flex flex-col justify-end">
            <div class="grow mb-5">
                <div class="font-semibold text-slate-900 dark:text-slate-200 mb-0.5">Enterprise</div>
                <div class="mb-1">
                    <span class="text-xl font-medium text-slate-900 dark:text-slate-200">$</span><span class="text-3xl font-bold text-slate-900 dark:text-slate-200" x-text="isAnnual ? '79' : '85'">79</span><span class="text-slate-500 font-medium">/mo</span>
                </div>
                <div class="text-sm text-slate-500">Unlimited placeholder texts.</div>
            </div>
            <div class="pb-4 border-b border-slate-200 dark:border-slate-700">
                <a class="w-full inline-flex justify-center whitespace-nowrap rounded-lg bg-indigo-500 px-2.5 py-1.5 text-sm font-medium text-white shadow-sm shadow-indigo-950/10 hover:bg-indigo-600 focus-visible:outline-none focus-visible:ring focus-visible:ring-indigo-300 dark:focus-visible:ring-slate-600 transition-colors duration-150 group" href="#0">
                    Get Started <span class="tracking-normal text-indigo-300 group-hover:translate-x-0.5 transition-transform duration-150 ease-in-out ml-1">-&gt;</span>
                </a>
            </div>
        </div>
        <!-- # Platform -->
        <div class="bg-white dark:bg-slate-900 px-6 flex flex-col justify-end md:order-1">
            <div class="py-2 text-slate-900 font-medium mt-4 md:sr-only">Platform</div>
        </div>
        <!-- Account Access -->
        <div class="bg-white dark:bg-slate-900 px-6 flex flex-col justify-end md:order-2">
            <div class="flex items-center h-full border-b border-slate-200 dark:border-slate-700 py-2 text-slate-600 dark:text-slate-400">
                <svg class="shrink-0 fill-emerald-500 mr-3" xmlns="http://www.w3.org/2000/svg" width="12" height="9">
                    <path d="M10.28.28 3.989 6.575 1.695 4.28A1 1 0 0 0 .28 5.695l3 3a1 1 0 0 0 1.414 0l7-7A1 1 0 0 0 10.28.28Z" />
                </svg>
                <span>Unlimited <span class="md:sr-only">Account Access</span></span>
            </div>
        </div>
        <!-- Custom Domains -->
        <div class="bg-white dark:bg-slate-900 px-6 flex flex-col justify-end md:order-3">
            <div class="flex items-center h-full border-b border-slate-200 dark:border-slate-700 py-2 text-slate-600 dark:text-slate-400">
                <svg class="shrink-0 fill-emerald-500 mr-3" xmlns="http://www.w3.org/2000/svg" width="12" height="9">
                    <path d="M10.28.28 3.989 6.575 1.695 4.28A1 1 0 0 0 .28 5.695l3 3a1 1 0 0 0 1.414 0l7-7A1 1 0 0 0 10.28.28Z" />
                </svg>
                <span>Unlimited <span class="md:sr-only">Custom Domains</span></span>
            </div>
        </div>
        <!-- Receipts Forward -->
        <div class="bg-white dark:bg-slate-900 px-6 flex flex-col justify-end md:order-4">
            <div class="flex items-center h-full border-b border-slate-200 dark:border-slate-700 py-2 text-slate-600 dark:text-slate-400">
                <svg class="shrink-0 fill-emerald-500 mr-3" xmlns="http://www.w3.org/2000/svg" width="12" height="9">
                    <path d="M10.28.28 3.989 6.575 1.695 4.28A1 1 0 0 0 .28 5.695l3 3a1 1 0 0 0 1.414 0l7-7A1 1 0 0 0 10.28.28Z" />
                </svg>
                <span>Unlimited <span class="md:sr-only">Receipts Forward</span></span>
            </div>
        </div>
        <!-- Supplier Management -->
        <div class="bg-white dark:bg-slate-900 px-6 flex flex-col justify-end md:order-5">
            <div class="flex items-center h-full border-b border-slate-200 dark:border-slate-700 py-2 text-slate-600 dark:text-slate-400">
                <svg class="shrink-0 fill-emerald-500 mr-3" xmlns="http://www.w3.org/2000/svg" width="12" height="9">
                    <path d="M10.28.28 3.989 6.575 1.695 4.28A1 1 0 0 0 .28 5.695l3 3a1 1 0 0 0 1.414 0l7-7A1 1 0 0 0 10.28.28Z" />
                </svg>
                <span>Unlimited <span class="md:sr-only">Supplier Management</span></span>
            </div>
        </div>
        <!-- # Features -->
        <div class="bg-white dark:bg-slate-900 px-6 flex flex-col justify-end md:order-6">
            <div class="py-2 text-slate-900 font-medium mt-4 md:sr-only">Features</div>
        </div>
        <!-- Generate Public URLs -->
        <div class="bg-white dark:bg-slate-900 px-6 flex flex-col justify-end md:order-7">
            <div class="flex items-center h-full border-b border-slate-200 dark:border-slate-700 py-2 text-slate-600 dark:text-slate-400">
                <svg class="shrink-0 fill-emerald-500 mr-3" xmlns="http://www.w3.org/2000/svg" width="12" height="9">
                    <path d="M10.28.28 3.989 6.575 1.695 4.28A1 1 0 0 0 .28 5.695l3 3a1 1 0 0 0 1.414 0l7-7A1 1 0 0 0 10.28.28Z" />
                </svg>
                <span><span class="md:sr-only">Generate Public URLs</span></span>
            </div>
        </div>
        <!-- API Integrations -->
        <div class="bg-white dark:bg-slate-900 px-6 flex flex-col justify-end md:order-8">
            <div class="flex items-center h-full border-b border-slate-200 dark:border-slate-700 py-2 text-slate-600 dark:text-slate-400">
                <svg class="shrink-0 fill-emerald-500 mr-3" xmlns="http://www.w3.org/2000/svg" width="12" height="9">
                    <path d="M10.28.28 3.989 6.575 1.695 4.28A1 1 0 0 0 .28 5.695l3 3a1 1 0 0 0 1.414 0l7-7A1 1 0 0 0 10.28.28Z" />
                </svg>
                <span><span class="md:sr-only">API Integrations</span></span>
            </div>
        </div>
        <!-- Extra Add-ons -->
        <div class="bg-white dark:bg-slate-900 px-6 flex flex-col justify-end md:order-9">
            <div class="flex items-center h-full border-b border-slate-200 dark:border-slate-700 py-2 text-slate-600 dark:text-slate-400">
                <svg class="shrink-0 fill-emerald-500 mr-3" xmlns="http://www.w3.org/2000/svg" width="12" height="9">
                    <path d="M10.28.28 3.989 6.575 1.695 4.28A1 1 0 0 0 .28 5.695l3 3a1 1 0 0 0 1.414 0l7-7A1 1 0 0 0 10.28.28Z" />
                </svg>
                <span><span class="md:sr-only">Extra Add-ons</span></span>
            </div>
        </div>
        <!-- Admin Roles -->
        <div class="bg-white dark:bg-slate-900 px-6 flex flex-col justify-end md:order-10">
            <div class="flex items-center h-full border-b border-slate-200 dark:border-slate-700 py-2 text-slate-600 dark:text-slate-400">
                <svg class="shrink-0 fill-emerald-500 mr-3" xmlns="http://www.w3.org/2000/svg" width="12" height="9">
                    <path d="M10.28.28 3.989 6.575 1.695 4.28A1 1 0 0 0 .28 5.695l3 3a1 1 0 0 0 1.414 0l7-7A1 1 0 0 0 10.28.28Z" />
                </svg>
                <span><span class="md:sr-only">Admin Roles</span></span>
            </div>
        </div>
        <!-- Admin Roles -->
        <div class="bg-white dark:bg-slate-900 px-6 flex flex-col justify-end md:order-11">
            <div class="flex items-center h-full border-b border-slate-200 dark:border-slate-700 py-2 text-slate-600 dark:text-slate-400">
                <svg class="shrink-0 fill-emerald-500 mr-3" xmlns="http://www.w3.org/2000/svg" width="12" height="9">
                    <path d="M10.28.28 3.989 6.575 1.695 4.28A1 1 0 0 0 .28 5.695l3 3a1 1 0 0 0 1.414 0l7-7A1 1 0 0 0 10.28.28Z" />
                </svg>
                <span><span class="md:sr-only">Admin Roles</span></span>
            </div>
        </div>
        <!-- Enterprise Add-ons -->
        <div class="bg-white dark:bg-slate-900 px-6 flex flex-col justify-end md:order-12">
            <div class="flex items-center h-full border-b border-slate-200 dark:border-slate-700 py-2 text-slate-600 dark:text-slate-400">
                <svg class="shrink-0 fill-emerald-500 mr-3" xmlns="http://www.w3.org/2000/svg" width="12" height="9">
                    <path d="M10.28.28 3.989 6.575 1.695 4.28A1 1 0 0 0 .28 5.695l3 3a1 1 0 0 0 1.414 0l7-7A1 1 0 0 0 10.28.28Z" />
                </svg>
                <span><span class="md:sr-only">Enterprise Add-ons</span></span>
            </div>
        </div>
        <!-- # Support -->
        <div class="bg-white dark:bg-slate-900 px-6 flex flex-col justify-end md:order-[13]">
            <div class="py-2 text-slate-900 font-medium mt-4 sr-only">Support</div>
        </div>
        <!-- Custom Connection -->
        <div class="bg-white dark:bg-slate-900 px-6 flex flex-col justify-end md:order-[14]">
            <div class="flex items-center h-full border-b border-slate-200 dark:border-slate-700 py-2 text-slate-600 dark:text-slate-400">
                <svg class="shrink-0 fill-emerald-500 mr-3" xmlns="http://www.w3.org/2000/svg" width="12" height="9">
                    <path d="M10.28.28 3.989 6.575 1.695 4.28A1 1 0 0 0 .28 5.695l3 3a1 1 0 0 0 1.414 0l7-7A1 1 0 0 0 10.28.28Z" />
                </svg>
                <span><span class="md:sr-only">Custom Connection</span></span>
            </div>
        </div>
    </section>
    <!-- End: Enterprise table -->
</div>

结论

怎么样？由于我们共同采取的步骤，也许比我们预期的要难。与往常一样，我们希望本指南很有帮助，如果您想查看如何使用每月/每年切换的定价表，请在下面查看以下这些教程：