Price Card Hero — Playground

{CF} CodeFronts Back to CSS Hero Sections Price Card Hero Pure CSS

Edit any tab — preview updates live

.hs-prc {
  width: 100%;
  min-height: clamp(220px, 30vh, 100vh);
  padding: clamp(20px, 4vh, 60px) clamp(16px, 4vw, 40px);
  background:
    radial-gradient(40% 40% at 80% 30%, rgba(46,184,138,0.18), transparent 70%),
    radial-gradient(40% 40% at 20% 70%, rgba(124,108,255,0.18), transparent 70%),
    #0e0e16;
  display: grid; grid-template-columns: 1fr 280px;
  gap: clamp(12px, 3vw, 32px); align-items: center;
  font-family: system-ui, sans-serif; color: #f0eeff;
}
@media (max-width: 720px) { .hs-prc { grid-template-columns: 1fr; } }
.hs-prc-tag {
  display: inline-block;
  font-family: monospace; font-size: clamp(9px, 1.3vw, 11px); font-weight: 700;
  letter-spacing: 0.12em;
  padding: 4px 10px; border-radius: 12px;
  background: rgba(46,184,138,0.16); color: #2eb88a;
  border: 1px solid rgba(46,184,138,0.4);
}
.hs-prc-l h1 {
  margin: 10px 0; font-size: clamp(20px, 4vw, 44px);
  font-weight: 800; line-height: 1.1; letter-spacing: -0.02em;
}
.hs-prc-l p { margin: 0 0 10px; font-size: clamp(11px, 1.5vw, 15px); color: #b8b6d4; }
.hs-prc-li {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 4px;
  font-size: clamp(10px, 1.4vw, 13px); color: #b8b6d4;
}
.hs-prc-li li { color: #f0eeff; }
.hs-prc-li li::first-letter { color: #2eb88a; font-weight: 700; }
.hs-prc-card {
  position: relative;
  background: linear-gradient(180deg, rgba(124,108,255,0.16), rgba(167,139,250,0.04));
  border: 1px solid rgba(167,139,250,0.5);
  border-radius: 14px;
  padding: clamp(16px, 3vw, 24px);
  text-align: center;
  display: flex; flex-direction: column; gap: 4px; align-items: center;
  box-shadow: 0 16px 40px rgba(124,108,255,0.18);
}
.hs-prc-rib {
  position: absolute; top: -10px; left: 50%; transform: translateX(-50%);
  background: linear-gradient(135deg, #7c6cff, #a78bfa); color: #fff;
  font-family: monospace; font-size: 9.5px; font-weight: 700;
  letter-spacing: 0.12em; padding: 3px 10px; border-radius: 12px;
  white-space: nowrap;
}
.hs-prc-name {
  font-family: monospace; font-size: clamp(10px, 1.4vw, 12px);
  letter-spacing: 0.16em; text-transform: uppercase;
  color: #a78bfa; margin-top: 4px;
}
.hs-prc-price {
  display: flex; align-items: baseline; justify-content: center; gap: 8px;
  margin: 4px 0;
}
.hs-prc-was { font-size: clamp(14px, 2vw, 18px); color: #b8b6d4; text-decoration: line-through; }
.hs-prc-now { font-size: clamp(28px, 5vw, 44px); font-weight: 900; color: #fff; letter-spacing: -0.02em; }
.hs-prc-per { font-size: clamp(9px, 1.2vw, 11px); color: #b8b6d4; }
.hs-prc-cta {
  margin-top: 8px; width: 100%;
  padding: 10px 0; border-radius: 8px;
  background: linear-gradient(135deg, #7c6cff, #a78bfa); color: #fff;
  font-size: clamp(11px, 1.5vw, 14px); font-weight: 700;
  text-decoration: none; transition: filter 0.15s;
}
.hs-prc-cta:hover { filter: brightness(1.12); }
.hs-prc-fine { font-size: 9.5px; color: #b8b6d4; margin-top: 4px; }

Live preview Ready