Design for AISeletor de plano com radio
Seletor de plano com radio: um card em CSS. Copie as regras, ou o prompt que o reconstrói.
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
Construa um seletor de plano em duas colunas (340px, gap de 12px) em que cada opção é um label envolvendo um radio oculto: branco, borda de 2px #e5e7eb, raio de 14px, padding de 16px, nome do plano 15px bold e preço 13px #6b7280, com um círculo de radio falso (16px, anel de 2px #d1d5db) no canto superior direito desenhado com um pseudo-elemento. A opção "Yearly" leva uma pílula verde "Save 33%" (#dcfce7 / #15803d). Usando label:has(input:checked), o card selecionado ganha borda azul #2563eb, uma sombra de anel de focus azul translúcido de 4px, e seu círculo de radio vira um anel azul grosso de 5px. O hover tinge a borda de #bfdbfe.