About this snippet

Two bubble styles, one for messages you sent and one for messages you received, stacked in a scrolling column.

The layout is flexbox. Each message sets its own align-self, and that is what pushes sent messages to the right and received ones to the left. The tail comes from squaring off a single corner instead of adding a pseudo-element triangle, so nothing needs repositioning when text wraps to a second line.

Colors and the 400px container width sit at the top of the CSS. Bubbles cap at 80% of the container, so widening it keeps long messages readable rather than letting them run edge to edge.

Size
1.3 KB
Uses
HTML, CSS
Loads
Nothing external
Views
614

Collections

Related snippets

<div class="chat-wrapper">
  <div class="message received">
    <div class="bubble">Hello! How can I help you today?</div>
    <span class="time">10:00 AM</span>
  </div>
  <div class="message sent">
    <div class="bubble">I have a question about my order.</div>
    <span class="time">10:02 AM</span>
  </div>
  <div class="message received">
    <div class="bubble">Sure, please provide your order ID.</div>
    <span class="time">10:03 AM</span>
  </div>
</div>
.chat-wrapper {
  font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  display: flex;
  flex-direction: column;
  gap: 15px;
  max-width: 400px;
  padding: 20px;
  background: #f9fafb;
  border-radius: 16px;
}
.message {
  display: flex;
  flex-direction: column;
  max-width: 80%;
}
.message.received {
  align-self: flex-start;
}
.message.sent {
  align-self: flex-end;
  align-items: flex-end;
}
.bubble {
  padding: 12px 16px;
  border-radius: 12px;
  font-size: 0.95rem;
  line-height: 1.4;
  position: relative;
}
.received .bubble {
  background: #e5e7eb;
  color: #1f2937;
  border-bottom-left-radius: 2px;
}
.sent .bubble {
  background: #3b82f6;
  color: white;
  border-bottom-right-radius: 2px;
}
.time {
  font-size: 0.7rem;
  color: #9ca3af;
  margin-top: 4px;
}

      

          


    

    
  

  















  
Esc

  
  
↑↓ moveEnter select




  
Start from a template

  

    

    
Open an .html file, or HTML, CSS, JS, Markdown, Less or TypeScript files. You can also drop them here. Styles and scripts go into their panes.

  




  
Share

  




  
Source

  




  
Keyboard shortcuts

  




  

    
Save