Home
Manon Daniel
Chat template

Chat template

fullscreen chat template suitable for mobile devices

This tailwind example is contributed by Manon Daniel, on 17-Feb-2023. Component is made with Tailwind CSS v3. It is responsive.

Other

Author Manon Daniel

16.9k

12

Fork Fullscreen

<div class="h-screen flex flex-col">
    <div class="bg-gray-200 flex-1 overflow-y-scroll">
        <div class="px-4 py-2">
            <div class="flex items-center mb-2">
                <img class="w-8 h-8 rounded-full mr-2" src="https://picsum.photos/50/50" alt="User Avatar">
                <div class="font-medium">John Doe</div>
            </div>
            <div class="bg-white rounded-lg p-2 shadow mb-2 max-w-sm">
                Hi, how can I help you?
            </div>
            <div class="flex items-center justify-end">
                <div class="bg-blue-500 text-white rounded-lg p-2 shadow mr-2 max-w-sm">
                    Sure, I can help with that.
                </div>
                <img class="w-8 h-8 rounded-full" src="https://picsum.photos/50/50" alt="User Avatar">
            </div>
        </div>
    </div>
    <div class="bg-gray-100 px-4 py-2">
        <div class="flex items-center">
            <input class="w-full border rounded-full py-2 px-4 mr-2" type="text" placeholder="Type your message...">
            <button class="bg-blue-500 hover:bg-blue-700 text-white font-medium py-2 px-4 rounded-full">
        Send
      </button>
        </div>
    </div>
</div>

Related Examples

Chatbox template

Author:
Lucas Martinez

2 years ago

11.8k
Customer support chatbox
Floating chatbox

Author:
gmer33

2 years ago

10.8k
background animation
background animation

Author:
Anonymous

1 year ago

45.3k
News feed

Author:
Bunny

2 years ago

13.2k
Typewriter animation effect
Build using only Tailwind CSS; no JavaScript is required. This is a continuous typing effect. If you want to stop it after the text is typed for the first time, then you can remove 'infinite' from [typing: 'typing 2s steps(20) infinite alternate, blink .7s infinite'] from the config file.

Author:
Samuel Dawson

1 year ago

19.2k
Question & Answer
questions and answers

Author:
Anonymous

1 year ago

8.3k
cards
cards with background animation

Author:
Anonymous

1 year ago

10.7k
Tailwind invoice example

Author:
Elijah Davis

2 years ago

18.2k
Cafee shop
help to buy something that can help you to relax

Author:
INGRIDE MUZIRANENGE

4 weeks ago

185
Glassmorphism form

Author:
Sophia Baker

2 years ago

17k
Text Overlay Effect
This is a text overlay effect, featuring a subtle background title and a prominent foreground heading. This design enhances visual interest while maintaining a clean, modern aesthetic.

Author:
Anum Shahana

7 months ago

1k
chat bar
live chat

Author:
gidy

3 weeks ago

227

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components

TailwindFlex.com

Tailwindflex.com is a free Tailwind CSS examples library. It's a one-stop destination for ready-made Tailwind CSS components and templates.

Contact

Email: admin@tailwindflex.com

Resources

Tailwind CSS Gradient Generator Free Bootstrap CSS Components Free CSS Components

© 2025 TailwindFlex. All Rights Reserved.

v1.1