Registro de cambios
Registro de cambios: tarjeta en CSS. Copia las reglas, o el prompt que reproduce el resultado.
Subgrid cards and :has() states
- NewSubgrid-aligned card rows
- FixFlip card focus ring on Safari
- ImprovedPrompt wording for gradients
CSS
.card-095 {
width: 340px;
padding: 18px 20px;
background: #fff;
border: 1px solid #e5e7eb;
border-left: 3px solid #6366f1;
border-radius: 12px;
font-family: system-ui,sans-serif;
color: #111827
}
.card-095 header {
display: flex;
justify-content: space-between;
align-items: center
}
.card-095__ver {
padding: 3px 9px;
border-radius: 6px;
background: #eef2ff;
color: #4338ca;
font-family: ui-monospace,monospace;
font-size: 12px;
font-weight: 700
}
.card-095 time {
font-size: 12px;
color: #9ca3af
}
.card-095 h3 {
margin: 10px 0 10px;
font-size: 16px
}
.card-095 ul {
margin: 0;
padding: 0;
list-style: none;
font-size: 13px
}
.card-095 li {
display: flex;
align-items: center;
gap: 8px;
padding: 5px 0
}
.card-095 li i {
flex: none;
min-width: 36px;
text-align: center;
padding: 2px 6px;
border-radius: 4px;
font-style: normal;
font-size: 10px;
font-weight: 700;
text-transform: uppercase
}
.card-095__new {
background: #dcfce7;
color: #15803d
}
.card-095__fix {
background: #fee2e2;
color: #b91c1c
}
.card-095__imp {
background: #dbeafe;
color: #1d4ed8
}
.card-095:hover {
border-left-color: #4338ca
}
HTML
<article class="card-095">
<header><span class="card-095__ver">v2.3.0</span><time>Sep 9, 2026</time></header>
<h3>Subgrid cards and :has() states</h3>
<ul>
<li><i class="card-095__new">New</i>Subgrid-aligned card rows</li>
<li><i class="card-095__fix">Fix</i>Flip card focus ring on Safari</li>
<li><i class="card-095__imp">Improved</i>Prompt wording for gradients</li>
</ul>
</article>Prompt
Construye una tarjeta de registro de cambios de 340px: blanca, borde 1px #e5e7eb con un borde izquierdo índigo #6366f1 de 3px (más oscuro en hover), radio 12px. Cabecera: un chip de versión monospace "v2.3.0" sobre #eef2ff en #4338ca y una fecha 12px #9ca3af a la derecha. Título de la versión 16px, luego una lista de elementos 13px cada uno precedido por un chip de etiqueta diminuto en mayúsculas: verde "New" (#dcfce7/#15803d), rojo "Fix" (#fee2e2/#b91c1c), azul "Improved" (#dbeafe/#1d4ed8).