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

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

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

Author:
Khalid

1 year ago

3.5k
Watch Card
Watch Cards

Author:
Anonymous

1 year ago

1.6k
Card Component Simple
This is a Card Component for simple use &full responsive

Author:
Shariar Hasan

1 year ago

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

5 months ago

813
Avtar Cards
this is cards, for the profile section

Author:
pablitodgb

4 months ago

171
About us card

Author:
Sienna

2 years ago

11.4k
Features cards section
Features cards section with dark theme

Author:
Sophia Baker

2 years ago

10k
Team Members Showcase with Portfolio Backlink
Showcase your team's talent with this beautifully designed and responsive team members grid. Each card includes the member's photo, name, role, and social links. A special portfolio backlink is included to highlight your personal contributions as a developer. Supports light and dark modes.

Author:
Abhiraj

9 months ago

1.3k
masonary grids effect for cards using columns
As part of the redesign I was trying to think of ways to lay out testimonials from students, which may have varying length/content, I stumbled onto the idea of using a masonry layout (think bricks, think Pinterest).

Author:
rohit whyphy

7 months ago

1.1k
Responsive card with image

Author:
Simon Scheffer

2 years ago

11k
Amazing E-commerce card 2
An amazing e-commerce card with stunning hover effect 2

Author:
Ragnar lodbrok

11 months ago

1.4k
Hello Acode Master! 👋
is a passionate software developer based in Rubavu. He considers himself the top developer in the area and is committed to solving real-world problems through technology.

Author:
Code Master(Mfuranziza Dusabe Hamza)

5 months ago

651

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components