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

1.3k

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

1 year ago

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

1 year ago

1.6k
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)

10 months ago

980
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

9 months ago

1.9k
Card KPI
Targetas ahora con un grafico

Author:
Raul antonio de la cruz hernandez

4 months ago

693
Infinity Premium Dashboard Tailwind
Website Dashboard Admin with tailwind CSS CDN, responsif via mobile and tablet

Author:
Alif Bima Pradana

1 month ago

513
Horizon Premium Dashboard Tailwind
Website Dashboard Admin with tailwind CSS CDN

Author:
Alif Bima Pradana

1 month ago

258
Taskify Premium Task Management FREE
Website Task management modern and responsif

Author:
Alif Bima Pradana

1 month ago

179
Engineering Project Dashboard
Track engineering assignments, project progress, technology stack, and delivery timelines in one simple dashboard.

Author:
Ayyamperumal S

1 week ago

85
Password Generator
This is a simple and responsive Password Generator built with HTML, Vanilla JavaScript, and Tailwind CSS. It allows users to create secure passwords by selecting custom options such as length, uppercase letters, lowercase letters, numbers, and symbols. Ideal for developers or users looking for a fast and customizable password tool.

Author:
SAURAV SINGH

8 months ago

737
htmlcss1

Author:
Anonymous

9 months ago

345
Tailwind invoice example

Author:
Elijah Davis

3 years ago

19.2k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components