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

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

6 months ago

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

3 months ago

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

Author:
Acode Master(Mfuranziza Dusabe Hamza)

1 week ago

62
Product hunt showcase

Author:
Lukas Müller

2 years ago

11.8k
Skill showcase section for resume / porfolio website
show skill progression

Author:
Ava Brown

2 years ago

12.8k
Help and support center ticketing system
Help and support center ticketing system

Author:
Rushikesh Latpate

3 months ago

588
Image Gallery with Alpine.Js

Author:
Maxim

4 months ago

278
Simple Hero Section
Hero Section using Tailwind

Author:
Ahita Bisma Adlula

3 months ago

641
Popover
basic popover example

Author:
Dipti narayan

1 year ago

11.9k
Tag Input field
This code creates a dynamic tag input field using HTML, JavaScript, and TailwindCSS. Users can type tags into the input field and press "Enter" to add them. Each tag is displayed inside the input field as a styled container with a remove button. The tag input is limited to a maximum of 5 tags, and an error message is shown if the limit is exceeded. Users can remove tags to free up space for new ones. The input field and tags are styled using TailwindCSS, ensuring a clean and responsive design.

Author:
Ranit Saha

4 months ago

840
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

1 month ago

215
walletp2p

Author:
Anonymous

5 months ago

735

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components