Tailwind: 撸一个报价卡片

本章我们将使用 tailwind 撸一个报价卡片。

首先，我们先从制作单一卡片开始，制作好了一个卡片，将它复制多份就可以了。

<div class="container mx-auto my-60 bg-red-50" id="cta">
  <div class="flex flex-col items-end justify-center space-y-4 md:flex-row md:space-x-8" id="flex-cta">
    <div class="flex w-full scale-95 flex-col items-center justify-center space-y-6 rounded-lg border-8 border-gray-600 bg-gradient-to-r from-gray-50 to-gray-100 p-6 shadow-md transition-all duration-500 hover:scale-100 hover:border-gray-800 md:w-auto" id="card-1">
      <div class="flex flex-col items-center justify-center space-y-4" id="card-header-1">
        <h3 class="text-2xl" id="card-title-1">基础服务</h3>
        <div class="flex items-center justify-center space-x-2" id="card-price-box-1">
          <span class="block text-sm" id="card-price-only-1">仅需</span>
          <strong class="block text-xl text-blue-700" id="card-price-1">¥ 799</strong>
        </div>
      </div>
      <ul class="flex flex-col items-center justify-center space-y-2 text-gray-600" id="card-detail-1">
        <li class="before:mr-2 before:content-['✅']">专业级的服务</li>
        <li class="before:mr-2 before:content-['✅']">物超所值的享受</li>
        <li class="before:mr-2 before:content-['✅']">反正就是用了都说好</li>
        <li class="before:mr-2 before:content-['✅']">实在编不下去了</li>
      </ul>
      <div id="card-buy-1">
        <button class="rounded-md border border-blue-600/95 bg-gradient-to-br from-blue-600/75 to-blue-600/90 px-12 py-3 text-gray-100 hover:bg-gradient-to-tl hover:from-blue-700/75 hover:to-blue-700/90">订购</button>
      </div>
    </div>
    <div class="flex w-full scale-95 flex-col items-center justify-center space-y-6 rounded-lg border-8 border-gray-600 bg-gradient-to-r from-gray-50 to-gray-100 p-6 shadow-md transition-all duration-500 hover:scale-100 hover:border-gray-800 md:w-auto md:scale-100 md:border-gray-800" id="card-2">
      <div class="flex flex-col items-center justify-center space-y-4" id="card-header-2">
        <h3 class="text-2xl" id="card-title-2">标准服务</h3>
        <div class="flex items-center justify-center space-x-2" id="card-price-box-2">
          <span class="block text-sm" id="card-price-only-2">仅需</span>
          <strong class="block text-xl text-blue-700" id="card-price-2">¥ 3999</strong>
        </div>
      </div>
      <ul class="flex flex-col items-center justify-center space-y-2 text-gray-600" id="card-detail-2">
        <li class="before:mr-2 before:content-['✅']">专业级的服务</li>
        <li class="before:mr-2 before:content-['✅']">物超所值的享受</li>
        <li class="before:mr-2 before:content-['✅']">反正就是用了都说好</li>
        <li class="before:mr-2 before:content-['✅']">实在编不下去了</li>
      </ul>
      <div id="card-buy-2">
        <button class="rounded-md border border-blue-600/95 bg-gradient-to-br from-blue-600/75 to-blue-600/90 px-12 py-3 text-gray-100 hover:bg-gradient-to-tl hover:from-blue-700/75 hover:to-blue-700/90">订购</button>
      </div>
    </div>
    <div class="flex w-full scale-95 flex-col items-center justify-center space-y-6 rounded-lg border-8 border-gray-600 bg-gradient-to-r from-gray-50 to-gray-100 p-6 shadow-md transition-all duration-500 hover:scale-100 hover:border-gray-800 md:w-auto" id="card-3">
      <div class="flex flex-col items-center justify-center space-y-4" id="card-header-3">
        <h3 class="text-2xl" id="card-title-1">高级服务</h3>
        <div class="flex items-center justify-center space-x-2" id="card-price-box-3">
          <span class="block text-sm" id="card-price-only-3">仅需</span>
          <strong class="block text-xl text-blue-700" id="card-price-3">¥ 5899</strong>
        </div>
      </div>
      <ul class="flex flex-col items-center justify-center space-y-2 text-gray-600" id="card-detail-3">
        <li class="before:mr-2 before:content-['✅']">专业级的服务</li>
        <li class="before:mr-2 before:content-['✅']">物超所值的享受</li>
        <li class="before:mr-2 before:content-['✅']">反正就是用了都说好</li>
        <li class="before:mr-2 before:content-['✅']">实在编不下去了</li>
      </ul>
      <div id="card-buy-3">
        <button class="rounded-md border border-blue-600/95 bg-gradient-to-br from-blue-600/75 to-blue-600/90 px-12 py-3 text-gray-100 hover:bg-gradient-to-tl hover:from-blue-700/75 hover:to-blue-700/90">订购</button>
      </div>
    </div>
  </div>
</div>

点击这里查看代码和效果。

• #cta：为了显示起来好看，临时用的容器，对于卡片本身来说，它可有可无。
  • container：正如上一章说的，tailwind 提供了容器类，就是它了。
    • 已定义的断点上，它会把容器的最大宽度设置为与断点相同的大写
    • 小于 sm 断点的屏幕上，它会把容器的宽度设置为 100%
    • 不同于 bootstrap 这些框架，tailwind 的 container 不会自动水平居中，需要手动加上 mx-auto
• #flex-cta：用于布局多个卡片的容器
  • 在移动设备上，它是垂直布局的，并且有4个单位的垂直间隙
  • 在桌面设备上，它是水平布局的，并且有8个单位的水平间隙
• 其它元素
  • 为了实现响应式布局，都以移动端优先，给每个元素通过md断点增加了适配不同设备的样式
  • 针对卡片2，
    • 桌面设备：我们把原本属于 hover 伪类的样式直接给到了 md 断点，这样就能在视觉上产生关注点

好了，本章至此结束，下一章我们将使用 tailwind 撸一个纯 CSS 的响应式的导航栏。