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

15.9k

8

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

1 year ago

10.8k
Customer support chatbox
Floating chatbox

Author:
gmer33

1 year ago

9.9k
background animation
background animation

Author:
Anonymous

1 year ago

39.7k
News feed

Author:
Bunny

1 year ago

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

17.2k
Question & Answer
questions and answers

Author:
Anonymous

1 year ago

7.8k
cards
cards with background animation

Author:
Anonymous

1 year ago

10k
Tailwind invoice example

Author:
Elijah Davis

2 years ago

17k
Image Gallery with Alpine.Js

Author:
Maxim

2 weeks ago

126
Responsive layout with header, main body, aside (sidebar) and footer

Author:
Ahmed Malik

1 year ago

10.9k
Moving Background Animation

Author:
Samuel Abera

2 weeks ago

512
Chat Bot
Simulation of a chat bot that can be used for conversations as a sketch idea

Author:
Ameth Galarcio

6 months ago

1.6k

Explore components by Tags

Didn't find component you were looking for?

Search from 1900+ 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

© 2025 TailwindFlex. All Rights Reserved.

v1.1