WEBLEB
Inicio
Editora de código
Iniciar sesión
Pro
Español
English
Français
Español
Português
Deutsch
Italiano
हिंदी
HTML
CSS
JS
<!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>
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; }
/* Replace with your JS Code (Leave empty if not needed) */
Validating your code, please wait...
HTML
CSS
JS
<!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>
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; }
/* Replace with your JS Code (Leave empty if not needed) */