Components

Tailwind CSS Chat Bubble

A chat bubble in Tailwind CSS is a UI component used to display text messages or other content in a conversation-style interface, which looks like the appearance of speech bubbles in a chat application. This component allows users to share quick information, images, files, documents, and much more.

The chat bubble element holds the message content, which includes text messages, images, emojis, or any other type of content related to the conversation.

Requires Pagedone CSS

This component requires the use of our Pagedone UI as a package, else you can skip this message if you are already using Pagedone UI as a package.

Default Chat bubble

Messaging allow users to share quick information. Use below example of chat screen with sender and receiver information and with profile picture.

Shanay image
Shanay cruz
Guts, I need a review of work. Are you ready?
05:14 PM
Let me know
05:14 PM
You

Yes, let’s see, send your work here

05:14 PM

Anyone on for lunch today

You

Hailey image 
  <div class="w-full">
   <div class="grid pb-11">
   <div class="flex gap-2.5 mb-4">
     <img src="https://pagedone.io/asset/uploads/1710412177.png" alt="Shanay image" class="w-10 h-11">
     <div class="grid">
       <h5 class="text-gray-900 text-sm font-semibold leading-snug pb-1">Shanay cruz</h5>
       <div class="w-max grid">
         <div class="px-3.5 py-2 bg-gray-100 rounded justify-start  items-center gap-3 inline-flex">
           <h5 class="text-gray-900 text-sm font-normal leading-snug">Guts, I need a review of work. Are you ready?</h5>
         </div>
         <div class="justify-end items-center inline-flex mb-2.5">
           <h6 class="text-gray-500 text-xs font-normal leading-4 py-1">05:14 PM</h6>
         </div>
       </div>
       <div class="w-max grid">
         <div class="px-3.5 py-2 bg-gray-100 rounded justify-start items-center gap-3 inline-flex">
           <h5 class="text-gray-900 text-sm font-normal leading-snug">Let me know</h5>
         </div>
         <div class="justify-end items-center inline-flex mb-2.5">
           <h6 class="text-gray-500 text-xs font-normal leading-4 py-1">05:14 PM</h6>
         </div>
       </div>
     </div>
   </div>
   </div>
   <div class="flex gap-2.5 justify-end pb-40">
   <div class="">
     <div class="grid mb-2">
       <h5 class="text-right text-gray-900 text-sm font-semibold leading-snug pb-1">You</h5>
       <div class="px-3 py-2 bg-indigo-600 rounded">
         <h2 class="text-white text-sm font-normal leading-snug">Yes, let’s see, send your work here</h2>
       </div>
       <div class="justify-start items-center inline-flex">
         <h3 class="text-gray-500 text-xs font-normal leading-4 py-1">05:14 PM</h3>
       </div>
     </div>
     <div class="justify-center">
       <div class="grid w-fit ml-auto">
         <div class="px-3 py-2 bg-indigo-600 rounded ">
           <h2 class="text-white text-sm font-normal leading-snug">Anyone on for lunch today</h2>
         </div>
         <div class="justify-start items-center inline-flex">
           <h3 class="text-gray-500 text-xs font-normal leading-4 py-1">You</h3>
         </div>
       </div>
     </div>
   </div>
   <img src="https://pagedone.io/asset/uploads/1704091591.png" alt="Hailey image" class="w-10 h-11">
   </div>
   <div class="w-full pl-3 pr-1 py-1 rounded-3xl border border-gray-200 items-center gap-2 inline-flex justify-between">
   <div class="flex items-center gap-2">
     <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 22 22" fill="none">
       <g id="User Circle">
         <path id="icon" d="M6.05 17.6C6.05 15.3218 8.26619 13.475 11 13.475C13.7338 13.475 15.95 15.3218 15.95 17.6M13.475 8.525C13.475 9.89191 12.3669 11 11 11C9.6331 11 8.525 9.89191 8.525 8.525C8.525 7.1581 9.6331 6.05 11 6.05C12.3669 6.05 13.475 7.1581 13.475 8.525ZM19.25 11C19.25 15.5563 15.5563 19.25 11 19.25C6.44365 19.25 2.75 15.5563 2.75 11C2.75 6.44365 6.44365 2.75 11 2.75C15.5563 2.75 19.25 6.44365 19.25 11Z" stroke="#4F46E5" stroke-width="1.6" />
       </g>
     </svg>
     <input class="grow shrink basis-0 text-black text-xs font-medium leading-4 focus:outline-none" placeholder="Type here...">
   </div>
   <div class="flex items-center gap-2">
     <svg class="cursor-pointer" xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 22 22" fill="none">
       <g id="Attach 01">
         <g id="Vector">
           <path d="M14.9332 7.79175L8.77551 14.323C8.23854 14.8925 7.36794 14.8926 6.83097 14.323C6.294 13.7535 6.294 12.83 6.83097 12.2605L12.9887 5.72925M12.3423 6.41676L13.6387 5.04176C14.7126 3.90267 16.4538 3.90267 17.5277 5.04176C18.6017 6.18085 18.6017 8.02767 17.5277 9.16676L16.2314 10.5418M16.8778 9.85425L10.72 16.3855C9.10912 18.0941 6.49732 18.0941 4.88641 16.3855C3.27549 14.6769 3.27549 11.9066 4.88641 10.198L11.0441 3.66675" stroke="#9CA3AF" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" />
           <path d="M14.9332 7.79175L8.77551 14.323C8.23854 14.8925 7.36794 14.8926 6.83097 14.323C6.294 13.7535 6.294 12.83 6.83097 12.2605L12.9887 5.72925M12.3423 6.41676L13.6387 5.04176C14.7126 3.90267 16.4538 3.90267 17.5277 5.04176C18.6017 6.18085 18.6017 8.02767 17.5277 9.16676L16.2314 10.5418M16.8778 9.85425L10.72 16.3855C9.10912 18.0941 6.49732 18.0941 4.88641 16.3855C3.27549 14.6769 3.27549 11.9066 4.88641 10.198L11.0441 3.66675" stroke="black" stroke-opacity="0.2" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" />
           <path d="M14.9332 7.79175L8.77551 14.323C8.23854 14.8925 7.36794 14.8926 6.83097 14.323C6.294 13.7535 6.294 12.83 6.83097 12.2605L12.9887 5.72925M12.3423 6.41676L13.6387 5.04176C14.7126 3.90267 16.4538 3.90267 17.5277 5.04176C18.6017 6.18085 18.6017 8.02767 17.5277 9.16676L16.2314 10.5418M16.8778 9.85425L10.72 16.3855C9.10912 18.0941 6.49732 18.0941 4.88641 16.3855C3.27549 14.6769 3.27549 11.9066 4.88641 10.198L11.0441 3.66675" stroke="black" stroke-opacity="0.2" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" />
         </g>
       </g>
     </svg>
     <button class="items-center flex px-3 py-2 bg-indigo-600 rounded-full shadow ">
       <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
         <g id="Send 01">
           <path id="icon" d="M9.04071 6.959L6.54227 9.45744M6.89902 10.0724L7.03391 10.3054C8.31034 12.5102 8.94855 13.6125 9.80584 13.5252C10.6631 13.4379 11.0659 12.2295 11.8715 9.81261L13.0272 6.34566C13.7631 4.13794 14.1311 3.03408 13.5484 2.45139C12.9657 1.8687 11.8618 2.23666 9.65409 2.97257L6.18714 4.12822C3.77029 4.93383 2.56187 5.33664 2.47454 6.19392C2.38721 7.0512 3.48957 7.68941 5.69431 8.96584L5.92731 9.10074C6.23326 9.27786 6.38623 9.36643 6.50978 9.48998C6.63333 9.61352 6.72189 9.7665 6.89902 10.0724Z" stroke="white" stroke-width="1.6" stroke-linecap="round" />
         </g>
       </svg>
       <h3 class="text-white text-xs font-semibold leading-4 px-2">Send</h3>
     </button>
   </div>
   </div>
   </div>

chat bubble with rounded

In this chat bubble example in Tailwind CSS shows one side chat information with profile picture with rounded chat bubble style.

Shanay image
Shanay cruz
I’m down! Any ideas??
05:14 PM
Let me know
05:14 PM
 <div class="w-full">
   <div class="grid pb-11">
   <div class="flex gap-2.5 mb-4 mx-auto">
    <img src="https://pagedone.io/asset/uploads/1710412177.png" alt="Shanay image" class="w-10 h-11">
    <div class="grid">
      <h5 class="text-gray-900 text-sm font-semibold leading-snug pb-1">Shanay cruz</h5>
      <div class="w-max grid">
        <div class="px-3.5 py-2 bg-gray-100 rounded-3xl rounded-tl-none justify-start  items-center gap-3 inline-flex">
          <h5 class="text-gray-900 text-sm font-normal leading-snug">I’m down! Any ideas??</h5>
        </div>
        <div class="justify-end items-center inline-flex mb-2.5">
          <h6 class="text-gray-500 text-xs font-normal leading-4 py-1">05:14 PM</h6>
        </div>
      </div>
      <div class="w-max grid">
        <div class="px-3.5 py-2 bg-gray-100 rounded-3xl rounded-tl-none justify-start items-center gap-3 inline-flex">
          <h5 class="text-gray-900 text-sm font-normal leading-snug">Let me know</h5>
        </div>
        <div class="justify-end items-center inline-flex mb-2.5">
          <h6 class="text-gray-500 text-xs font-normal leading-4 py-1">05:14 PM</h6>
        </div>
      </div>
    </div>
   </div>
   </div>
   </div>

chat bubble for audio

Below example of chat bubble can be used to add audio or voice messages in conversation.

Shanay image
Shanay cruz

00:30

05:14 PM

00:30

05:14 PM
Shanay image
Shanay cruz

00:30

05:14 PM

00:30

05:14 PM
<div class="w-full">
   <div class="grid pb-11">
   <div class="flex gap-2.5 mb-4 mx-auto">
   <img src="https://pagedone.io/asset/uploads/1710412177.png" alt="Shanay image" class="w-10 h-11">
   <div class="grid">
     <h5 class="text-gray-900 text-sm font-semibold leading-snug pb-1">Shanay cruz</h5>
     <div class="w-max grid">
       <div class="px-3.5 py-2 bg-gray-100 rounded items-center gap-3 flex justify-between input-range">
         <button class="w-5 h-5 rounded-full bg-indigo-600 flex items-center justify-center">
           <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
             <path d="M11.547 5.99711C13.3248 7.02351 14.2137 7.53671 14.2137 8.30651C14.2137 9.07631 13.3248 9.58951 11.547 10.6159L8 12.6638C6.22222 13.6902 5.33333 14.2034 4.66667 13.8185C4 13.4336 4 12.4072 4 10.3544L4 6.25864C4 4.20584 4 3.17944 4.66667 2.79454C5.33333 2.40964 6.22222 2.92284 8 3.94924L11.547 5.99711Z" fill="white" />
           </svg>
         </button>
         <input class="rounded-lg overflow-hidden appearance-none bg-gray-300 h-2 w-32" type="range" min="1" max="100" step="1" value="15" />
         <p class="text-xs font-normal text-gray-900">00:30</p>
       </div>
       <div class="justify-end items-center inline-flex mb-2.5">
         <h6 class="text-gray-500 text-xs font-normal leading-4 py-1">05:14 PM</h6>
       </div>
     </div>
     <div class="w-max grid pr-1">
       <div class="px-3.5 py-2 bg-gray-100 rounded justify-between items-center gap-3 flex input-range">
         <button class="w-5 h-5 rounded-full bg-indigo-600 flex items-center justify-center">
           <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
             <path d="M11.547 5.99711C13.3248 7.02351 14.2137 7.53671 14.2137 8.30651C14.2137 9.07631 13.3248 9.58951 11.547 10.6159L8 12.6638C6.22222 13.6902 5.33333 14.2034 4.66667 13.8185C4 13.4336 4 12.4072 4 10.3544L4 6.25864C4 4.20584 4 3.17944 4.66667 2.79454C5.33333 2.40964 6.22222 2.92284 8 3.94924L11.547 5.99711Z" fill="white" />
           </svg>
         </button>
         <input class="rounded-lg overflow-hidden appearance-none bg-gray-300 h-2 w-32" type="range" min="1" max="100" step="1" value="15" />
         <p class="text-xs font-normal text-gray-900">00:30</p>
       </div>
       <div class="justify-end items-center inline-flex mb-2.5">
         <h6 class="text-gray-500 text-xs font-normal leading-4 py-1">05:14 PM</h6>
       </div>
     </div>
   </div>
   </div>
   </div>
   <div class="grid pb-11">
   <div class="flex gap-2.5 mb-4 mx-auto">
   <img src="https://pagedone.io/asset/uploads/1710412177.png" alt="Shanay image" class="w-10 h-11">
   <div class="grid">
     <h5 class="text-gray-900 text-sm font-semibold leading-snug pb-1">Shanay cruz</h5>
     <div class="w-max grid">
       <div class="px-3.5 py-2 bg-gray-100 rounded-3xl rounded-tl-none items-center gap-3 flex justify-between input-range">
         <button class="w-5 h-5 rounded-full bg-indigo-600 flex items-center justify-center">
           <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
             <path d="M11.547 5.99711C13.3248 7.02351 14.2137 7.53671 14.2137 8.30651C14.2137 9.07631 13.3248 9.58951 11.547 10.6159L8 12.6638C6.22222 13.6902 5.33333 14.2034 4.66667 13.8185C4 13.4336 4 12.4072 4 10.3544L4 6.25864C4 4.20584 4 3.17944 4.66667 2.79454C5.33333 2.40964 6.22222 2.92284 8 3.94924L11.547 5.99711Z" fill="white" />
           </svg>
         </button>
         <input class="rounded-lg overflow-hidden appearance-none bg-gray-300 h-2 w-32" type="range" min="1" max="100" step="1" value="15" />
         <p class="text-xs font-normal text-gray-900">00:30</p>
       </div>
       <div class="justify-end items-center inline-flex mb-2.5">
         <h6 class="text-gray-500 text-xs font-normal leading-4 py-1">05:14 PM</h6>
       </div>
     </div>
     <div class="w-max grid pr-1">
       <div class="px-3.5 py-2 bg-gray-100 rounded-3xl rounded-tl-none justify-between items-center gap-3 flex input-range">
         <button class="w-5 h-5 rounded-full bg-indigo-600 flex items-center justify-center">
           <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
             <path d="M11.547 5.99711C13.3248 7.02351 14.2137 7.53671 14.2137 8.30651C14.2137 9.07631 13.3248 9.58951 11.547 10.6159L8 12.6638C6.22222 13.6902 5.33333 14.2034 4.66667 13.8185C4 13.4336 4 12.4072 4 10.3544L4 6.25864C4 4.20584 4 3.17944 4.66667 2.79454C5.33333 2.40964 6.22222 2.92284 8 3.94924L11.547 5.99711Z" fill="white" />
           </svg>
         </button>
         <input class="rounded-lg overflow-hidden appearance-none bg-gray-300 h-2 w-32" type="range" min="1" max="100" step="1" value="15" />
         <p class="text-xs font-normal text-gray-900">00:30</p>
       </div>
       <div class="justify-end items-center inline-flex mb-2.5">
         <h6 class="text-gray-500 text-xs font-normal leading-4 py-1">05:14 PM</h6>
       </div>
     </div>
   </div>
   </div>
   </div>
   </div>

chat bubble with poll

Following example can be used to add poll in conversation to know user's choice among multiple choices.

Shanay image
Shanay cruz
What do you want to eat?

8 votes | Vote to see results

05:14 PM
Shanay image
Shanay cruz
What do you want to eat?

8 votes | Vote to see results

05:14 PM
  <div class="w-full">
   <div class="grid pb-11">
   <div class="flex gap-2.5 mb-4 mx-auto">
     <img src="https://pagedone.io/asset/uploads/1710412177.png" alt="Shanay image" class="w-10 h-11">
     <div class="grid">
       <h5 class="text-gray-900 text-sm font-semibold leading-snug pb-1">Shanay cruz</h5>
       <div class="w-max grid">
         <div class="px-3.5 py-2 bg-gray-100 rounded justify-start  items-center gap-3">
           <h5 class="text-sm font-normal text-gray-900 mb-3">What do you want to eat?</h5>
           <div class="flex items-center bg-white p-2 rounded-md mb-1 w-52">
             <input id="radio1" type="radio" name="default-radio" class="hidden checked:bg-no-repeat checked:bg-center checked:border-indigo-500 checked:bg-indigo-100">
             <label for="radio1" class="flex items-center cursor-pointer text-gray-900 text-sm font-medium">
               <span class="border border-gray-300  rounded-full mr-2 w-4 h-4 "></span> Pizza </label>
           </div>
           <div class="flex items-center bg-white p-2 rounded-md mb-3 w-52">
             <input id="radio2" type="radio" name="default-radio" class="hidden checked:bg-no-repeat checked:bg-center checked:border-indigo-500 checked:bg-indigo-100">
             <label for="radio2" class="flex items-center cursor-pointer text-gray-900 text-sm font-medium">
               <span class="border border-gray-300  rounded-full mr-2 w-4 h-4 "></span> Burgers </label>
           </div>
           <p class="text-xs font-normal text-gray-900 text-right">8 votes | Vote to see results </p>
         </div>
         <div class="justify-end items-center inline-flex mb-2.5">
           <h6 class="text-gray-500 text-xs font-normal leading-4 py-1">05:14 PM</h6>
         </div>
       </div>
     </div>
   </div>
   </div>
   <div class="grid pb-11">
   <div class="flex gap-2.5 mb-4 mx-auto">
     <img src="https://pagedone.io/asset/uploads/1710412177.png" alt="Shanay image" class="w-10 h-11">
     <div class="grid">
       <h5 class="text-gray-900 text-sm font-semibold leading-snug pb-1">Shanay cruz</h5>
       <div class="w-max grid">
         <div class="px-3.5 py-2 bg-gray-100 rounded-3xl rounded-tl-none ">
           <h5 class="text-sm font-normal text-gray-900 mb-3">What do you want to eat?</h5>
           <div class="flex items-center bg-white p-2 rounded-md mb-1 w-52">
             <input id="radio3" type="radio" name="default-radio" class="hidden checked:bg-no-repeat checked:bg-center checked:border-indigo-500 checked:bg-indigo-100">
             <label for="radio3" class="flex items-center cursor-pointer text-gray-900 text-sm font-medium">
               <span class="border border-gray-300  rounded-full mr-2 w-4 h-4 "></span> Pizza </label>
           </div>
           <div class="flex items-center bg-white p-2 rounded-md mb-3 w-52">
             <input id="radio4" type="radio" name="default-radio" class="hidden checked:bg-no-repeat checked:bg-center checked:border-indigo-500 checked:bg-indigo-100">
             <label for="radio4" class="flex items-center cursor-pointer text-gray-900 text-sm font-medium">
               <span class="border border-gray-300  rounded-full mr-2 w-4 h-4 "></span> Burgers </label>
           </div>
           <p class="text-xs font-normal text-gray-900 text-right">8 votes | Vote to see results </p>
         </div>
         <div class="justify-end items-center inline-flex mb-2.5">
           <h6 class="text-gray-500 text-xs font-normal leading-4 py-1">05:14 PM</h6>
         </div>
       </div>
     </div>
   </div>
   </div>
   </div>

chat bubble with images

You can use below example to send one or multiple images to receiver in one to one conversation.

Shanay image
Shanay cruz
media images media images media images media images
05:14 PM
media images media images media images media images
05:14 PM
Shanay image
Shanay cruz
media images media images media images media images
05:14 PM
media images media images media images media images
05:14 PM
 <div class="w-full">
   <div class="grid grid-cols-2 pb-11">
   <div class="flex gap-2.5 mb-4 mx-auto">
    <img src="https://pagedone.io/asset/uploads/1710412177.png" alt="Shanay image" class="w-10 h-11">
    <div class="grid">
      <h5 class="text-gray-900 text-sm font-semibold leading-snug pb-1">Shanay cruz</h5>
      <div class="w-max grid">
        <div class="rounded p-2 bg-gray-100 grid grid-cols-2 gap-2">
          <img src="https://pagedone.io/asset/uploads/1710414510.png" alt="media images" class="rounded">
          <img src="https://pagedone.io/asset/uploads/1710414524.png" alt="media images" class="rounded">
          <img src="https://pagedone.io/asset/uploads/1710414524.png" alt="media images" class="rounded">
          <img src="https://pagedone.io/asset/uploads/1710414541.png" alt="media images" class="rounded">
        </div>
        <div class="justify-end items-center inline-flex mb-2.5">
          <h6 class="text-gray-500 text-xs font-normal leading-4 py-1">05:14 PM</h6>
        </div>
      </div>
      <div class="w-max grid">
        <div class="rounded p-2 bg-gray-100 grid grid-cols-2 gap-2">
          <img src="https://pagedone.io/asset/uploads/1710414510.png" alt="media images" class="rounded">
          <img src="https://pagedone.io/asset/uploads/1710414524.png" alt="media images" class="rounded">
          <img src="https://pagedone.io/asset/uploads/1710414524.png" alt="media images" class="rounded">
          <img src="https://pagedone.io/asset/uploads/1710414541.png" alt="media images" class="rounded">
        </div>
        <div class="justify-end items-center inline-flex mb-2.5">
          <h6 class="text-gray-500 text-xs font-normal leading-4 py-1">05:14 PM</h6>
        </div>
      </div>
    </div>
   </div>
   <div class="flex gap-2.5 mb-4 mx-auto">
    <img src="https://pagedone.io/asset/uploads/1710412177.png" alt="Shanay image" class="w-10 h-11">
    <div class="grid">
      <h5 class="text-gray-900 text-sm font-semibold leading-snug pb-1">Shanay cruz</h5>
      <div class="w-max grid">
        <div class="rounded-3xl rounded-tl-none p-2 bg-gray-100 grid grid-cols-2 gap-2">
          <img src="https://pagedone.io/asset/uploads/1710414510.png" alt="media images" class="rounded-xl">
          <img src="https://pagedone.io/asset/uploads/1710414524.png" alt="media images" class="rounded-xl">
          <img src="https://pagedone.io/asset/uploads/1710414524.png" alt="media images" class="rounded-xl">
          <img src="https://pagedone.io/asset/uploads/1710414541.png" alt="media images" class="rounded-xl">
        </div>
        <div class="justify-end items-center inline-flex mb-2.5">
          <h6 class="text-gray-500 text-xs font-normal leading-4 py-1">05:14 PM</h6>
        </div>
      </div>
      <div class="w-max grid">
        <div class="rounded-3xl rounded-tl-none p-2 bg-gray-100 grid grid-cols-2 gap-2">
          <img src="https://pagedone.io/asset/uploads/1710414510.png" alt="media images" class="rounded-xl">
          <img src="https://pagedone.io/asset/uploads/1710414524.png" alt="media images" class="rounded-xl">
          <img src="https://pagedone.io/asset/uploads/1710414524.png" alt="media images" class="rounded-xl">
          <img src="https://pagedone.io/asset/uploads/1710414541.png" alt="media images" class="rounded-xl">
        </div>
        <div class="justify-end items-center inline-flex mb-2.5">
          <h6 class="text-gray-500 text-xs font-normal leading-4 py-1">05:14 PM</h6>
        </div>
      </div>
    </div>
   </div>
   </div>
   </div>

You can send links to your one to one conversation for that you can use following example.

Shanay image
Shanay cruz
Check out one of the biggest figma design system there ui component library based on tailwind css
https://pagedone.io/blocks
05:14 PM
Shanay image
Shanay cruz
Check out one of the biggest figma design system there ui component library based on tailwind css
https://pagedone.io/blocks image
05:14 PM
 <div class="w-full">
   <div class="grid pb-11">
   <div class="flex gap-2.5 mb-4 mx-auto">
    <img src="https://pagedone.io/asset/uploads/1710412177.png" alt="Shanay image" class="w-10 h-11">
    <div class="grid">
      <h5 class="text-gray-900 text-sm font-semibold leading-snug pb-1">Shanay cruz</h5>
      <div class="w-full max-w-xs grid">
        <div class="px-3.5 py-2 bg-gray-100 rounded flex flex-col gap-2">
          <h5 class="text-sm font-normal text-gray-900">Check out one of the biggest figma design system there ui component library based on tailwind css</h5>
          <a href="#" class="text-sm font-normal text-indigo-600 underline">https://pagedone.io/blocks</a>
          <img src="https://pagedone.io/asset/uploads/1715316833.png" alt="Image" class="rounded">
        </div>
        <div class="justify-end items-center inline-flex mb-2.5">
          <h6 class="text-gray-500 text-xs font-normal leading-4 py-1">05:14 PM</h6>
        </div>
      </div>
    </div>
   </div>
   </div>
   <div class="grid pb-11">
   <div class="flex gap-2.5 mb-4 mx-auto">
    <img src="https://pagedone.io/asset/uploads/1710412177.png" alt="Shanay image" class="w-10 h-11">
    <div class="grid">
      <h5 class="text-gray-900 text-sm font-semibold leading-snug pb-1">Shanay cruz</h5>
      <div class="w-full max-w-xs grid">
        <div class="px-3.5 py-2 bg-gray-100 rounded-3xl rounded-tl-none flex flex-col gap-2">
          <h5 class="text-sm font-normal text-gray-900 ">Check out one of the biggest figma design system there ui component library based on tailwind css</h5>
          <a href="#" class="text-sm font-normal text-indigo-600 underline">https://pagedone.io/blocks</a>
          <img src="https://pagedone.io/asset/uploads/1715316833.png" alt="image" class="rounded-xl">
        </div>
        <div class="justify-end items-center inline-flex mb-2.5">
          <h6 class="text-gray-500 text-xs font-normal leading-4 py-1">05:14 PM</h6>
        </div>
      </div>
    </div>
   </div>
   </div>
   </div>