Divisor por niveles
Divisor por niveles: tarjeta en CSS. Copia las reglas, o el prompt que reproduce el resultado.
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.