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

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

Authentication form
Use this example to authenticate users with a login form using a phone number instead of an email address.

Author:
Md. Tofayel islam

1 year ago

3.1k
Info cards

Author:
Samuel Dawson

2 years ago

11k
Simple card layout with image

Author:
Leon Bachmann

3 years ago

11k
profile2

Author:
pablitodgb

7 months ago

761
3D Interactive Premium Card
This sleek, modern UI card elevates the standard design with a three-dimensional, interactive experience. Utilizing a subtle 3D parallax tilt that responds to your mouse movement and a smooth, sweeping light-refraction effect on hover, the card instantly communicates premium quality and technical sophistication. It's built for presenting key metrics and deployment actions with dynamic flair.

Author:
CodewithFaraz

2 months ago

283
Responsive Working Process Section
This modern and responsive "Our Working Process" section adapts seamlessly to all screen sizes, ensuring a smooth user experience. The design follows a structured step-by-step layout with clear typography, bold colors, and interactive elements, making it perfect for showcasing business processes or workflows.

Author:
ABDO-SY

9 months ago

984
Tailwind image slider
slider with navigation buttons and info about image

Author:
Anonymous

2 years ago

20.7k
card
simple card for begin

Author:
Omer fils ELENGA

11 months ago

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

Author:
ishimwe shadad

7 months ago

956
Card-Product
Product card for vertical windows, if you need a more complete version to show more information, you have other options in my profile

Author:
Ameth Galarcio

1 year ago

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

Author:
Maxim

1 year ago

13k
card

Author:
Raul antonio de la cruz hernandez

2 weeks ago

88

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components