Pricing Section

<div class="py-12 px-6">
  <div class="ta-c mb-10">
    <h2 class="ff-s fs-3xl fw-600 tc-slate-10 mb-2">Simple, transparent pricing</h2>
    <p class="fs-md tc-silver-10 m-0">Choose the plan that works best for you</p>
  </div>
  <div class="d-f fw-w jc-c g-6">
    <div class="w-72 b-1 bc-silver-4 rad-0 p-6 d-f fd-c">
      <div class="mb-6">
        <h3 class="ff-s fs-lg fw-600 tc-slate-10 mb-1">Free</h3>
        <p class="fs-sm tc-silver-10 m-0">For individuals getting started</p>
      </div>
      <div class="mb-6">
        <span class="fs-4xl fw-700 tc-slate-10">€0</span>
        <span class="fs-sm tc-silver-10">/month</span>
      </div>
      <ul class="d-f fd-c g-3 mb-6 p-0">
        <li class="d-f ai-c g-2">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            class="w-4 h-4 tc-green"
            viewBox="0 0 256 256"
          >
            <rect width="256" height="256" fill="none" />
            <polyline
              points="40 144 96 200 224 72"
              fill="none"
              stroke="currentColor"
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="16"
            />
          </svg>
          <span class="fs-sm tc-slate-8">Up to 3 projects</span>
        </li>
        <li class="d-f ai-c g-2">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            class="w-4 h-4 tc-green"
            viewBox="0 0 256 256"
          >
            <rect width="256" height="256" fill="none" />
            <polyline
              points="40 144 96 200 224 72"
              fill="none"
              stroke="currentColor"
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="16"
            />
          </svg>
          <span class="fs-sm tc-slate-8">Basic analytics</span>
        </li>
        <li class="d-f ai-c g-2">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            class="w-4 h-4 tc-green"
            viewBox="0 0 256 256"
          >
            <rect width="256" height="256" fill="none" />
            <polyline
              points="40 144 96 200 224 72"
              fill="none"
              stroke="currentColor"
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="16"
            />
          </svg>
          <span class="fs-sm tc-slate-8">Community support</span>
        </li>
      </ul>
      <button class="mt-auto ai-c d-f jc-c px-4 py-2 rad-0 fs-sm fw-500 bg-white tc-slate-8 b-1 bc-silver-4 h:bg-silver-1 f:oc-silver-1 f:os-s f:ow-2">
        Get started
      </button>
    </div>
    <div class="w-72 b-2 bc-slate-8 rad-0 p-6 d-f fd-c">
      <div class="mb-6">
        <div class="d-f ai-c jc-sb mb-1">
          <h3 class="ff-s fs-lg fw-600 tc-slate-10 m-0">Premium</h3>
          <span class="bg-slate-8 tc-white px-2 py-1 rad-9 fs-xs fw-500">Popular</span>
        </div>
        <p class="fs-sm tc-silver-10 m-0">For growing teams and businesses</p>
      </div>
      <div class="mb-6">
        <span class="fs-4xl fw-700 tc-slate-10">€59</span>
        <span class="fs-sm tc-silver-10">/month</span>
      </div>
      <ul class="d-f fd-c g-3 mb-6 p-0">
        <li class="d-f ai-c g-2">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            class="w-4 h-4 tc-green"
            viewBox="0 0 256 256"
          >
            <rect width="256" height="256" fill="none" />
            <polyline
              points="40 144 96 200 224 72"
              fill="none"
              stroke="currentColor"
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="16"
            />
          </svg>
          <span class="fs-sm tc-slate-8">Unlimited projects</span>
        </li>
        <li class="d-f ai-c g-2">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            class="w-4 h-4 tc-green"
            viewBox="0 0 256 256"
          >
            <rect width="256" height="256" fill="none" />
            <polyline
              points="40 144 96 200 224 72"
              fill="none"
              stroke="currentColor"
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="16"
            />
          </svg>
          <span class="fs-sm tc-slate-8">Advanced analytics</span>
        </li>
        <li class="d-f ai-c g-2">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            class="w-4 h-4 tc-green"
            viewBox="0 0 256 256"
          >
            <rect width="256" height="256" fill="none" />
            <polyline
              points="40 144 96 200 224 72"
              fill="none"
              stroke="currentColor"
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="16"
            />
          </svg>
          <span class="fs-sm tc-slate-8">Priority support</span>
        </li>
        <li class="d-f ai-c g-2">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            class="w-4 h-4 tc-green"
            viewBox="0 0 256 256"
          >
            <rect width="256" height="256" fill="none" />
            <polyline
              points="40 144 96 200 224 72"
              fill="none"
              stroke="currentColor"
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="16"
            />
          </svg>
          <span class="fs-sm tc-slate-8">Custom integrations</span>
        </li>
      </ul>
      <button class="mt-auto ai-c d-f jc-c px-4 py-2 rad-0 fs-sm fw-500 bg-slate-8 tc-white h:bg-slate-10 f:oc-silver-4 f:os-s f:ow-2">Get started</button>
    </div>
  </div>
</div>