Plano pro em destaque
Plano pro em destaque: um card em CSS. Copie as regras, ou o prompt que o reconstrói.
Pro
$29/mo
- Unlimited projects
- Custom domains
- Priority support
- Team seats
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.