Featured pro tier
Featured pro tier: a CSS card. Copy the rules, or the prompt that rebuilds it.
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
Create a 270px featured pricing card on navy #0f172a with 20px radius and a purple glow shadow 0 20px 50px -20px rgba(99,102,241,.6). Add a 1px gradient border (135deg #818cf8, #c084fc, #22d3ee) using a masked pseudo-element. A pill badge "Team" sits centered over the top edge with a 90deg gradient #818cf8 to #c084fc. Inside: 18px plan name, 44px extra-bold price "$29" with "/mo" small in #94a3b8, a four-item list in #cbd5e1 with disc bullets in #a5b4fc, and a full-width gradient CTA button that brightens on hover.