Linkedin - Tailwind CSS Example

chatting

This tailwind example is contributed by Rebecca IRANKUNDA, on 27-May-2025. Component is made with Tailwind CSS v3. It is responsive.

Hover

Author Rebecca IRANKUNDA

473

Fork Fullscreen

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>LinkedIn-like Chat</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', Helvetica, Arial, sans-serif;
        }
        
        body {
            background-color: #f3f6f8;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
        }
        
        .chat-container {
            width: 90%;
            max-width: 1000px;
            height: 80vh;
            background-color: #fff;
            display: flex;
            box-shadow: 0 0 10px rgba(0,0,0,0.1);
            border-radius: 10px;
            overflow: hidden;
        }
        
        .sidebar {
            width: 35%;
            border-right: 1px solid #e0e0e0;
            display: flex;
            flex-direction: column;
        }
        
        .chat-header {
            padding: 15px 20px;
            border-bottom: 1px solid #e0e0e0;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .chat-header h2 {
            font-size: 20px;
            font-weight: 600;
            color: #000000e6;
        }
        
        .search-bar {
            padding: 10px 15px;
            border-bottom: 1px solid #e0e0e0;
        }
        
        .search-input-container {
            position: relative;
        }
        
        .search-input {
            width: 100%;
            padding: 8px 15px 8px 35px;
            background-color: #eef3f8;
            border: none;
            border-radius: 4px;
            font-size: 14px;
            outline: none;
        }
        
        .search-icon {
            position: absolute;
            left: 10px;
            top: 50%;
            transform: translateY(-50%);
            color: #666;
        }
        
        .chat-list {
            flex: 1;
            overflow-y: auto;
        }
        
        .chat-item {
            display: flex;
            padding: 12px 15px;
            border-bottom: 1px solid #e0e0e0;
            cursor: pointer;
            transition: background-color 0.2s;
        }
        
        .chat-item:hover {
            background-color: #f5f5f5;
        }
        
        .chat-item.active {
            background-color: #eef3f8;
        }
        
        .chat-avatar {
            width: 48px;
            height: 48px;
            border-radius: 50%;
            margin-right: 12px;
            background-color: #dce6f1;
            overflow: hidden;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #666;
        }
        
        .chat-info {
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }
        
        .chat-name {
            font-size: 16px;
            font-weight: 600;
            color: #000000e6;
            margin-bottom: 2px;
        }
        
        .chat-preview {
            font-size: 14px;
            color: #666;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        
        .chat-time {
            font-size: 12px;
            color: #666;
            margin-top: 4px;
        }
        
        .main-chat {
            flex: 1;
            display: flex;
            flex-direction: column;
        }
        
        .conversation-header {
            padding: 15px 20px;
            border-bottom: 1px solid #e0e0e0;
            display: flex;
            align-items: center;
        }
        
        .conversation-info {
            margin-left: 12px;
        }
        
        .conversation-name {
            font-size: 18px;
            font-weight: 600;
            color: #000000e6;
        }
        
        .conversation-status {
            font-size: 13px;
            color: #666;
        }
        
        .chat-messages {
            flex: 1;
            padding: 20px;
            overflow-y: auto;
            background-color: #f9f9f9;
            display: flex;
            flex-direction: column;
        }
        
        .message {
            max-width: 70%;
            padding: 12px 16px;
            margin-bottom: 15px;
            border-radius: 8px;
            font-size: 14px;
            line-height: 1.4;
            position: relative;
        }
        
        .received {
            background-color: #fff;
            align-self: flex-start;
            border-top-left-radius: 0;
            box-shadow: 0 1px 2px rgba(0,0,0,0.1);
        }
        
        .sent {
            background-color: #d0e8ff;
            align-self: flex-end;
            border-top-right-radius: 0;
        }
        
        .message-time {
            font-size: 12px;
            color: #666;
            margin-top: 5px;
            text-align: right;
        }
        
        .chat-input-container {
            padding: 15px 20px;
            border-top: 1px solid #e0e0e0;
            background-color: #fff;
        }
        
        .input-box {
            width: 100%;
            padding: 12px 15px;
            border: 1px solid #e0e0e0;
            border-radius: 4px;
            font-size: 14px;
            outline: none;
            resize: none;
            min-height: 50px;
            max-height: 100px;
        }
        
        .input-box:focus {
            border-color: #0073b1;
        }
        
        .chat-actions {
            display: flex;
            justify-content: space-between;
            margin-top: 10px;
            align-items: center;
        }
        
        .action-icons {
            display: flex;
            gap: 15px;
        }
        
        .action-icon {
            color: #666;
            cursor: pointer;
            font-size: 18px;
        }
        
        .send-button {
            background-color: #0073b1;
            color: white;
            border: none;
            border-radius: 4px;
            padding: 8px 16px;
            font-size: 14px;
            font-weight: 600;
            cursor: pointer;
            transition: background-color 0.2s;
        }
        
        .send-button:hover {
            background-color: #006097;
        }
        
        .empty-state {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 100%;
            text-align: center;
            padding: 20px;
        }
        
        .empty-state i {
            font-size: 50px;
            color: #0073b1;
            margin-bottom: 20px;
        }
        
        .empty-state h3 {
            font-size: 20px;
            font-weight: 600;
            color: #000000e6;
            margin-bottom: 10px;
        }
        
        .empty-state p {
            font-size: 14px;
            color: #666;
            max-width: 300px;
        }
    </style>
</head>
<body>
    <div class="chat-container">
        <div class="sidebar">
            <div class="chat-header">
                <h2>Messages</h2>
                <i class="fas fa-cog" style="color: #666; cursor: pointer;"></i>
            </div>
            <div class="search-bar">
                <div class="search-input-container">
                    <i class="fas fa-search search-icon"></i>
                    <input type="text" class="search-input" placeholder="Search messages">
                </div>
            </div>
            <div class="chat-list">
                <div class="chat-item active">
                    <div class="chat-avatar">
                        <i class="fas fa-user"></i>
                    </div>
                    <div class="chat-info">
                        <div class="chat-name">Sarah Johnson</div>
                        <div class="chat-preview">Let's schedule a meeting next week to discuss the project</div>
                        <div class="chat-time">10:30 AM</div>
                    </div>
                </div>
                <div class="chat-item">
                    <div class="chat-avatar">
                        <i class="fas fa-user"></i>
                    </div>
                    <div class="chat-info">
                        <div class="chat-name">Michael Chen</div>
                        <div class="chat-preview">Thanks for connecting! I'd love to learn more about your work</div>
                        <div class="chat-time">Yesterday</div>
                    </div>
                </div>
                <div class="chat-item">
                    <div class="chat-avatar">
                        <i class="fas fa-user"></i>
                    </div>
                    <div class="chat-info">
                        <div class="chat-name">Tech Professionals Group</div>
                        <div class="chat-preview">Alex: Has anyone worked with the new React 18 features?</div>
                        <div class="chat-time">Mar 15</div>
                    </div>
                </div>
                <div class="chat-item">
                    <div class="chat-avatar">
                        <i class="fas fa-user"></i>
                    </div>
                    <div class="chat-info">
                        <div class="chat-name">David Wilson (Recruiter)</div>
                        <div class="chat-preview">We have an opening that might interest you</div>
                        <div class="chat-time">Mar 12</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="main-chat">
            <div class="conversation-header">
                <div class="chat-avatar">
                    <i class="fas fa-user"></i>
                </div>
                <div class="conversation-info">
                    <div class="conversation-name">Sarah Johnson</div>
                    <div class="conversation-status">Active now</div>
                </div>
            </div>
            <div class="chat-messages">
                <div class="message received">
                    Hi there! I hope you're doing well.
                    <div class="message-time">10:15 AM</div>
                </div>
                <div class="message sent">
                    Hi Sarah! I'm doing great, thanks. How about you?
                    <div class="message-time">10:17 AM</div>
                </div>
                <div class="message received">
                    I'm good too! I wanted to discuss the project timeline with you.
                    <div class="message-time">10:18 AM</div>
                </div>
                <div class="message sent">
                    Sure, I've reviewed the initial specs. We should be able to complete phase 1 by the end of next week.
                    <div class="message-time">10:20 AM</div>
                </div>
                <div class="message received">
                    That sounds perfect. Let's schedule a meeting next week to go over the details.
                    <div class="message-time">10:22 AM</div>
                </div>
                <div class="message sent">
                    How about Tuesday at 2 PM? I can send a calendar invite.
                    <div class="message-time">10:23 AM</div>
                </div>
            </div>
            <div class="chat-input-container">
                <textarea class="input-box" placeholder="Write a message..."></textarea>
                <div class="chat-actions">
                    <div class="action-icons">
                        <i class="far fa-smile action-icon"></i>
                        <i class="fas fa-paperclip action-icon"></i>
                    </div>
                    <button class="send-button">Send</button>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

Related Examples