如何使用parwindcss创建响应式响应定价卡组件-DEV365 开发者社区

按定义，定价计划只是一张卡片，它显示给定的服务成本或给定包裹的不同时间的费用多少。

这种组件主要用于软件用作服务（SaaS）演示网站，人们可以在其中订阅每周，每月甚至每年订阅。他们通常提供多种选择，客户选择适合他/她最佳需求的选择。

在我们的示例中，我们有2个计划：基本， pro 。但是可以肯定的是，人们总是可以以一种可以添加，删除或修改计划的方式自定义组件。
没有进一步的ADO，让我们直接深入实施。

应该注意的是，本教程是使用tailwindcss完成的，该教程使用Node Package Manager（NPM）进行工作，因此安装节点很重要，然后应稍后安装TailWindCSS。您可以在https://tailwindcss.com/docs/installation
上阅读更多信息

了解任务

您可能已经注意到，这两个计划看起来都相同。是的，除了他们提供的不同包裹。因此，如果我们设计一个计划，我们可以简单地复制它，编辑文本内容以构建其他计划。
将计划分为不同的部分，我们可以观察到一个计划可以分为3个部分（由图像上的三个正方形指示）。有了这个思想，让我们开始吧！ ð

代码的结构

<body>
  <div>
      <div>
            <!-- Basic Plan -->
              <div class="basic"></div>

               <!-- Pro Plan -->
              <div class="pro"></div>
      </div>
  </div>
</body>

让我们专注于基本计划，因为我们将设计它，然后复制并构成专业计划。

<!-- Basic Plan -->
<div class="basic border-b sm:border-b-0 sm:border-r border-[#b1a9ab] border-opacity-25 pb-10 mb-10 sm:pb-0 sm:mb-0 sm:pr-10 sm:mr-10">



<!-- First Part -->
    <div>
      <h2 class="text-3xl font-semibold">Basic</h2>
      <ul class="mt-3">
          <li class="text-xl">Free</li>
          <li>3,000 monthly visitors</li>
      </ul>
    </div>

          <!-- Second Part -->
    <div class="my-10">
    <ul class="[&>*]:flex [&>*]:items-end [&>*]:gap-1 [&>*>div]:text-[10px] [&>*]:">
        <li>
            <div>
                <iconify-icon icon="ic:baseline-circle"></iconify-icon>
            </div>
            Limited reports
        </li>
        <li>
            <div>
                <iconify-icon icon="ic:baseline-circle"></iconify-icon>
            </div>
            Unlimited projects
        </li>
        <li>
            <div>
                <iconify-icon icon="ic:baseline-circle"></iconify-icon>
            </div>
            Data storage for 1 year
        </li>
    </ul>
    </div>

          <!-- Third Part -->
    <div class="w-56 px-8 py-4 text-[#af2830] border border-[#af2830] text-center font-semibold rounded cursor-pointer hover:bg-[#af2830] hover:text-[#b1a9ab]">
        <h2>Start now</h2>
    </div>

</div>

让我们了解以上代码：
我们将基本计划分为3个部分：第一，第二和第三部分

第一部分：我们有基本的计划文本，具有font-semibold（font-peright〜700）和text-3xl（font-size 〜1.875REM）的CSS属性。然后是普通的无序列表，其中有两个列表项目；免费和每月访客的数量

第二部分：这部分主要具有基本计划包提供的内容。它以无序列表的形式排列，每个列表项目由两个部分，图标和文本组成。

这些图标是从iconify出口的，您可以检查一下。

属性[&>*]只是指“选择每个孩子”，这使我们可以将相同的样式属性应用于所有直系亲属

第三部分：这包含“对操作”按钮的调用。我决定将其作为一个单独的部分，因为它有点让我清楚地了解了我的代码，并且可以轻松地围绕它。

专业计划

这是工作中“最简单的”部分，CRTL + C，然后是CRTL + V（复制和粘贴）ðâ€

<!-- Pro Plan -->
   <div>
              <!-- First Part -->
      <div>
          <h2 class="text-3xl font-semibold">Pro</h2>
          <ul class="mt-3">
              <li class="text-lg"><span class="text-xl">$19</span> / month</li>
              <li>10,000 monthly visitors</li>
          </ul>
      </div>
                <!-- Second Part -->
      <div class="my-10">
          <ul class="[&>*]:flex [&>*]:items-end [&>*]:gap-1 [&>*>div]:text-[10px]">
              <li>
                  <div>
                      <iconify-icon icon="ic:baseline-circle"></iconify-icon>
                  </div>
                  Unlimited reports
              </li>
              <li>
                  <div>
                      <iconify-icon icon="ic:baseline-circle"></iconify-icon>
                  </div>
                  15-days free trial
              </li>
              <li>
                  <div>
                      <iconify-icon icon="ic:baseline-circle"></iconify-icon>
                  </div>
                  Data storage for 3 year
              </li>
          </ul>
      </div>
            <!-- Third Part -->
      <div class="w-56 px-8 py-4 bg-[#af2830] text-center font-semibold rounded cursor-pointer border border-[#af2830] hover:bg-transparent hover:text-[#af2830]">
          <h2>Try it</h2>
      </div>
  </div>

复制基本计划的结构，然后根据计划调整文本。

看来缺少某物。

哦，是的！定价卡影子Shadowðâ！

也要做。

返回主容器，让我们添加盒子阴影，以及一些额外的属性，例如宽度，边框半径（rounded-md），文本颜色（＃b1a9ab），paddings（px, py）和margins（mx, my）。

<body class="bg-[#af2830] flex items-center justify-center min-h-screen selection:text-white selection:bg-[#af2830]">

  <div class="relative after:content-[''] after:absolute after:bottom-[-3.5rem] after:left-[-8%] after:bg-[rgb(153,26,34,0.8)] 
      after:w-[115%] after:h-[7rem] after:rounded-[50%] after:-z-10 bg-[#22161a] w-full max-w-2xl h-full rounded-md text-[#b1a9ab] 
       px-10 py-12 sm:py-14 space-y-6 shadow-2xl [&_*]:transition-all [&_*]:ease-linear [&_*]:duration-200">

      <div class="flex flex-col sm:flex-row items-center justify-center gap-y-10 sm:gap-5">
            <!-- Basic Plan -->
              <div class="basic"></div>

               <!-- Pro Plan -->
              <div class="pro"></div>
      </div>
  </div>

</body>

如果您注意到很好，我们还为车身标签添加了一些属性，这只是为了设置图片的美丽背景，并将我们的定价计划组件集中在屏幕中心。当然有一种额外的样式，我可以让您发现ð

就是这样！一切都很好。 ð

结论

我们刚刚构建了一个简单的定价组件，而无需打开CSS文件。感谢parwindcss。许多雇主将需要将这些组件添加到他们的网站上，并且可以肯定的是，您知道直接从HTML文档创建它是多么简单。

您可以在Codepen上进行实时预览，也可以在Github

上找到代码

如果您能够完成本教程，请随时与我分享，我很高兴看到您添加的任何添加组件和样式。

如果您有任何担忧或建议，请不要犹豫！ ð

见yaâ！ ð