safing-web/_includes/spn_vs_others.html

<div class="card-table">
  <table>
    <colgroup class="card-table-colgroup">
      <col class="card-table-colgroup-col">
      <col class="card-table-colgroup-col">
      <col class="card-table-colgroup-col-highlight">
      <col class="card-table-colgroup-col">
    </colgroup>
    <thead class="card-table-header">
      <tr class="card-table-header-row">
        <th class="card-table-header-row-cell"></th>
        <th class="card-table-header-row-cell">Most VPNs</th>
        <th class="card-table-header-row-cell">SPN</th>
        <th class="card-table-header-row-cell">Tor</th>
      </tr>
    </thead>
    <tbody class="card-table-body">
      <tr class="card-table-body-row">
        <td class="card-table-body-row-cell-title">Multiple Identities (simultaneous)</td>
        <td class="card-table-body-row-cell"><i class="icon-cross text-2xl text-red-500"></i></td>
        <td class="card-table-body-row-cell"><i class="icon-tick text-2xl text-green-500"></i></td>
        <td class="card-table-body-row-cell"><i class="icon-tick text-2xl text-green-500"></i></td>
      </tr>
      <tr class="card-table-body-row">
        <td class="card-table-body-row-cell-title">Automatic Geo-Unblocking</td>
        <td class="card-table-body-row-cell"><i class="icon-cross text-2xl text-red-500"></i></td>
        <td class="card-table-body-row-cell"><i class="icon-tick text-2xl text-green-500"></i></td>
        <td class="card-table-body-row-cell"><i class="icon-cross text-2xl text-red-500"></i></td>
      </tr>
      <tr class="card-table-body-row">
        <td class="card-table-body-row-cell-title">Individual Apps Settings</td>
        <td class="card-table-body-row-cell"><i class="icon-cross text-2xl text-red-500"></i></td>
        <td class="card-table-body-row-cell"><i class="icon-tick text-2xl text-green-500"></i></td>
        <td class="card-table-body-row-cell"><i class="icon-cross text-2xl text-red-500"></i></td>
      </tr>
      <tr class="card-table-body-row">
        <td class="card-table-body-row-cell-title">Easy Setup</td>
        <td class="card-table-body-row-cell"><i class="icon-tick text-2xl text-green-500"></i></td>
        <td class="card-table-body-row-cell"><i class="icon-tick text-2xl text-green-500"></i></td>
        <td class="card-table-body-row-cell"><strong>Browser Only</strong></td>
      </tr>
      <tr class="card-table-body-row">
        <td class="card-table-body-row-cell-title">Availabilty</td>
        <td class="card-table-body-row-cell">
          <div class="md:space-x-2">
            <i class="icon-windows text-2xl text-safing-blue-500"></i>
            <i class="icon-linux text-2xl"></i>
            <i class="icon-mac text-2xl text-gray-500"></i>
            <i class="icon-mobile-devices-vibration2 text-2xl text-gray-500"></i>
          </div>
        </td>
        <td class="card-table-body-row-cell">
          <a class="card-table-body-row-cell-link" href="{{ site.portmaster_url }}">
            <div class="md:space-x-2">
              <i class="icon-windows text-2xl text-safing-blue-500"></i>
              <i class="icon-linux text-2xl"></i>
            </div>
          </a>
        </td>
        <td class="card-table-body-row-cell">
          <a class="card-table-body-row-cell-link" href="https://www.torproject.org/download/">
            <div class="md:space-x-2">
              <i class="icon-windows text-2xl text-safing-blue-500"></i>
              <i class="icon-linux text-2xl"></i>
              <i class="icon-mac text-2xl text-gray-500"></i>
              <i class="icon-mobile-devices-vibration2 text-2xl text-gray-500"></i>
            </div>
          </a>
        </td>
      </tr>
      <tr class="card-table-body-row">
        <td class="card-table-body-row-cell-title">Open Source</td>
        <td class="card-table-body-row-cell"><i class="icon-cross text-2xl text-red-500"></i></td>
        <td class="card-table-body-row-cell">
          <a class="card-table-body-row-cell-link" href="{{ site.github_url }}/spn">
            <i class="icon-tick text-2xl text-green-500"></i>
          </a>
        </td>
        <td class="card-table-body-row-cell">
          <a class="card-table-body-row-cell-link" href="https://gitweb.torproject.org/">
            <i class="icon-tick text-2xl text-green-500"></i>
          </a>
        </td>
      </tr>
      <tr class="card-table-body-row">
        <td class="card-table-body-row-cell-title">Built for Privacy</td>
        <td class="card-table-body-row-cell"><i class="icon-cross text-2xl text-red-500"></i></td>
        <td class="card-table-body-row-cell"><i class="icon-tick text-2xl text-green-500"></i></td>
        <td class="card-table-body-row-cell"><i class="icon-tick text-2xl text-green-500"></i></td>
      </tr>
    </tbody>
  </table>
</div>