Design for AISelector de plan con radio
Selector de plan con radio: tarjeta en CSS. Copia las reglas, o el prompt que reproduce el resultado.
CSS
.card-071 {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
width: 340px;
font-family: system-ui,sans-serif;
color: #111827
}
.card-071 label {
position: relative;
display: flex;
flex-direction: column;
gap: 4px;
padding: 16px;
background: #fff;
border: 2px solid #e5e7eb;
border-radius: 14px;
cursor: pointer;
transition: border-color .15s,box-shadow .15s
}
.card-071 input {
position: absolute;
opacity: 0;
width: 0;
height: 0
}
.card-071 label::after {
content: "";
position: absolute;
right: 14px;
top: 14px;
width: 16px;
height: 16px;
border-radius: 50%;
border: 2px solid #d1d5db;
box-sizing: border-box;
transition: border-color .15s,border-width .15s
}
.card-071 b {
font-size: 15px
}
.card-071 span {
font-size: 13px;
color: #6b7280
}
.card-071 i {
align-self: flex-start;
margin-top: 4px;
padding: 2px 8px;
border-radius: 999px;
background: #dcfce7;
color: #15803d;
font-style: normal;
font-size: 11px;
font-weight: 700
}
.card-071 label:hover {
border-color: #bfdbfe
}
.card-071 label:has(input:checked) {
border-color: #2563eb;
box-shadow: 0 0 0 4px rgba(37,99,235,.12)
}
.card-071 label:has(input:checked)::after {
border-color: #2563eb;
border-width: 5px
}
.card-071 label:has(input:focus-visible) {
outline: 2px solid #2563eb;
outline-offset: 2px
}
HTML
<div class="card-071">
<label><input type="radio" name="card-071" checked><b>Monthly</b><span>$12 / mo</span></label>
<label><input type="radio" name="card-071"><b>Yearly</b><span>$96 / yr</span><i>Save 33%</i></label>
</div>Prompt
Construye un selector de plan a dos columnas (340px, gap 12px) donde cada opción es un label que envuelve un radio oculto: blanca, borde 2px #e5e7eb, radio 14px, padding 16px, un nombre de plan 15px bold y un precio 13px #6b7280, con un círculo de radio falso (16px, anillo 2px #d1d5db) en la esquina superior derecha dibujado con un pseudoelemento. La opción "Yearly" lleva una píldora verde "Save 33%" (#dcfce7 / #15803d). Usando label:has(input:checked), la tarjeta seleccionada recibe un borde azul #2563eb, una sombra de anillo de focus azul translúcido de 4px, y su círculo de radio se convierte en un anillo azul grueso de 5px. El hover tiñe el borde de #bfdbfe.