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 v3.4. It is responsive. It supports dark mode.

Card

Author Akram Khan

Tailwind v3.4 3k 7

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

Info card for admin panal
Show stats on your dashboard

Arya

4 years ago

13.7k
Fully Animated Timeline Card
It is at a 20s interval for testing purposes. Go to the <style> and change the .content-scroll class from 20s to 35s for a production ready slower animation.

Coastal UI

2 years ago

2.8k
Feature Card

Md. Tofayel islam

2 years ago

2.2k
Feature Card
Shows off a feature, great for homepages and grid layout, or can be used in dashboards for "example use" grids. Enjoy! Part of the Coastal UI collection.

Coastal UI

1 year ago

794
Cards

Morris Muriuki Muthigani

1 year ago

1.8k
Tailwind Animated Login Form
A modern Tailwind CSS animated login form featuring smooth transitions, premium UI styling, responsive layout, and interactive input effects. Designed for admin panels, SaaS dashboards, and secure web applications, this login template delivers a clean light-theme interface with professional animations and a high-end user experience.

shrenik khule

9 months ago

1.1k
Tailwind CSS Blog Card

Morris Muriuki Muthigani

1 year ago

696
Chat Bot

Md. Tofayel islam

1 year ago

1.4k
Experince Section

ABDO-SY

1 year ago

1.3k
Clean Image Grid Gallery
A clean and balanced image gallery arranged in equal-sized columns for a simple, organized presentation.

JUGENDRA GANGWAR

3 months ago

284
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.

Abhiraj

1 year ago

2.5k
Login Form
A modern Tailwind CSS animated login form featuring smooth transitions, premium UI styling, responsive layout, and interactive input effects. Designed for admin panels, SaaS dashboards, and secure web applications, this login template delivers a clean light-theme interface with professional animations and a high-end user experience.

shrenik khule

9 months ago

778