Chatbox template

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

Tailwind v3.4 13.3k 12

<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

Manon Daniel

3 years ago

18.2k
Customer support chatbox
Floating chatbox

gmer33

3 years ago

12.2k
Show credit card details

Manuela Bianka

3 years ago

13.2k
Google map iframe with tailwind

Kofi Osei

3 years ago

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

Anonymous

3 years ago

12.2k
Cookie consent banner

Leif99

3 years ago

18.2k
background animation
background animation

Anonymous

3 years ago

53.1k
Simple Login & Register Page
Login and Register Page using Tailwind, Alpine JS, and Fontawesome

Ahita Bisma Adlula

1 year ago

4.2k
lachisa
Lachisa is a modern and innovative solution designed to simplify everyday experiences through smart technology, seamless performance, and user-friendly design. It empowers users with efficiency, reliability, and a future-ready approach.

Lokesh H

3 months ago

334
Recipe card
A modern and responsive Tailwind CSS recipe card with image, ingredients, and instructions. Supports dark mode and mobile view.

Rajesh Pandey

1 year ago

1.8k
Prescription

Anonymous

2 weeks ago

8
Login / Register Form
Tailwind CSS styling only – no frameworks required Smooth tab switch with JavaScript Fully responsive for mobile and desktop Clean, modern form design with interactive elements

KULDEEP

1 year ago

1.7k