Comparison List

Displays features or products side-by-side.

Basic Comparison List

Unlimited projects

Priority support

Custom integrations

Dedicated account manager

<div class="max-w-sm">
  <div class="d-f fd-c g-3">
    <div class="d-f ai-c g-3">
      <div class="d-f ai-c jc-c d-6 rad-9 bg-green-1 tc-green">
        <svg
          xmlns="http://www.w3.org/2000/svg"
          class="w-4 h-4"
          viewBox="0 0 256 256"
          aria-hidden="true"
        >
          <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>
      </div>
      <span class="fs-sm tc-slate">Unlimited projects</span>
    </div>
    <div class="d-f ai-c g-3">
      <div class="d-f ai-c jc-c d-6 rad-9 bg-green-1 tc-green">
        <svg
          xmlns="http://www.w3.org/2000/svg"
          class="w-4 h-4"
          viewBox="0 0 256 256"
          aria-hidden="true"
        >
          <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>
      </div>
      <span class="fs-sm tc-slate">Priority support</span>
    </div>
    <div class="d-f ai-c g-3">
      <div class="d-f ai-c jc-c d-6 rad-9 bg-green-1 tc-green">
        <svg
          xmlns="http://www.w3.org/2000/svg"
          class="w-4 h-4"
          viewBox="0 0 256 256"
          aria-hidden="true"
        >
          <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>
      </div>
      <span class="fs-sm tc-slate">Custom integrations</span>
    </div>
    <div class="d-f ai-c g-3">
      <div class="d-f ai-c jc-c d-6 rad-9 bg-red-1 tc-red">
        <svg
          xmlns="http://www.w3.org/2000/svg"
          class="w-4 h-4"
          viewBox="0 0 256 256"
          aria-hidden="true"
        >
          <rect width="256" height="256" fill="none" />
          <line
            x1="200"
            y1="56"
            x2="56"
            y2="200"
            stroke="currentColor"
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="16"
          />
          <line
            x1="200"
            y1="200"
            x2="56"
            y2="56"
            stroke="currentColor"
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="16"
          />
        </svg>
      </div>
      <span class="fs-sm tc-slate-6">Dedicated account manager</span>
    </div>
  </div>
</div>

Side by Side

Included

Unlimited bandwidth

SSL certificate

24/7 monitoring

Not included

Custom domain

Priority support

API access

<div class="d-g gtc-2 g-8">
  <div>
    <h3 class="ff-s fs-md fw-600 tc-slate mb-4">Included</h3>
    <div class="d-f fd-c g-3">
      <div 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"
          aria-hidden="true"
        >
          <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">Unlimited bandwidth</span>
      </div>
      <div 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"
          aria-hidden="true"
        >
          <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">SSL certificate</span>
      </div>
      <div 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"
          aria-hidden="true"
        >
          <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">24/7 monitoring</span>
      </div>
    </div>
  </div>
  <div>
    <h3 class="ff-s fs-md fw-600 tc-slate mb-4">Not included</h3>
    <div class="d-f fd-c g-3">
      <div class="d-f ai-c g-2">
        <svg
          xmlns="http://www.w3.org/2000/svg"
          class="w-4 h-4 tc-red"
          viewBox="0 0 256 256"
          aria-hidden="true"
        >
          <rect width="256" height="256" fill="none" />
          <line
            x1="200"
            y1="56"
            x2="56"
            y2="200"
            stroke="currentColor"
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="16"
          />
          <line
            x1="200"
            y1="200"
            x2="56"
            y2="56"
            stroke="currentColor"
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="16"
          />
        </svg>
        <span class="fs-sm tc-slate-6">Custom domain</span>
      </div>
      <div class="d-f ai-c g-2">
        <svg
          xmlns="http://www.w3.org/2000/svg"
          class="w-4 h-4 tc-red"
          viewBox="0 0 256 256"
          aria-hidden="true"
        >
          <rect width="256" height="256" fill="none" />
          <line
            x1="200"
            y1="56"
            x2="56"
            y2="200"
            stroke="currentColor"
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="16"
          />
          <line
            x1="200"
            y1="200"
            x2="56"
            y2="56"
            stroke="currentColor"
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="16"
          />
        </svg>
        <span class="fs-sm tc-slate-6">Priority support</span>
      </div>
      <div class="d-f ai-c g-2">
        <svg
          xmlns="http://www.w3.org/2000/svg"
          class="w-4 h-4 tc-red"
          viewBox="0 0 256 256"
          aria-hidden="true"
        >
          <rect width="256" height="256" fill="none" />
          <line
            x1="200"
            y1="56"
            x2="56"
            y2="200"
            stroke="currentColor"
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="16"
          />
          <line
            x1="200"
            y1="200"
            x2="56"
            y2="56"
            stroke="currentColor"
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="16"
          />
        </svg>
        <span class="fs-sm tc-slate-6">API access</span>
      </div>
    </div>
  </div>
</div>