# Publicación social (C 077)

Categoría: Tarjetas  
Etiquetas: social, post, feed, avatar, actions, light  
Página: https://designforai.dev/es/snippet/card-077

## Prompt

Construye una tarjeta de publicación social de 380px: blanca, borde 1px #e5e7eb, radio 14px, padding 16px 18px, fondo #fafafa en hover. Cabecera: avatar circular de 40px (degradado de #fca5a5 a #ef4444), nombre 14px bold, usuario y hora 12px #6b7280. Texto de la publicación 15px con line-height 1.5. Pie: tres acciones de texto (contadores de respuesta, repost, me gusta) en 13px #6b7280 separadas 22px, que pasan a rojo #ef4444 en hover.

## HTML

```html
<article class="card-077">
  <header><i></i><div><b>Maya Lindqvist</b><span>@mayal · 2h</span></div></header>
  <p>Finally replaced our media queries with container queries. Removed 340 lines. Nothing broke. Still suspicious.</p>
  <footer><a href="#">18 replies</a><a href="#">42 reposts</a><a href="#">310 likes</a></footer>
</article>
```

## CSS

```css
.card-077 {
  width: 380px;
  padding: 16px 18px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  font-family: system-ui,sans-serif;
  color: #111827;
  transition: background .15s
}
.card-077:hover {
  background: #fafafa
}
.card-077 header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px
}
.card-077 header i {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg,#fca5a5,#ef4444)
}
.card-077 header div {
  display: flex;
  flex-direction: column
}
.card-077 b {
  font-size: 14px
}
.card-077 header span {
  font-size: 12px;
  color: #6b7280
}
.card-077 p {
  margin: 0 0 12px;
  font-size: 15px;
  line-height: 1.5
}
.card-077 footer {
  display: flex;
  gap: 22px
}
.card-077 footer a {
  font-size: 13px;
  color: #6b7280;
  text-decoration: none
}
.card-077 footer a:hover {
  color: #ef4444
}
.card-077 :is(a,button,input,select,textarea):focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
```