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

17.5k

14

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

12.4k
Customer support chatbox
Floating chatbox

Author:
gmer33

2 years ago

11.5k
background animation
background animation

Author:
Anonymous

2 years ago

49.4k
News feed

Author:
Bunny

2 years ago

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

2 years ago

20.7k
Question & Answer
questions and answers

Author:
Anonymous

2 years ago

8.6k
cards
cards with background animation

Author:
Anonymous

2 years ago

11.2k
Tailwind invoice example

Author:
Elijah Davis

2 years ago

18.9k
Forgot password?
you can change password an time

Author:
gidy

6 months ago

539
Chat Bot

Author:
Md. Tofayel islam

4 months ago

494
Sidebar
This is the sidebar that I use in my projects, I use grid to be able to manage the space issue a little better, it seems like a clean and modern design, it is more than anything for the dashboards that you want to create

Author:
Ameth Galarcio

1 year ago

3.7k
ServerHub Interface

Author:
МОЙДОЫР

3 weeks ago

305

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ 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.12