WEBLEB
Home
Editor
Login
Pro
English
English
Français
Español
Português
Deutsch
Italiano
हिंदी
HTML Chat Box Template
1390
logicaldata497
Open In Editor
Publish Your Code
Recommended
14 October 2024
A web page Template for "Anes Development" with a welcome message and navigation.
1 June 2025
Home 3D Rotation Login/Signup Box
10 February 2025
Simple HTML Login Form
HTML
Copy
<!DOCTYPE html> <html lang="en"> <body> <div class="card"> <div class="chat-header">Chat</div> <div class="chat-window"> <ul class="message-list"></ul> </div> <div class="chat-input"> <input type="text" class="message-input" placeholder="Type your message here"> <button class="send-button">Send</button> </div> </div> </body> </html>
CSS
Copy
body{ display:flex; height:100vh; justify-content:center; align-items:center; background:black; overflow:hidden; } .card { width: 400px; background-color: #212121; border-radius: 5px; box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1); } .chat-header { background-color: #171717; color: #fff; padding: 10px; font-size: 18px; border-top-left-radius: 5px; border-top-right-radius: 5px; } .chat-window { height: 220px; overflow:hidden; } .message-list { list-style: none; margin: 0; padding: 0; } .chat-input { display: flex; align-items: center; padding: 10px; background-color: #2f2f2f; border-radius:5px; } .message-input { flex: 1; border: none; outline: none; padding: 5px; font-size: 14px; background-color: #2f2f2f; color:white; } .send-button { border: none; border-radius:5px; outline: none; background-color: #676767; color: #fff; font-size: 14px; padding: 5px 10px; cursor: pointer; }
JS
Copy
/* Replace with your JS Code (Leave empty if not needed) */
