Pricing Table — Playground

{CF} CodeFronts Back to CSS Grid Layouts Pricing Table Pure CSS

Edit any tab — preview updates live

.gl-pri {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: end;
  gap: 6px;
  width: 320px;
  padding-top: 14px;
  font-family: system-ui, sans-serif;
  color: #f0eeff;
}
.gl-pri-tier {
  background: #18181f;
  border: 1px solid rgba(124,108,255,0.22);
  border-radius: 8px;
  padding: 12px 8px;
  text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
}
.gl-pri-tier h4 { margin: 0; font-size: 11.5px; color: #cbd5e1; font-weight: 600; }
.gl-pri-amt { font-size: 22px; font-weight: 800; color: #fff; line-height: 1.1; }
.gl-pri-per { font-size: 10px; color: #9d9bbf; }
.gl-pri-feat {
  position: relative;
  margin-top: -14px;
  padding-bottom: 16px;
  background: linear-gradient(180deg, #2a1f5c, #1a1538);
  border-color: #a78bfa;
  box-shadow: 0 6px 20px rgba(124,108,255,0.3);
}
.gl-pri-feat .gl-pri-amt { color: #a78bfa; }
.gl-pri-badge {
  position: absolute; top: -8px; left: 50%; transform: translateX(-50%);
  background: linear-gradient(135deg, #7c6cff, #a78bfa);
  color: #fff;
  font-family: monospace; font-size: 8.5px; font-weight: 700;
  letter-spacing: 0.1em;
  padding: 2px 8px; border-radius: 10px;
  white-space: nowrap;
}

Live preview Ready