33 lines
2.1 KiB
HTML
33 lines
2.1 KiB
HTML
<div class="flex w-full flex-col gap-4">
|
|
<!-- Recieved -->
|
|
<div class="flex items-end gap-2">
|
|
<img class="size-8 rounded-full object-cover" src="https://penguinui.s3.amazonaws.com/component-assets/avatar-8.webp" alt="avatar" />
|
|
<div class="mr-auto flex max-w-[70%] flex-col gap-2 rounded-r-radius rounded-tl-radius bg-surface-alt p-4 text-on-surface md:max-w-[60%] dark:bg-surface-dark-alt dark:text-on-surface-dark">
|
|
<span class="font-semibold text-on-surface-strong dark:text-on-surface-dark-strong">Penguin UI</span>
|
|
<div class="text-sm">
|
|
Hi there! How can I assist you today?
|
|
</div>
|
|
<span class="ml-auto text-xs">11:32 AM</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Sent -->
|
|
<div class="flex items-end gap-2">
|
|
<div class="ml-auto flex max-w-[70%] flex-col gap-2 rounded-l-radius rounded-tr-radius bg-primary p-4 text-sm text-on-primary md:max-w-[60%] dark:bg-primary-dark dark:text-on-primary-dark">
|
|
I accidentally deleted some important files. Can they be recovered?
|
|
<span class="ml-auto text-xs">11:34 AM</span>
|
|
</div>
|
|
<span class="flex size-8 items-center justify-center overflow-hidden rounded-full border border-outline bg-surface-alt text-sm font-bold tracking-wider text-on-surface dark:border-outline-dark dark:bg-surface-dark-alt dark:text-on-surface-dark">JS</span>
|
|
</div>
|
|
|
|
<!-- Recieved -->
|
|
<div class="flex items-end gap-2">
|
|
<img class="size-8 rounded-full object-cover" src="https://penguinui.s3.amazonaws.com/component-assets/avatar-8.webp" alt="avatar" />
|
|
<div class="flex gap-1">
|
|
<span class="size-1.5 rounded-full bg-on-surface motion-safe:animate-[bounce_1s_ease-in-out_infinite] dark:bg-on-surface-dark"></span>
|
|
<span class="size-1.5 rounded-full bg-on-surface motion-safe:animate-[bounce_0.5s_ease-in-out_infinite] dark:bg-on-surface-dark"></span>
|
|
<span class="size-1.5 rounded-full bg-on-surface motion-safe:animate-[bounce_1s_ease-in-out_infinite] dark:bg-on-surface-dark"></span>
|
|
</div>
|
|
</div>
|
|
</div>
|