<div id="chat-box">
<div id="messages">
<div id="message">Hi There!</div>
</div>
<form id="message-form">
<input type="text" id="message-input" placeholder="Type your message here">
<button type="submit">Send</button>
</form>
</div>
<style>
#chat-box {
width: 300px;
height: 400px;
border: 1px solid #ccc;
border-radius: 4px;
}
#messages {
height: 80%;
overflow-y: scroll;
padding: 10px;
}
#message {
background-color:lightgray;
padding:2px;
border-radius:5px;
}
#message-form {
display: flex;
align-items: center;
padding: 10px;
}
#message-input {
flex-grow: 1;
border: 1px solid #ccc;
border-radius: 4px;
padding: 6px;
}
button[type="submit"] {
margin-left: 10px;
background-color: #4caf50;
color: #fff;
border: none;
border-radius: 4px;
padding: 6px 12px;
cursor: pointer;
}
</style>