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

13.8k

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

2 years ago

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

Author:
Prajwal Hallale

3 years ago

14.5k
Comment card

Author:
Simon Scheffer

3 years ago

10.8k
Comments section with form

Author:
Orion.c

3 years ago

11k
Comment form

Author:
Sophia Baker

3 years ago

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

Author:
Prajwal Hallale

3 years ago

10.3k
The Free AI Tools Grid Section (210+ Tools, No Signup)
A responsive and SEO-optimized grid section showcasing over 210 free AI tools. Designed with Tailwind CSS, fully responsive, fast-loading, and built for high user engagement. No sign-up required, privacy-friendly, and optimized for performance and discoverability.https://www.thefreeaitools.com/

Author:
Achraf Testq

3 weeks ago

313
Générateur de Certificat Officiel
Générateur de Certificat Officiel

Author:
Omer fils ELENGA

4 months ago

364
Review popup form with toggle and stars
Review popup form with toggle and stars

Author:
Ayman Reifoun

1 year ago

1k
card section neon
card section neon

Author:
Omer fils ELENGA

2 months ago

464
Linear dinamique section by Raul antonio de la cruz hernandez remix omerlinx responsive
Linear dinamique section by Raul antonio de la cruz hernandez remix omerlinx responsive

Author:
Omer fils ELENGA

4 months ago

287
Comment section

Author:
Manuela Bianka

3 years ago

11.9k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components