Chat Bubble

Tailwind CSS and Alpine JS Chat Bubble

Chat bubbles are a great way to display messages in a conversational format. They can be used to indicate the sender of the message, the time it was sent, and the message itself.

Default Chat Bubble

A simple chat bubble with a message on one side and reply on the other side.

Penguin UI
Hi there! How can I assist you today?
I accidentally deleted some important files. Can they be recovered?
Penguin UI
I'm sorry to hear that. Let me guide you through the process to resolve it. Could you please provide your username?
HTML 
<div class="">
    <!-- Recieved -->
    <div class="">
        <span class="">Penguin UI</span>
        <div class="">
            Hi there! How can I assist you today?
        </div>
    </div>

    <!-- Sent -->
    <div class="">
        I accidentally deleted some important files. Can they be recovered?
    </div>

    <!-- Recieved -->
    <div class="">
        <span class="">Penguin UI</span>
        <div class="">
            I'm sorry to hear that. Let me guide you through the process to resolve it. Could you please provide your username?
        </div>
    </div>
</div>

Chat bubble with timestamp

A chat bubble with a timestamp.

Penguin UI
Hi there! How can I assist you today?
11:32 AM
I accidentally deleted some important files. Can they be recovered?
11:34 AM
Penguin UI
I'm sorry to hear that. Let me guide you through the process to resolve it. Could you please provide your username?
11:35 AM
HTML 
<div class="">
    <!-- Recieved -->
    <div class="">
        <span class="">Penguin UI</span>
        <div class="">
            Hi there! How can I assist you today?
        </div>
        <span class="">11:32 AM</span>
    </div>

    <!-- Sent -->
    <div class="">
        I accidentally deleted some important files. Can they be recovered?
        <span class="">11:34 AM</span>
    </div>

    <!-- Recieved -->
    <div class="">
        <span class="">Penguin UI</span>
        <div class="">
            I'm sorry to hear that. Let me guide you through the process to resolve it. Could you please provide your username?
        </div>
        <span class="">11:35 AM</span>
    </div>
</div>

Chat bubble with avatar

A chat bubble with an avatar.

avatar
Penguin UI
Hi there! How can I assist you today?
11:32 AM
I accidentally deleted some important files. Can they be recovered? 11:34 AM
JS
avatar
Penguin UI
I'm sorry to hear that. Let me guide you through the process to resolve it. Could you please provide your username?
11:35 AM
HTML 
<div class="">
    <!-- Recieved -->
    <div class="">
        <img class="" src="https://penguinui.s3.amazonaws.com/component-assets/avatar-8.webp" alt="avatar" />
        <div class="">
            <span class="">Penguin UI</span>
            <div class="">
                Hi there! How can I assist you today?
            </div>
            <span class="">11:32 AM</span>
        </div>
    </div>

    <!-- Sent -->
    <div class="">
        <div class="">
            I accidentally deleted some important files. Can they be recovered?
            <span class="">11:34 AM</span>
        </div>
        <span class="">JS</span>
    </div>

    <!-- Recieved -->
    <div class="">
        <img class="" src="https://penguinui.s3.amazonaws.com/component-assets/avatar-8.webp" alt="avatar" />
        <div class="">
            <span class="">Penguin UI</span>
            <div class="">
                I'm sorry to hear that. Let me guide you through the process to resolve it. Could you please provide your username?
            </div>
            <span class="">11:32 AM</span>
        </div>
    </div>
</div>

Typing indicator

A chat bubble with a typing indicator.

avatar
Penguin UI
Hi there! How can I assist you today?
11:32 AM
I accidentally deleted some important files. Can they be recovered? 11:34 AM
JS
avatar
HTML 
<div class="">
    <!-- Recieved -->
    <div class="">
        <img class="" src="https://penguinui.s3.amazonaws.com/component-assets/avatar-8.webp" alt="avatar" />
        <div class="">
            <span class="">Penguin UI</span>
            <div class="">
                Hi there! How can I assist you today?
            </div>
            <span class="">11:32 AM</span>
        </div>
    </div>

    <!-- Sent -->
    <div class="">
        <div class="">
            I accidentally deleted some important files. Can they be recovered?
            <span class="">11:34 AM</span>
        </div>
        <span class="">JS</span>
    </div>

    <!-- Recieved -->
    <div class="">
        <img class="" src="https://penguinui.s3.amazonaws.com/component-assets/avatar-8.webp" alt="avatar" />
        <div class="">
            <span class=""></span>
            <span class=""></span>
            <span class=""></span>
        </div>
    </div>
</div>