Home
Nicole Shalom
Best Chatting dashboard

Best Chatting dashboard

create a modern WhatsApp-like chat dashboard with 3D effects, animations, and a sleek design. This will be a static view showcasing the interface with Nicole Shalom as the developer.

This tailwind example is contributed by Nicole Shalom, on 25-May-2025. Component is made with Tailwind CSS v3. It is responsive. similar terms for this example are Admin Dashboard, User dashboard

Other Dashboard

Author Nicole Shalom

374

Fork Fullscreen

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>WhatsApp Dashboard - Nicole Shalom</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
        
        * {
            font-family: 'Inter', sans-serif;
        }
        
        .glass-effect {
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(20px);
            border: 1px solid rgba(255, 255, 255, 0.2);
        }
        
        .chat-hover {
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }
        
        .chat-hover:hover {
            transform: translateX(8px) scale(1.02);
            background: rgba(37, 211, 102, 0.1);
            box-shadow: 0 10px 30px rgba(37, 211, 102, 0.2);
        }
        
        .message-bubble {
            animation: messageSlide 0.4s ease-out;
        }
        
        @keyframes messageSlide {
            from {
                opacity: 0;
                transform: translateY(20px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
        
        .floating {
            animation: floating 3s ease-in-out infinite;
        }
        
        @keyframes floating {
            0%, 100% { transform: translateY(0px); }
            50% { transform: translateY(-10px); }
        }
        
        .gradient-bg {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        }
        
        .chat-gradient {
            background: linear-gradient(135deg, #25d366 0%, #128c7e 100%);
        }

.online-indicator {
            animation: pulse 2s infinite;
        }
        
        @keyframes pulse {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.5; }
        }
        
        .typing-indicator {
            animation: typing 1.5s infinite;
        }
        
        @keyframes typing {
            0%, 60%, 100% { transform: translateY(0); }
            30% { transform: translateY(-10px); }
        }
        
        .scroll-smooth {
            scroll-behavior: smooth;
        }
        
        .custom-scrollbar::-webkit-scrollbar {
            width: 6px;
        }
        
        .custom-scrollbar::-webkit-scrollbar-track {
            background: rgba(255, 255, 255, 0.1);
            border-radius: 10px;
        }
        
        .custom-scrollbar::-webkit-scrollbar-thumb {
            background: rgba(37, 211, 102, 0.5);
            border-radius: 10px;
        }
        
        .custom-scrollbar::-webkit-scrollbar-thumb:hover {
            background: rgba(37, 211, 102, 0.7);
        }
    </style>
</head>
<body class="bg-gray-900 text-white min-h-screen overflow-hidden">
    
    <div class="fixed inset-0 opacity-5">
        <div class="absolute inset-0" style="background-image: radial-gradient(circle at 2px 2px, white 1px, transparent 0); background-size: 40px 40px;"></div>
    </div>
    
    
    <div class="flex h-screen relative z-10">
        
        
        <div class="w-80 bg-gray-800 border-r border-gray-700 flex flex-col perspective-card">
            <div class="card-3d h-full">
                
                <div class="p-4 border-b border-gray-700 glass-effect">
                    <div class="flex items-center justify-between mb-4">
                        <div class="flex items-center space-x-3">
                            <div class="relative">
                                <img src="https://lh3.googleusercontent.com/a/ACg8ocKglmNZhp-djrEiWhstceJqG7kyby7hUn0m3nix2w-WRmkjuTOH=s96-c" 
                                     alt="Profile" class="w-10 h-10 rounded-full ring-2 ring-green-400 floating">
                                <div class="absolute -bottom-1 -right-1 w-4 h-4 bg-green-400 rounded-full border-2 border-gray-800 online-indicator"></div>
                            </div>
                            <div>
                                <h2 class="font-semibold text-white">Nicole Shalom</h2>
                                <p class="text-xs text-gray-400">Developer</p>
                            </div>
                        </div>
                        <div class="flex space-x-2">
                            <button class="p-2 hover:bg-gray-700 rounded-full transition-colors">
                                <i class="fas fa-ellipsis-v text-gray-400"></i>
                            </button>
                        </div>
                    </div>
                    
                    
                    <div class="relative">
                        <input type="text" placeholder="Search or start new chat" 
                               class="w-full bg-gray-700 text-white placeholder-gray-400 rounded-lg pl-10 pr-4 py-2 focus:outline-none focus:ring-2 focus:ring-green-400 transition-all">
                        <i class="fas fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
                    </div>
                </div>
                
                
                <div class="flex-1 overflow-y-auto custom-scrollbar">
                    
                    <div class="chat-hover p-4 border-b border-gray-700 cursor-pointer relative">
                        <div class="flex items-center space-x-3">
                            <div class="relative">
                                <img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=50&h=50&fit=crop&crop=face" 
                                     alt="John" class="w-12 h-12 rounded-full">
                                <div class="absolute -bottom-1 -right-1 w-4 h-4 bg-green-400 rounded-full border-2 border-gray-800"></div>
                            </div>
                            <div class="flex-1 min-w-0">
                                <div class="flex justify-between items-start">
                                    <h3 class="font-semibold text-white truncate">John Smith</h3>
                                    <span class="text-xs text-gray-400">2:30 PM</span>
                                </div>
                                <div class="flex justify-between items-center">
                                    <p class="text-sm text-gray-400 truncate">Hey! How's the project going?</p>
                                    <div class="flex items-center space-x-1">
                                        <div class="w-5 h-5 bg-green-400 rounded-full flex items-center justify-center">
                                            <span class="text-xs text-black font-bold">3</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    
                    <div class="chat-hover p-4 border-b border-gray-700 cursor-pointer bg-green-900 bg-opacity-20 border-l-4 border-green-400">
                        <div class="flex items-center space-x-3">
                            <div class="relative">
                                <img src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=50&h=50&fit=crop&crop=face" 
                                     alt="Sarah" class="w-12 h-12 rounded-full">
                                <div class="absolute -bottom-1 -right-1 w-4 h-4 bg-yellow-400 rounded-full border-2 border-gray-800"></div>
                            </div>
                            <div class="flex-1 min-w-0">
                                <div class="flex justify-between items-start">
                                    <h3 class="font-semibold text-white truncate">Sarah Connor</h3>
                                    <span class="text-xs text-gray-400">1:45 PM</span>
                                </div>
                                <div class="flex justify-between items-center">
                                    <div class="flex items-center space-x-2">
                                        <div class="typing-indicator w-2 h-2 bg-green-400 rounded-full"></div>
                                        <p class="text-sm text-green-400">typing...</p>
                                    </div>
                                    <i class="fas fa-check-double text-blue-400"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    
                    <div class="chat-hover p-4 border-b border-gray-700 cursor-pointer">
                        <div class="flex items-center space-x-3">
                            <div class="relative">
                                <img src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=50&h=50&fit=crop&crop=face" 
                                     alt="Mike" class="w-12 h-12 rounded-full">
                            </div>
                            <div class="flex-1 min-w-0">
                                <div class="flex justify-between items-start">
                                    <h3 class="font-semibold text-white truncate">Mike Johnson</h3>
                                    <span class="text-xs text-gray-400">12:30 PM</span>
                                </div>
                                <div class="flex justify-between items-center">
                                    <p class="text-sm text-gray-400 truncate">Thanks for the help! 🙏</p>
                                    <i class="fas fa-check-double text-gray-400"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    
                    <div class="chat-hover p-4 border-b border-gray-700 cursor-pointer">
                        <div class="flex items-center space-x-3">
                            <div class="relative">
                                <div class="w-12 h-12 chat-gradient rounded-full flex items-center justify-center">
                                    <i class="fas fa-users text-white"></i>
                                </div>
                            </div>
                            <div class="flex-1 min-w-0">
                                <div class="flex justify-between items-start">
                                    <h3 class="font-semibold text-white truncate">Dev Team</h3>
                                    <span class="text-xs text-gray-400">11:15 AM</span>
                                </div>
                                <div class="flex justify-between items-center">
                                    <p class="text-sm text-gray-400 truncate">Alice: Meeting at 3 PM today</p>
                                    <div class="w-5 h-5 bg-gray-600 rounded-full flex items-center justify-center">
                                        <span class="text-xs text-white">5</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        
        <div class="flex-1 flex flex-col perspective-card">
            <div class="card-3d flex flex-col h-full">
                
                <div class="p-4 border-b border-gray-700 glass-effect">
                    <div class="flex items-center justify-between">
                        <div class="flex items-center space-x-3">
                            <img src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=50&h=50&fit=crop&crop=face" 
                                 alt="Sarah" class="w-10 h-10 rounded-full floating">
                            <div>
                                <h3 class="font-semibold text-white">Sarah Connor</h3>
                                <p class="text-sm text-green-400">online</p>
                            </div>
                        </div>
                        <div class="flex items-center space-x-4">
                            <button class="p-2 hover:bg-gray-700 rounded-full transition-colors">
                                <i class="fas fa-video text-gray-400 hover:text-white"></i>
                            </button>
                            <button class="p-2 hover:bg-gray-700 rounded-full transition-colors">
                                <i class="fas fa-phone text-gray-400 hover:text-white"></i>
                            </button>
                            <button class="p-2 hover:bg-gray-700 rounded-full transition-colors">
                                <i class="fas fa-ellipsis-v text-gray-400 hover:text-white"></i>
                            </button>
                        </div>
                    </div>
                </div>
                
                
                <div class="flex-1 overflow-y-auto p-4 space-y-4 custom-scrollbar" id="messagesArea">
                    
                    <div class="flex items-start space-x-2 message-bubble">
                        <img src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=30&h=30&fit=crop&crop=face" 
                             alt="Sarah" class="w-8 h-8 rounded-full">
                        <div class="max-w-xs lg:max-w-md">
                            <div class="bg-gray-700 rounded-2xl rounded-tl-sm p-3 shadow-lg">
                                <p class="text-white">Hey Nicole! How's the WhatsApp clone coming along?</p>
                            </div>
                            <p class="text-xs text-gray-400 mt-1 ml-2">2:45 PM</p>
                        </div>
                    </div>
                    
                    
                    <div class="flex items-end justify-end space-x-2 message-bubble">
                        <div class="max-w-xs lg:max-w-md">
                            <div class="chat-gradient rounded-2xl rounded-tr-sm p-3 shadow-lg">
                                <p class="text-white">It's going great! Just added some cool 3D effects and animations 🚀</p>
                            </div>
                            <div class="flex items-center justify-end mt-1 mr-2 space-x-1">
                                <p class="text-xs text-gray-400">2:46 PM</p>
                                <i class="fas fa-check-double text-blue-400 text-xs"></i>
                            </div>
                        </div>
                    </div>
                    
                    
                    <div class="flex items-start space-x-2 message-bubble">
                        <img src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=30&h=30&fit=crop&crop=face" 
                             alt="Sarah" class="w-8 h-8 rounded-full">
                        <div class="max-w-xs lg:max-md">
                            <div class="bg-gray-700 rounded-2xl rounded-tl-sm p-3 shadow-lg">
                                <p class="text-white">Awesome! Can't wait to see it. The design looks really modern! ✨</p>
                            </div>
                            <p class="text-xs text-gray-400 mt-1 ml-2">2:47 PM</p>
                        </div>
                    </div>
                    
                    
                    <div class="flex items-end justify-end space-x-2 message-bubble">
                        <div class="max-w-xs lg:max-w-md">
                            <div class="chat-gradient rounded-2xl rounded-tr-sm p-3 shadow-lg">
                                <div class="bg-gray-800 rounded-lg p-3 mb-2">
                                    <div class="flex items-center space-x-2">
                                        <i class="fas fa-image text-green-300"></i>
                                        <span class="text-sm text-white">dashboard-preview.png</span>
                                    </div>
                                </div>
                                <p class="text-white">Here's a preview! What do you think?</p>
                            </div>
                            <div class="flex items-center justify-end mt-1 mr-2 space-x-1">
                                <p class="text-xs text-gray-400">2:48 PM</p>
                                <i class="fas fa-check-double text-blue-400 text-xs"></i>
                            </div>
                        </div>
                    </div>
                </div>
                
                
                <div class="p-4 border-t border-gray-700 glass-effect">
                    <div class="flex items-center space-x-3">
                        <button class="p-2 hover:bg-gray-700 rounded-full transition-colors">
                            <i class="fas fa-paperclip text-gray-400 hover:text-white"></i>
                        </button>
                        <div class="flex-1 relative">
                            <input type="text" 
                                   placeholder="Type a message..." 
                                   class="w-full bg-gray-700 text-white placeholder-gray-400 rounded-full pl-4 pr-12 py-3 focus:outline-none focus:ring-2 focus:ring-green-400 transition-all"
                                   id="messageInput">
                            <button class="absolute right-2 top-1/2 transform -translate-y-1/2 p-2 hover:bg-gray-600 rounded-full transition-colors">
                                <i class="fas fa-smile text-gray-400 hover:text-yellow-400"></i>
                            </button>
                        </div>
                        <button class="p-3 chat-gradient rounded-full hover:scale-105 transition-transform shadow-lg" id="sendButton">
                            <i class="fas fa-paper-plane text-white"></i>
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    
    <div class="fixed bottom-4 right-4 glass-effect rounded-lg p-3 floating">
        <div class="flex items-center space-x-2">
            <div class="w-8 h-8 chat-gradient rounded-full flex items-center justify-center">
                <i class="fas fa-code text-white text-xs"></i>
            </div>
            <div>
                <p class="text-xs text-white font-semibold">Developed by</p>
                <p class="text-xs text-green-400">Nicole Shalom</p>
            </div>
        </div>
    </div>
    
    <script>
        // Add interactive functionality
        document.addEventListener('DOMContentLoaded', function() {
            const messageInput = document.getElementById('messageInput');
            const sendButton = document.getElementById('sendButton');
            const messagesArea = document.getElementById('messagesArea');
            
            // Send message functionality
            function sendMessage() {
                const message = messageInput.value.trim();
                if (message) {
                    // Create new message element
                    const messageDiv = document.createElement('div');
                    messageDiv.className = 'flex items-end justify-end space-x-2 message-bubble';
                    messageDiv.innerHTML = `
                        <div class="max-w-xs lg:max-w-md">
                            <div class="chat-gradient rounded-2xl rounded-tr-sm p-3 shadow-lg">
                                <p class="text-white">${message}</p>
                            </div>
                            <div class="flex items-center justify-end mt-1 mr-2 space-x-1">
                                <p class="text-xs text-gray-400">Now</p>
                                <i class="fas fa-check text-gray-400 text-xs"></i>
                            </div>
                        </div>
                    `;
                    
                    messagesArea.appendChild(messageDiv);
                    messageInput.value = '';
                    messagesArea.scrollTop = messagesArea.scrollHeight;
                    
                    // Simulate read receipt after a delay
                    setTimeout(() => {
                        const checkIcon = messageDiv.querySelector('.fa-check');
                        if (checkIcon) {
                            checkIcon.className = 'fas fa-check-double text-blue-400 text-xs';
                        }
                    }, 1000);
                }
            }
            
            // Send on Enter key
            messageInput.addEventListener('keypress', function(e) {
                if (e.key === 'Enter') {
                    sendMessage();
                }
            });
            
            // Send on button click
            sendButton.addEventListener('click', sendMessage);
            
            // Add typing indicator simulation
            let typingTimeout;
            messageInput.addEventListener('input', function() {
                // Clear existing timeout
                clearTimeout(typingTimeout);
                
                // Set new timeout
                typingTimeout = setTimeout(() => {
                    // Remove typing indicator logic here if needed
                }, 1000);
            });
            
            // Add some dynamic effects
            setInterval(() => {
                const onlineIndicators = document.querySelectorAll('.online-indicator');
                onlineIndicators.forEach(indicator => {
                    indicator.style.transform = `scale(${0.8 + Math.random() * 0.4})`;
                });
            }, 2000);
            
            // Smooth scroll to bottom
            messagesArea.scrollTop = messagesArea.scrollHeight;
        });
    </script>
</body>
</html>

Related Examples

Sidebar
This is the sidebar that I use in my projects, I use grid to be able to manage the space issue a little better, it seems like a clean and modern design, it is more than anything for the dashboards that you want to create

Author:
Ameth Galarcio

8 months ago

3.1k
Interactive Order Report Chart with TailwindCSS and Chart.js
Create a stunning and interactive order report chart using HTML, TailwindCSS, and Chart.js. This chart combines bar and line graphs to visualize delivered, shipping, cancelled, and returned orders effectively. Perfect for dashboards and analytics pages with responsive design and clean aesthetics.

Author:
SHARIFUL ISLAM

5 months ago

1k
SocialSphere: A Full-Stack Social Media Platform
SocialSphere is a full-stack social media platform inspired by Facebook, built using HTML CSS

Author:
Code Master(Mfuranziza Dusabe Hamza)

2 months ago

377
admin panel UI
Premium Admin Panel Pack including sidebar navigation, top navbar, dashboard cards, user tables, quick actions, profile section, and footer. Fully responsive with modern clean design using Tailwind CSS.

Author:
Lekhraj Ghimire

1 month ago

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

Author:
Coastal UI

3 months ago

238
coffee
a beverage brewed from the roasted and ground seeds of the tropical evergreen coffee plant. Coffee is one of the three most popular beverages in the world (alongside water and tea), and it is one of the most profitable international commodities

Author:
Augustin

2 months ago

495
Reusable Skill Showcase Section With Pure Tailwind CSS
A fully responsive and modular "Skills & Tools" section, perfect for any developer portfolio. Built with static HTML and Tailwind CSS, this component can be easily integrated into any project and made dynamic using any frontend framework (Vue, React, Svelte, Angular) or vanilla JavaScript. Customize it to highlight your unique tech stack and create engaging portfolio pages.

Author:
Abdul Baset Bappy

4 months ago

950
Clean AI Chat UI with Tailwind CSS – ChatGPT-Style Interface
A polished and responsive AI chat interface built using modern Web Components and Tailwind CSS. This UI replicates the smooth, minimal experience of ChatGPT with a clean layout, floating input bar, animated scrollable message feed, and mock AI responses. Ideal for SaaS dashboards, AI assistants, or frontend prototypes. Designed with professional spacing, accessible colors, and reusable components. Key features: Responsive layout with mobile support Floating input bar with auto-expanding textarea Tailwind-powered message bubbles with clear sender roles Modern dark theme with subtle gradients and shadows Easily extendable to real AI APIs (e.g., OpenAI)

Author:
Ayyamperumal S

2 months ago

705
Neon container

Author:
Anonymous

1 year ago

3k
Upvote downvote buttons [alpine]
upvote and downvote buttons made as working version in alpine.js

Author:
Anonymous

1 year ago

8.1k
Upvote downvote buttons

Author:
Lucas Martinez

2 years ago

11.2k
Half filled circle with tailwind

Author:
Alok

2 years ago

13k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components