Home
Lucas Martinez
Chatbox template

Chatbox template

This tailwind example is contributed by Lucas Martinez, on 15-Mar-2023. Component is made with Tailwind CSS v3.

11.8k

<div class="flex flex-col h-screen max-w-sm">
    <div class="flex-grow overflow-y-auto">
        
        <div class="flex flex-col mb-4 gap-4 py-4">
            <div class="flex justify-start">
                <div class="bg-gray-100 rounded-lg px-4 py-2 max-w-[80%]">
                    <p class="text-gray-900 text-sm">Hey, how are you?</p>
                </div>
            </div>
            <div class="flex justify-end">
                <div class="bg-blue-500 rounded-lg px-4 py-2 max-w-[80%]">
                    <p class="text-white text-sm">I'm good, thanks! How about you?</p>
                </div>
            </div>
            <div class="flex justify-start">
                <div class="bg-gray-100 rounded-lg px-4 py-2 max-w-[80%]">
                    <p class="text-gray-900 text-sm">I'm doing great, thanks for asking!</p>
                </div>
            </div>
        </div>
    </div>
    <div class="flex justify-center items-center h-16">
        
        <input type="text" class="border border-gray-300 rounded-lg py-2 px-4 w-full max-w-lg mr-4" placeholder="Type a message...">
        <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">Send</button>
    </div>
</div>

Related Examples

Chat template
fullscreen chat template suitable for mobile devices

Author:
Manon Daniel

2 years ago

16.9k
Customer support chatbox
Floating chatbox

Author:
gmer33

2 years ago

10.8k
Show credit card details

Author:
Manuela Bianka

2 years ago

11.6k
Google map iframe with tailwind

Author:
Kofi Osei

2 years ago

20.4k
Typewriter effect in tailwindcss with this simple trick
source: https://dev.to/lazysock/make-a-typewriter-effect-with-tailwindcss-in-5-minutes-dc

Author:
Anonymous

1 year ago

10.8k
Cookie consent banner

Author:
Leif99

2 years ago

16.2k
background animation
background animation

Author:
Anonymous

1 year ago

45.2k
Skill Cards with Tailwind CSS
A responsive and modern card section designed with Tailwind CSS to showcase professional skills. Each card features a smooth fade-in animation and hover scaling effect for an engaging user experience. Ideal for portfolio websites, developer profiles, and personal branding pages. Fully customizable and mobile-friendly.

Author:
irahoza daniel

3 weeks ago

42
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

3 weeks ago

32
background animation
background animation

Author:
Jayendra Madara

10 months ago

2.6k
Best Chatting dashboard
create a modern WhatsApp-like chat dashboard with 3D effects, animations, and a sleek design. This will be a static view showcasing the interface with Nicole Shalom as the developer.

Author:
Nicole Shalom

3 weeks ago

79
Calculator
This calculator uses CSS although it can be passed directly to tailwind

Author:
Ameth Galarcio

10 months ago

1.5k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components