Design for AIAvatar centrado
Avatar centrado: tarjeta en CSS. Copia las reglas, o el prompt que reproduce el resultado.
MK
Mara Klein
Product designer, Berlin
CSS
.card-010 {
width: 240px;
padding: 28px 20px 24px;
text-align: center;
background: #fff;
border: 1px solid #e5e7eb;
border-radius: 18px;
font-family: system-ui,sans-serif;
color: #111827
}
.card-010__avatar {
width: 72px;
height: 72px;
margin: 0 auto 14px;
display: grid;
place-items: center;
border-radius: 50%;
background: linear-gradient(135deg,#fbcfe8,#a855f7);
color: #fff;
font-weight: 700;
font-size: 22px;
box-shadow: 0 0 0 4px #fff,0 0 0 6px #e9d5ff
}
.card-010 h3 {
margin: 0;
font-size: 17px
}
.card-010 p {
margin: 4px 0 16px;
font-size: 13px;
color: #6b7280
}
.card-010 button {
padding: 8px 22px;
border: 1px solid #111827;
border-radius: 999px;
background: #111827;
color: #fff;
font-size: 13px;
font-weight: 600;
cursor: pointer;
transition: background .15s,color .15s
}
.card-010 button:hover {
background: #fff;
color: #111827
}
.card-010 :is(a,button,input,select,textarea):focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
HTML
<article class="card-010">
<div class="card-010__avatar">MK</div>
<h3>Mara Klein</h3>
<p>Product designer, Berlin</p>
<button>Follow</button>
</article>Prompt
Construye una tarjeta de perfil centrada de 240px: blanca, borde 1px #e5e7eb, radio 18px, padding superior 28px. Un avatar circular de 72px con las iniciales "MK" en blanco 22px bold sobre un degradado a 135deg de #fbcfe8 a #a855f7, rodeado por un hueco blanco de 4px y un anillo 2px #e9d5ff vía box-shadow. Debajo: nombre 17px #111827, rol 13px #6b7280, y un botón píldora negro "Follow" (#111827) que se invierte a blanco con texto negro en hover.