Home
Akram Khan
Chats Message Screen in neomorphism

Chats Message Screen in neomorphism

light/dark chat screen

This tailwind example is contributed by Akram Khan, on 27-Jul-2024. Component is made with Tailwind CSS v3. It is responsive. It supports dark mode.

Card

Author Akram Khan

1.8k

Fork Fullscreen

<div class="h-96 overflow-y-auto neo-inset p-4 rounded-xl space-y-4">
            
            <div class="flex items-start space-x-2">
                <div class="w-8 h-8 rounded-full neo-shadow flex-shrink-0 flex items-center justify-center">
                    <span class="text-sm font-medium text-gray-700 dark:text-gray-300">JD</span>
                </div>
                <div class="bg-white dark:bg-gray-700 p-3 rounded-lg neo-shadow max-w-xs">
                    <p class="text-sm text-gray-700 dark:text-gray-300">Hey there! How's it going?</p>
                </div>
            </div>

<div class="flex items-start justify-end space-x-2">
                <div class="bg-blue-500 p-3 rounded-lg neo-shadow max-w-xs">
                    <p class="text-sm text-white">Hi John! I'm doing well, thanks for asking. How about you?</p>
                </div>
            </div>
        </div>

<div class="flex items-center space-x-4">
            <div class="flex-grow">
                <input type="text" placeholder="Type your message..."
                       class="w-full p-4 rounded-xl neo-inset bg-transparent text-gray-700 dark:text-gray-300 placeholder-gray-500 dark:placeholder-gray-400 focus:outline-none">
            </div>
            <button class="p-4 rounded-xl neo-shadow neo-button focus:outline-none">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-blue-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8" />
                </svg>
            </button>
        </div>
    </div>

Related Examples

Food Ordering Dashboard
A responsive user interface for selecting and ordering your favorite meals. The dashboard allows users to browse food categories, view dish details, and place orders with ease.

Author:
Muhammad Umair Arshad

4 months ago

745
Cards section - Sport

Author:
ABDO-SY

7 months ago

1.7k
Contact us form with map
Contact us form with map

Author:
Chithira Kumar M

1 year ago

11.8k
Responsive Testimonial Card with stars ratings

Author:
Quentin Rivers

1 year ago

1.6k
File Upload

Author:
Rajesh Maheshwari

7 months ago

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

Author:
Rajesh Pandey

4 months ago

557
Tailwind Card Components
A collection of 20+ copy-paste ready card components built with pure HTML and Tailwind CSS. Includes product cards, profile cards, article cards, pricing cards, testimonials, and notifications.

Author:
Ijila Itunu

2 weeks ago

131
Information card

Author:
Samuel Dawson

2 years ago

11.9k
opulent
this a page didicated for laptops,phones using tailwindcss

Author:
ishimwe shadad

4 months ago

699
Greeting Card with CTA
card with two actions with greeting msg according to time

Author:
Amit Pachange

1 year ago

7.5k
pricing card
This frontend template is designed for a website that provides software services and open-source code to users. It serves as a clean, modern UI for browsing, searching, and downloading open-source projects. Building with HTML, tailwindcss for CSS ,

Author:
Ahmath S.

1 month ago

192
Otp-code template
This is an OTP code template that contains the one-time password, which can be sent to the user's email either when they are signing up for the first time or for multi-factor authentication (MFA) during the login process.

Author:
anandu ap

11 months ago

1.7k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components