Whatsapp like chat design

This tailwind example is contributed by Simon Scheffer, on 16-Jan-2023. Component is made with Tailwind v3.4. It is responsive.

Comment Section

Author Simon Scheffer

Tailwind v3.4 14.2k 7

Fork Fullscreen

<div class="py-20 relative flex flex-grow flex-col px-12 justify-end" style="background-color:#e5ddd5;">
    <div
        class="ml-auto rounded-lg rounded-tr-none my-1 p-2 text-sm bg-green-300 flex flex-col relative speech-bubble-right">
        <p class="">Do you still have that car from gone in 60 seconds? Can I borrow it please.</p>
        <p class="text-gray-600 text-xs text-right leading-none">8:00 AM</p>
    </div>
    <div class="mr-auto rounded-lg rounded-tl-none my-1 p-2 text-sm bg-white flex flex-col relative speech-bubble-left">
        <p>Yeah dude for sure</p>
        <p class="text-gray-600 text-xs text-right leading-none">8:45 AM</p>
    </div>
    <div
        class="ml-auto rounded-lg rounded-tr-none my-1 p-2 text-sm bg-green-300 flex flex-col relative speech-bubble-right">
        <p class="">Dude WTF was up with that plane you were on!!!?</p>
        <p class="text-gray-600 text-xs text-right leading-none">8:00 AM</p>
    </div>
    <div class="mr-auto rounded-lg rounded-tl-none my-1 p-2 text-sm bg-white flex flex-col relative speech-bubble-left">
        <p>LOL I Know right </p>
        <p class="text-gray-600 text-xs text-right leading-none">8:45 AM</p>
    </div>
    <div
        class="ml-auto rounded-lg rounded-tr-none my-1 p-2 text-sm bg-green-300 flex flex-col relative speech-bubble-right">
        <p class="">Hey man what should we do this weekend?</p>
        <p class="text-gray-600 text-xs text-right leading-none">8:00 AM</p>
    </div>
    <div class="mr-auto rounded-lg rounded-tl-none my-1 p-2 text-sm bg-white flex flex-col relative speech-bubble-left">
        <p>Steal the declaration of independence?...</p>
        <p class="text-gray-600 text-xs text-right leading-none">8:45 AM</p>
    </div>
</div>

.speech-bubble-left::before {
        content: "";
        width: 0px;
        height: 0px;
        position: absolute;
        border-left: 5px solid transparent;
        border-right: 5px solid white;
        border-top: 5px solid white;
        border-bottom: 5px solid transparent;
        left: -10px;
        top: 0;
    }
</style>

Related Examples

Comment section
Minimal comment section for your project

Prajwal Hallale

3 years ago

18.3k
Nested comment section
This is a comment thread with a reply, up-vote, and down-vote buttons.

Prajwal Hallale

3 years ago

14.5k
Comment card

Simon Scheffer

3 years ago

11.1k
Comments section with form

Orion.c

3 years ago

11.4k
Comment form

Sophia Baker

3 years ago

13k
Comment Section
The minimal comment section for your project with user user images.

Prajwal Hallale

4 years ago

10.4k
TailwindFlex by omerlink
TailwindFlex

Omer fils ELENGA

6 months ago

422
TailwindFlex by omerlink
TailwindFlex

Omer fils ELENGA

6 months ago

566
Comment section

Manuela Bianka

4 years ago

12.3k
Post Detail
Post detail with form

Sedat Kumcu

1 year ago

2.2k
omerlinkStream
omerlinkStream

Omer fils ELENGA

8 months ago

1.2k
Modern Testimonial
A simple and easy to use component for reviews and testimonials.

Coastal UI

1 year ago

1.5k