Designsystem
Tema

Chat Bubble

Snakkebobler brukes for å vise en linje med samtale, inkludert bilde, forfatter, tid osv.
Tailwind CSS chat bubble component
Obi-Wan Kenobi
You were the Chosen One!
Delivered
Tailwind CSS chat bubble component
Anakin
I hate you!
Seen at 12:46
<div class="chat chat-start">
  <div class="chat-image avatar">
    <div class="w-10 rounded-full">
      <img
        alt="Tailwind CSS chat bubble component"
        src="https://backends.it.ntnu.no/user-profile-service/rest/files/804c3d45-3fe7-369a-bda7-39f0ccbb0e75"
      />
    </div>
  </div>
  <div class="chat-header">
    Obi-Wan Kenobi
    <time class="text-xs opacity-50">12:45</time>
  </div>
  <div class="chat-bubble">You were the Chosen One!</div>
  <div class="chat-footer opacity-50">Delivered</div>
</div>
<div class="chat chat-end">
  <div class="chat-image avatar">
    <div class="w-10 rounded-full">
      <img
        alt="Tailwind CSS chat bubble component"
        src="https://backends.it.ntnu.no/user-profile-service/rest/files/cba76f3a-91f1-354c-8a5b-70f0f1a2529c"
      />
    </div>
  </div>
  <div class="chat-header">
    Anakin
    <time class="text-xs opacity-50">12:46</time>
  </div>
  <div class="chat-bubble">I hate you!</div>
  <div class="chat-footer opacity-50">Seen at 12:46</div>
</div>