# Featured pro tier (C 016)

Category: Cards  
Tags: pricing, featured, badge, dark, gradient  
Page: https://designforai.dev/snippet/card-016

## 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.

## HTML

```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>
```

## CSS

```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; }
```