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

Admin dashboard cards
Card groups for showing stats/info. Change it for responsiveness for small and medium screen

Author:
RShubham kumar

1 year ago

3.9k
Professional Plan
Professional Plan

Author:
Muzammil Riaz

3 months ago

222
Beautiful and Responsive Card Component
Modern, professional and responsive card component for the blog/services/info

Author:
Rajesh Maheshwari

6 months ago

668
Responsive Cards

Author:
Anonymous

1 year ago

1.4k
Testimonials

$$@(\/)(\/)Y$ Author:
$@(\/)(\/)Y

5 months ago

1.3k
Watch Card
Watch Cards

Author:
Anonymous

11 months ago

1.5k
Info cards

Author:
Samuel Dawson

2 years ago

10.6k
Responsive card grid
responsive card grid for articles

Author:
Mr Robot

2 years ago

15.2k
home
html , css

Author:
Hacker Development

4 months ago

1.2k
Call to Action Box

Author:
Aitrik Saha

7 months ago

1.2k
Drinkware landing page

Author:
Maxim

5 months ago

1k
Modern E-commerce Product Card with TailwindCSS
This product card is designed for e-commerce platforms using TailwindCSS. It features a discount badge, product image carousel, quick view and quick order buttons, ratings, product name, brand details, dynamic pricing with a strike-through original price, and a prominent add-to-cart button. The clean and professional layout is perfect for showcasing products on online stores.

Author:
SHARIFUL ISLAM

7 months ago

1.5k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components