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

13

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.2k
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.6k
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.8k
delivery
It will help us get our stuff delivered to your home in a way that your ordered items are delivered to your home.

Author:
Nishimwe Jeanine

5 months ago

316
Clean AI Chat UI with Tailwind CSS – ChatGPT-Style Interface
A polished and responsive AI chat interface built using modern Web Components and Tailwind CSS. This UI replicates the smooth, minimal experience of ChatGPT with a clean layout, floating input bar, animated scrollable message feed, and mock AI responses. Ideal for SaaS dashboards, AI assistants, or frontend prototypes. Designed with professional spacing, accessible colors, and reusable components. Key features: Responsive layout with mobile support Floating input bar with auto-expanding textarea Tailwind-powered message bubbles with clear sender roles Modern dark theme with subtle gradients and shadows Easily extendable to real AI APIs (e.g., OpenAI)

Author:
Ayyamperumal S

6 months ago

1.5k
Glassmorphism form

Author:
Sophia Baker

2 years ago

17.8k
Skills Showcase, My Tech Stack and Expertise & Skills
🚀 Showcasing My Skills with TailwindCSS & Flexbox! I’ve designed a responsive and interactive Skills Section using Tailwind CSS and Flexbox. With smooth hover effects and a clean layout, this section highlights my expertise in: 🔹 Frontend Technologies – HTML, CSS, JavaScript, React, Next.js 🔹 Styling Frameworks – TailwindCSS 🔹 Backend & Tools – Node.js, Git

Author:
Muhammad Umair Arshad

7 months ago

1k

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