Insurance Coverage Comparison Table — Free HTML CSS JS Snippet

<div class="cc-wrap">
  <div class="cc-head">
    <h2>Compare plans</h2>
    <p>Every plan includes 24/7 claims support and no hidden fees.</p>
  </div>

  <div class="cc-table-scroll">
    <table class="cc-table">
      <thead>
        <tr>
          <th class="cc-row-label"></th>
          <th>Basic</th>
          <th class="cc-recommended">
            <span class="cc-badge">Most popular</span>
            Standard
          </th>
          <th>Premium</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td class="cc-row-label">Monthly premium</td>
          <td class="cc-price">$24<span>/mo</span></td>
          <td class="cc-recommended cc-price">$41<span>/mo</span></td>
          <td class="cc-price">$68<span>/mo</span></td>
        </tr>
        <tr>
          <td class="cc-row-label">Coverage limit</td>
          <td>$25,000</td>
          <td class="cc-recommended">$100,000</td>
          <td>$500,000</td>
        </tr>
        <tr>
          <td class="cc-row-label">Deductible</td>
          <td>$1,000</td>
          <td class="cc-recommended">$500</td>
          <td>$250</td>
        </tr>
        <tr>
          <td class="cc-row-label">Roadside assistance</td>
          <td class="cc-dash">—</td>
          <td class="cc-recommended cc-check">✓</td>
          <td class="cc-check">✓</td>
        </tr>
        <tr>
          <td class="cc-row-label">Rental car reimbursement</td>
          <td class="cc-dash">—</td>
          <td class="cc-recommended cc-check">✓</td>
          <td class="cc-check">✓</td>
        </tr>
        <tr>
          <td class="cc-row-label">Accident forgiveness</td>
          <td class="cc-dash">—</td>
          <td class="cc-recommended cc-dash">—</td>
          <td class="cc-check">✓</td>
        </tr>
        <tr>
          <td class="cc-row-label">New car replacement</td>
          <td class="cc-dash">—</td>
          <td class="cc-recommended cc-dash">—</td>
          <td class="cc-check">✓</td>
        </tr>
        <tr>
          <td class="cc-row-label">Claims response time</td>
          <td>5–7 days</td>
          <td class="cc-recommended">2–4 days</td>
          <td>24 hours</td>
        </tr>
      </tbody>
      <tfoot>
        <tr>
          <td class="cc-row-label"></td>
          <td><button class="cc-btn cc-btn-outline" onclick="selectPlan('Basic', this)">Choose Basic</button></td>
          <td class="cc-recommended"><button class="cc-btn cc-btn-solid" onclick="selectPlan('Standard', this)">Choose Standard</button></td>
          <td><button class="cc-btn cc-btn-outline" onclick="selectPlan('Premium', this)">Choose Premium</button></td>
        </tr>
      </tfoot>
    </table>
  </div>

  <div class="cc-selected" id="ccSelected" hidden></div>
</div>

*{box-sizing:border-box;margin:0;padding:0}
body{font-family:system-ui,-apple-system,sans-serif;background:#0b0e14;color:#e6e9f0;min-height:100vh;padding:40px 20px;display:flex;justify-content:center;align-items:center}
.cc-wrap{width:100%;max-width:760px}
.cc-head{text-align:center;margin-bottom:26px}
.cc-head h2{font-size:26px;letter-spacing:-.01em;margin-bottom:6px}
.cc-head p{color:#8992a8;font-size:13px}

.cc-table-scroll{overflow-x:auto;border-radius:16px;border:1px solid #232a3a}
.cc-table{width:100%;border-collapse:collapse;background:#12161f;min-width:520px}
.cc-table th,.cc-table td{padding:14px 16px;text-align:center;font-size:13px;border-bottom:1px solid #1c2230}
.cc-table thead th{font-size:14px;font-weight:800;color:#f4f6fb;padding-top:20px;position:relative}
.cc-row-label{text-align:left;color:#aab1c6;font-weight:600;white-space:nowrap}
.cc-table tbody tr:last-child td{border-bottom:none}

.cc-recommended{background:#161f33;position:relative}
.cc-table thead .cc-recommended{border-radius:10px 10px 0 0}
.cc-badge{display:block;font-size:10px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:#7cb2ff;background:#1e2c4a;padding:3px 9px;border-radius:999px;margin:0 auto 8px;width:fit-content}

.cc-price{font-size:18px;font-weight:800;color:#f4f6fb}
.cc-price span{font-size:11px;font-weight:500;color:#8992a8}

.cc-check{color:#4ade80;font-weight:800;font-size:15px}
.cc-dash{color:#3d4356}

.cc-table tfoot .cc-recommended{border-radius:0 0 10px 10px}
.cc-btn{width:100%;padding:9px 10px;border-radius:9px;font-size:12px;font-weight:700;cursor:pointer;font-family:inherit;border:1px solid transparent;transition:opacity .15s}
.cc-btn-outline{background:transparent;border-color:#2c3448;color:#c6ccdb}
.cc-btn-outline:hover{background:#1a2030}
.cc-btn-solid{background:#3b82f6;color:#fff}
.cc-btn-solid:hover{opacity:.9}

.cc-selected{margin-top:18px;padding:12px 16px;background:#0f3327;color:#4ade80;border-radius:11px;font-size:13px;font-weight:600;text-align:center}

@media (max-width:640px){.cc-table th,.cc-table td{padding:11px 10px;font-size:12px}}

function selectPlan(name, btn) {
  var box = document.getElementById('ccSelected');
  box.hidden = false;
  box.textContent = 'You selected the ' + name + ' plan. Continuing to checkout…';

  document.querySelectorAll('.cc-btn').forEach(function (b) { b.disabled = false; });
  btn.disabled = true;

  box.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
}