# Burbujas de chat (C 079)

Categoría: Tarjetas  
Etiquetas: chat, messages, bubbles, dark, conversation  
Página: https://designforai.dev/es/snippet/card-079

## Prompt

Construye una tarjeta de chat de 320px sobre #0f172a con radio 18px y padding 16px, apilando burbujas de mensaje con gap 8px. Las burbujas entrantes se alinean a la izquierda sobre #1e293b con texto #e2e8f0 y radio 16px 16px 16px 4px (esquina inferior izquierda pequeña); las salientes se alinean a la derecha sobre azul #3b82f6 con texto blanco y radio 16px 16px 4px 16px. Las burbujas tienen un ancho máximo del 78%, texto 14px, padding 9px 13px, y se aclaran ligeramente en hover.

## HTML

```html
<div class="card-079">
  <p class="card-079__them">Can the card flip without JavaScript?</p>
  <p class="card-079__me">Yes. A checkbox and :checked does it.</p>
  <p class="card-079__them">Keyboard accessible?</p>
  <p class="card-079__me">If the input stays focusable, yes.</p>
</div>
```

## CSS

```css
.card-079 {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 320px;
  padding: 16px;
  background: #0f172a;
  border-radius: 18px;
  font-family: system-ui,sans-serif
}
.card-079 p {
  margin: 0;
  max-width: 78%;
  padding: 9px 13px;
  font-size: 14px;
  line-height: 1.4
}
.card-079__them {
  align-self: flex-start;
  background: #1e293b;
  color: #e2e8f0;
  border-radius: 16px 16px 16px 4px
}
.card-079__me {
  align-self: flex-end;
  background: #3b82f6;
  color: #fff;
  border-radius: 16px 16px 4px 16px
}
.card-079 p:hover {
  filter: brightness(1.1)
}
```