Tailwind: 撸一个报价卡片

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

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

制作卡片

<div class="flex w-96 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" 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="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>

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