Plano pro em destaque

Plano pro em destaque: um card em CSS. Copie as regras, ou o prompt que o reconstrói.

pricingfeaturedbadgedarkgradient

Team

Pro

$29/mo

  • Unlimited projects
  • Custom domains
  • Priority support
  • Team seats
Start free trial
CSS
.card-016-wrap {
  display: inline-block;
  filter: drop-shadow(0 20px 25px rgba(99,102,241,.45));
  transition: filter .2s
}
.card-016-wrap:hover {
  filter: drop-shadow(0 24px 30px rgba(99,102,241,.6))
}
.card-016 {
  position: relative;
  width: 270px;
  padding: 30px 26px 26px;
  background: #0f172a;
  color: #f8fafc;
  border-radius: 20px;
  font-family: system-ui,sans-serif
}
.card-016::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg,#818cf8,#c084fc,#22d3ee);
  -webkit-mask: linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none
}
.card-016__badge {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  padding: 5px 12px;
  border-radius: 999px;
  background: linear-gradient(90deg,#818cf8,#c084fc);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em
}
.card-016 h3 {
  margin: 0;
  font-size: 18px
}
.card-016__price {
  margin: 8px 0 18px;
  font-size: 44px;
  font-weight: 800;
  letter-spacing: -.03em
}
.card-016__price small {
  font-size: 14px;
  font-weight: 400;
  color: #94a3b8
}
.card-016 ul {
  margin: 0 0 22px;
  padding: 0 0 0 18px;
  list-style: disc;
  font-size: 14px;
  color: #cbd5e1
}
.card-016 li {
  padding: 5px 0
}
.card-016 li::marker {
  color: #a5b4fc
}
.card-016 a {
  display: block;
  padding: 12px;
  text-align: center;
  border-radius: 10px;
  background: linear-gradient(90deg,#818cf8,#c084fc);
  color: #fff;
  font-weight: 600;
  font-size: 14px;
  text-decoration: none
}
.card-016 a:hover {
  filter: brightness(1.1)
}
.card-016 :is(a,button,input,select,textarea):focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
HTML
<div class="card-016-wrap">
<article class="card-016">
  <span class="card-016__badge">Team</span>
  <h3>Pro</h3>
  <p class="card-016__price">$29<small>/mo</small></p>
  <ul><li>Unlimited projects</li><li>Custom domains</li><li>Priority support</li><li>Team seats</li></ul>
  <a href="#">Start free trial</a>
</article>
</div>
Prompt

Crie um card de preço em destaque de 270px sobre azul-marinho #0f172a com raio de 20px e uma sombra com brilho roxo 0 20px 50px -20px rgba(99,102,241,.6). Adicione uma borda em gradiente de 1px (135deg #818cf8, #c084fc, #22d3ee) usando um pseudo-elemento com máscara. Um badge em pílula "Team" fica centralizado sobre a borda superior com gradiente de 90deg #818cf8 para #c084fc. Dentro: nome do plano 18px, preço 44px extra-bold "$29" com "/mo" pequeno em #94a3b8, uma lista de quatro itens em #cbd5e1 com marcadores de disco em #a5b4fc, e um botão CTA em gradiente de largura total que clareia no hover.