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.

10.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

1 year ago

15.6k
Customer support chatbox
Floating chatbox

Author:
gmer33

1 year ago

9.8k
Show credit card details

Author:
Manuela Bianka

2 years ago

10.6k
Google map iframe with tailwind

Author:
Kofi Osei

1 year ago

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

9.9k
Cookie consent banner

Author:
Leif99

1 year ago

15.5k
background animation
background animation

Author:
Anonymous

1 year ago

38.7k
Restaurant menu card

Author:
Anonymous

8 months ago

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

16.8k
Product hunt showcase

Author:
Lukas Müller

1 year ago

11.6k
Apple Dock Navigation Bar

Author:
Cristian

1 week ago

107
portfolio
This portfolio page for Claire includes: 1. Responsive design that works on both desktop and mobile 2. Indigo-800 and Blue-900 color scheme for the background 3. Dark mode support (the design is already dark-themed) 4. Beautiful animations and effects: 1. Fade-in and slide-up animations for sections 2. Animated skill bars 3. Hover effects on projects and buttons 4. Smooth scrolling for navigation 5. Mobile-friendly navigation with a toggle menu 6. Sections for About, Skills, Projects, and Contact 7. A contact form with styled inputs 8. Social media links in the footer 9. Accessibility considerations (proper heading structure, color contrast, focus styles) Key features: - The background uses a gradient from Indigo-800 to Blue-900 - The header and footer have a frosted glass effect using backdrop filters - Text is white for high contrast against the dark background - Sections fade in and slide up as they enter the viewport - Skill bars animate when the skills section is in view - Project cards have a hover effect with scaling and increased opacity - The contact form has animated focus states - Social media icons change color on hover - The layout is responsive, with a hamburger menu for mobile screens This implementation provides a visually appealing and functional portfolio page for Claire, using HTML, Tailwind CSS, and vanilla JavaScript for the interactions and animations.

Author:
nejaa badr

2 months ago

486

Explore components by Tags

Didn't find component you were looking for?

Search from 1900+ components