Home
Simon Scheffer
Whatsapp like chat design

Whatsapp like chat design

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

Comment Section

Author Simon Scheffer

12.1k

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

Author:
Prajwal Hallale

1 year ago

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

Author:
Prajwal Hallale

2 years ago

13.9k
Comment card

Author:
Simon Scheffer

2 years ago

9.6k
Comments section with form

Author:
Orion.c

1 year ago

9.1k
Comment form

Author:
Sophia Baker

2 years ago

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

Author:
Prajwal Hallale

2 years ago

10.1k
Post Detail
Post detail with form

Author:
Sedat Kumcu

4 months ago

760
Simple comment box

Author:
Lukas Müller

2 years ago

10.5k
Simple Comment Section Component
This is a Simple Comment Section Component with full responsiveness and dark mode supported

Author:
Shariar Hasan

1 year ago

1.6k
User Comments Section
Display users' comments beautifully. The component also has a form for commenting.

Author:
Prajwal Hallale

1 year ago

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

Author:
Coastal UI

3 weeks ago

169
Comment section

Author:
Manuela Bianka

2 years ago

10.5k

Explore components by Tags

Didn't find component you were looking for?

Search from 2100+ components