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

9

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

11k
Customer support chatbox
Floating chatbox

Author:
gmer33

1 year ago

10k
background animation
background animation

Author:
Anonymous

1 year ago

40.6k
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.5k
Question & Answer
questions and answers

Author:
Anonymous

1 year ago

8k
cards
cards with background animation

Author:
Anonymous

1 year ago

10.1k
Tailwind invoice example

Author:
Elijah Davis

2 years ago

17.3k
DailyDev Card
Card -based card used in the Dailydev Card, this is created to be modified to taste of each user

Author:
Ameth Galarcio

1 week ago

144
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

3 months ago

805
Maintenance page

Author:
Faye

2 months ago

325
Simple Hero Section
Hero Section using Tailwind

Author:
Ahita Bisma Adlula

1 week ago

187

Explore components by Tags

Didn't find component you were looking for?

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