chat-index.html

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Chat</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class='chat'>
        <div class='chat-messages'>
            <div class='chat-messages__content' id='messages'>
                <div class='chat__message chat__message_blue'>admin: ¡Hola!</div>
                <div class='chat__message chat__message_black'>user: ¿Qué tal?</div>
                <div class='chat__message chat__message_blue'>admin: Bien, ¿y tú?</div>
                <div class='chat__message chat__message_black'>user: Bien también</div>
                <div class='chat__message chat__message_blue'>admin: ¡Genial!</div>
                <div class='chat__message chat__message_blue'>admin: ¡Ha sido agradable charlar, hasta luego!</div>
                <div class='chat__message chat__message_black'>user: ¡Hasta luego!</div>
            </div>
        </div>
        <div class='chat-input'>
            <form method='post' id='chat-form'>
                <input type='text' id='message-text' class='chat-form__input' placeholder='Ingrese mensaje'>
                <input type='submit' class='chat-form__submit' value='=>'>
            </form>
        </div>
    </div>
</body>
</html>