Divisor por niveles

Divisor por niveles: tarjeta en CSS. Copia las reglas, o el prompt que reproduce el resultado.

pricingtieredaccentlightshadow

Business

$99 per month

  • Everything in Pro
  • Dedicated manager
  • 99.9% SLA
CSS
.card-018 {
  width: 270px;
  background: #fff;
  border-radius: 18px;
  overflow: hidden;
  font-family: system-ui,sans-serif;
  color: #1e293b;
  box-shadow: 0 6px 24px rgba(15,23,42,.1)
}
.card-018__top {
  padding: 24px;
  background: linear-gradient(135deg,#0d9488,#0f766e);
  color: #fff
}
.card-018 h3 {
  margin: 0;
  font-size: 16px;
  opacity: .9
}
.card-018__top p {
  margin: 8px 0 0;
  font-size: 14px;
  opacity: .85
}
.card-018__top b {
  font-size: 36px;
  font-weight: 800;
  margin-right: 6px
}
.card-018 ul {
  margin: 0;
  padding: 18px 24px;
  list-style: none;
  font-size: 14px
}
.card-018 li {
  padding: 6px 0 6px 22px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230d9488' stroke-width='3'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E") 0 9px/14px no-repeat
}
.card-018 button {
  display: block;
  width: calc(100% - 48px);
  margin: 4px 24px 24px;
  padding: 11px;
  border: 2px solid #0d9488;
  border-radius: 10px;
  background: #fff;
  color: #0d9488;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  transition: background .15s,color .15s
}
.card-018 button:hover {
  background: #0d9488;
  color: #fff
}
.card-018 :is(a,button,input,select,textarea):focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
HTML
<article class="card-018">
  <div class="card-018__top">
    <h3>Business</h3>
    <p><b>$99</b> per month</p>
  </div>
  <ul><li>Everything in Pro</li><li>Dedicated manager</li><li>99.9% SLA</li></ul>
  <button>Contact sales</button>
</article>
Prompt

Crea una tarjeta de precios de 270px con radio 18px y sombra 0 6px 24px rgba(15,23,42,.1). El bloque superior tiene un degradado teal a 135deg de #0d9488 a #0f766e con texto blanco: nombre del plan 16px y un "$99" 36px extra-bold seguido de "per month". Debajo sobre blanco: una lista de características con filas de 14px y un icono de verificación teal #0d9488 a la izquierda. El CTA es un botón con contorno de borde 2px #0d9488 y texto teal que se rellena de teal con texto blanco en hover.