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

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

Carousel Card Slider Swiper on Alpine.JS
with support drag and drop mouse actions

Author:
Maxim

1 year ago

11.1k
DevPort
modern portifolio by salvator

Author:
Baraka Salvator

1 week ago

148
Tour package card
This card could be used for featuring a product, service, or blog post:

Author:
Henrik R.

9 months ago

1.4k
Responsive Card Grid
Tailwind CSS responsive grid for feature listing. The cards have a teal background, rounded corners, and a concise display of feature titles, descriptions, and a "Learn More" link.

Author:
kzsamir849

11 months ago

1.5k
sticky headings
sticky headings

Author:
Anonymous

1 year ago

5.6k
File Upload

Author:
Rajesh Maheshwari

3 months ago

404
google meet clone
Meeting application with fully responsive connect my web for jsx https://abhirajk.vercel.app/

Author:
Abhiraj

4 months ago

783
User Card

Author:
Md. Tofayel islam

5 months ago

618
Responsive card with image

Author:
Simon Scheffer

2 years ago

10.6k
Simple Card with Image
Horizontal card

Author:
Prem..

2 years ago

8.6k
Experience Card
Experience card section you can use for portfolio or other profiles.

Author:
Khalid

1 year ago

2.7k
Card
Card Layout in Tailwind as React Compoment

Author:
Deepak Sharma

4 months ago

588

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components