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.5k

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

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

Author:
Prajwal Hallale

3 years ago

14.4k
Comment card

Author:
Simon Scheffer

2 years ago

10.7k
Comments section with form

Author:
Orion.c

2 years ago

10.5k
Comment form

Author:
Sophia Baker

3 years ago

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

Author:
Prajwal Hallale

3 years ago

10.3k
Clean AI Chat UI with Tailwind CSS – ChatGPT-Style Interface
A polished and responsive AI chat interface built using modern Web Components and Tailwind CSS. This UI replicates the smooth, minimal experience of ChatGPT with a clean layout, floating input bar, animated scrollable message feed, and mock AI responses. Ideal for SaaS dashboards, AI assistants, or frontend prototypes. Designed with professional spacing, accessible colors, and reusable components. Key features: Responsive layout with mobile support Floating input bar with auto-expanding textarea Tailwind-powered message bubbles with clear sender roles Modern dark theme with subtle gradients and shadows Easily extendable to real AI APIs (e.g., OpenAI)

Author:
Ayyamperumal S

8 months ago

1.7k
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

3 weeks ago

72
Comment section

Author:
Task Master

3 years ago

9.3k
LIQUID PLASMA by omerlinks
LIQUID PLASMA by omerlinks

Author:
Omer fils ELENGA

3 weeks ago

30
use-scroll-effect
use-scroll-effect

Author:
Omer fils ELENGA

3 weeks ago

168
Portfolio by omerlinks the mouse
Portfolio by omerlinks the mouse

Author:
Omer fils ELENGA

1 week ago

9

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components