Create a Chatbox UI Template using HTML and CSS

Last Updated : 13 Dec, 2023

Real-time chat applications are designed to provide a responsive and interactive experience, where messages are delivered and displayed immediately as they are sent. This means that users can engage in conversations and receive updates in real-time, without significant delays.

In the chat application UI, received messages display left aligned and sent messages display right aligned. Also, the avatar image (or image) is displayed before the sent and received messages. Here, we will design a Chatbox UI using HTML and CSS.

Example:

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta charset="UTF-8"> 
    <meta name="viewport" content= 
        "width=device-width, initial-scale=1.0"> 
    <style> 
        .chat-container { 
            max-width: 600px; 
            margin: 50px auto; 
            background-color: #fff; 
            border-radius: 8px; 
            overflow: hidden; 
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); 
        } 
  
        .message-container { 
            display: flex; 
            flex-direction: column; 
        } 
  
        .message { 
            padding: 10px; 
            margin: 10px; 
            border-radius: 5px; 
            max-width: 70%; 
            word-wrap: break-word; 
            display: flex; 
            align-items: center; 
        } 
  
        .sender-message { 
            background-color: #e0e0e0; 
            color: #000; 
            align-self: flex-start; 
        } 
  
        .receiver-message { 
            background-color: #4CAF50; 
            color: #fff; 
            align-self: flex-end; 
        } 
  
        .avatar { 
            width: 30px; 
            height: 30px; 
            border-radius: 50%; 
            margin-right: 10px; 
        } 
  
        .message input { 
            width: calc(100% - 20px); 
            padding: 8px; 
            margin: 10px; 
            border: 1px solid #ddd; 
            border-radius: 5px; 
        } 
  
        .message button { 
            padding: 8px; 
            margin: 10px; 
            background-color: #4CAF50; 
            color: #fff; 
            border: none; 
            border-radius: 5px; 
            cursor: pointer; 
        } 
    </style> 
    <title>Chat Template UI using HTML and CSS</title> 
</head> 
  
<body> 
    <div class="chat-container"> 
        <div class="message-container"> 
            <div class="message sender-message"> 
                <img src= 
"https://media.geeksforgeeks.org/wp-content/uploads/20220123013311/gfg.png" 
                    alt="Sender Avatar"
                    class="avatar"> 
                Hello there! 
            </div> 
            <div class="message receiver-message"> 
                <img src= 
"https://media.geeksforgeeks.org/wp-content/uploads/20210511160813/g4g.jpg"
                    alt="Receiver Avatar" 
                    class="avatar"> 
                Hi! How can I help you today? 
            </div> 
            <div class="message sender-message"> 
                <img src= 
"https://media.geeksforgeeks.org/wp-content/uploads/20220123013311/gfg.png" 
                    alt="Sender Avatar"
                    class="avatar"> 
                I have a question about your products. 
            </div> 
            <div class="message receiver-message"> 
                <img src= 
"https://media.geeksforgeeks.org/wp-content/uploads/20210511160813/g4g.jpg"
                    alt="Receiver Avatar" 
                    class="avatar"> 
                Sure, feel free to ask! 
            </div> 
        </div> 
  
        <div class="message"> 
            <input type="text" 
                placeholder="Type your message..."> 
            <button>Send</button> 
        </div> 
    </div> 
</body> 
  
</html>