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.
Classic vs Modern Code Style
The difference between the two versions is how they're written. The classic version uses older-style classes like 'text-red-500' for styling, while the modern version, uses CSS variables and semantic names like 'text-primary' for theming. It's important to note that 'Classic' doesn't mean an older version—they both use Tailwind V4. Tell me more.
<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>
<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>
@theme {
/* light theme */
--color-surface: var(--color-);
--color-surface-alt: var(--color-);
--color-on-surface: var(--color-);
--color-on-surface-strong: var(--color-);
--color-primary: var(--color-);
--color-on-primary: var(--color-);
--color-secondary: var(--color-);
--color-on-secondary: var(--color-);
--color-outline: ;
--color-outline-strong: var(--color-);
/* dark theme */
--color-surface-dark: var(--color-);
--color-surface-dark-alt: var(--color-);
--color-on-surface-dark: var(--color-);
--color-on-surface-dark-strong: var(--color-);
--color-primary-dark: var(--color-);
--color-on-primary-dark: var(--color-);
--color-secondary-dark: var(--color-);
--color-on-secondary-dark: var(--color-);
--color-outline-dark: var(--color-);
--color-outline-dark-strong: var(--color-);
/* shared colors */
--color-info: var(--color-);
--color-on-info: var(--color-);
--color-success: var(--color-);
--color-on-success: var(--color-);
--color-warning: var(--color-);
--color-on-warning: var(--color-);
--color-danger: var(--color-);
--color-on-danger: var(--color-);
/* border radius */
--radius-radius: var(--radius);
}
Chat bubble with timestamp
A chat bubble with a timestamp.
Classic vs Modern Code Style
The difference between the two versions is how they're written. The classic version uses older-style classes like 'text-red-500' for styling, while the modern version, uses CSS variables and semantic names like 'text-primary' for theming. It's important to note that 'Classic' doesn't mean an older version—they both use Tailwind V4. Tell me more.
<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>
<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>
@theme {
/* light theme */
--color-surface: var(--color-);
--color-surface-alt: var(--color-);
--color-on-surface: var(--color-);
--color-on-surface-strong: var(--color-);
--color-primary: var(--color-);
--color-on-primary: var(--color-);
--color-secondary: var(--color-);
--color-on-secondary: var(--color-);
--color-outline: ;
--color-outline-strong: var(--color-);
/* dark theme */
--color-surface-dark: var(--color-);
--color-surface-dark-alt: var(--color-);
--color-on-surface-dark: var(--color-);
--color-on-surface-dark-strong: var(--color-);
--color-primary-dark: var(--color-);
--color-on-primary-dark: var(--color-);
--color-secondary-dark: var(--color-);
--color-on-secondary-dark: var(--color-);
--color-outline-dark: var(--color-);
--color-outline-dark-strong: var(--color-);
/* shared colors */
--color-info: var(--color-);
--color-on-info: var(--color-);
--color-success: var(--color-);
--color-on-success: var(--color-);
--color-warning: var(--color-);
--color-on-warning: var(--color-);
--color-danger: var(--color-);
--color-on-danger: var(--color-);
/* border radius */
--radius-radius: var(--radius);
}
Chat bubble with avatar
A chat bubble with an avatar.
Classic vs Modern Code Style
The difference between the two versions is how they're written. The classic version uses older-style classes like 'text-red-500' for styling, while the modern version, uses CSS variables and semantic names like 'text-primary' for theming. It's important to note that 'Classic' doesn't mean an older version—they both use Tailwind V4. Tell me more.
<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>
<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>
@theme {
/* light theme */
--color-surface: var(--color-);
--color-surface-alt: var(--color-);
--color-on-surface: var(--color-);
--color-on-surface-strong: var(--color-);
--color-primary: var(--color-);
--color-on-primary: var(--color-);
--color-secondary: var(--color-);
--color-on-secondary: var(--color-);
--color-outline: ;
--color-outline-strong: var(--color-);
/* dark theme */
--color-surface-dark: var(--color-);
--color-surface-dark-alt: var(--color-);
--color-on-surface-dark: var(--color-);
--color-on-surface-dark-strong: var(--color-);
--color-primary-dark: var(--color-);
--color-on-primary-dark: var(--color-);
--color-secondary-dark: var(--color-);
--color-on-secondary-dark: var(--color-);
--color-outline-dark: var(--color-);
--color-outline-dark-strong: var(--color-);
/* shared colors */
--color-info: var(--color-);
--color-on-info: var(--color-);
--color-success: var(--color-);
--color-on-success: var(--color-);
--color-warning: var(--color-);
--color-on-warning: var(--color-);
--color-danger: var(--color-);
--color-on-danger: var(--color-);
/* border radius */
--radius-radius: var(--radius);
}
Typing indicator
A chat bubble with a typing indicator.
Classic vs Modern Code Style
The difference between the two versions is how they're written. The classic version uses older-style classes like 'text-red-500' for styling, while the modern version, uses CSS variables and semantic names like 'text-primary' for theming. It's important to note that 'Classic' doesn't mean an older version—they both use Tailwind V4. Tell me more.
<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>
<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>
@theme {
/* light theme */
--color-surface: var(--color-);
--color-surface-alt: var(--color-);
--color-on-surface: var(--color-);
--color-on-surface-strong: var(--color-);
--color-primary: var(--color-);
--color-on-primary: var(--color-);
--color-secondary: var(--color-);
--color-on-secondary: var(--color-);
--color-outline: ;
--color-outline-strong: var(--color-);
/* dark theme */
--color-surface-dark: var(--color-);
--color-surface-dark-alt: var(--color-);
--color-on-surface-dark: var(--color-);
--color-on-surface-dark-strong: var(--color-);
--color-primary-dark: var(--color-);
--color-on-primary-dark: var(--color-);
--color-secondary-dark: var(--color-);
--color-on-secondary-dark: var(--color-);
--color-outline-dark: var(--color-);
--color-outline-dark-strong: var(--color-);
/* shared colors */
--color-info: var(--color-);
--color-on-info: var(--color-);
--color-success: var(--color-);
--color-on-success: var(--color-);
--color-warning: var(--color-);
--color-on-warning: var(--color-);
--color-danger: var(--color-);
--color-on-danger: var(--color-);
/* border radius */
--radius-radius: var(--radius);
}