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

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