<html>
<head>
	<title>Facebook Chat Design</title>
</head>
<body>
	<div class="wrapper">
		<div class="chat-box">
			<div class="chat-head">
				<h2>Chat Box</h2>
				<img src="https://maxcdn.icons8.com/windows10/PNG/16/Arrows/angle_down-16.png" title="Expand Arrow" width="16">
			</div>
			<div class="chat-body">
				<div class="msg-insert">
  <div class="msg-send"> Send message </div>
  <div class="msg-receive"> Received message </div>
</div>
				<div class="chat-text">
					<textarea placeholder="Send"></textarea>
				</div>
			</div>
		</div>
	</div>
</body>
</html>
*{
	padding: 0px;
	margin: 0px;
	font-family: 'Fira Code';
}
body{
	height: 100%;
	background: #95a5a6;
}
.chat-box{
	position: absolute;
	right: 20px;
	bottom: 0px;
	background: white;
	width: 300px;
	border-radius: 5px 5px 0px 0px;
}
.chat-head{
	width: inherit;
	height: 45px;
	background: #2c3e50;
	border-radius: 5px 5px 0px 0px;
}
.chat-head h2{
	color: white;
	padding: 8px;
	display: inline-block;
}
.chat-head img{
	cursor: pointer;
	float: right;
	width: 25px;
	margin: 10px;
}
.chat-body{
	height: 355px;
	width: inherit;
	overflow: auto;
	margin-bottom: 45px;
}
.chat-text{
	position: fixed;
	bottom: 0px;
	height: 45px;
	width: inherit;
}
.chat-text textarea{
	width: inherit;
	height: inherit; 
	box-sizing: border-box;
	border: 1px solid #bdc3c7;
	padding: 10px;
	resize: none;
}
.chat-text textarea:active, .chat-text textarea:focus, .chat-text textarea:hover{
	border-color: royalblue;
}
.msg-send{
	background: #2ecc71;
}
.msg-receive{
	background: #3498db;
}
.msg-send, .msg-receive{
	width: 200px;
	height: 35px;
	padding: 5px 5px 5px 10px;
	margin: 10px auto;
	border-radius: 3px;
	line-height: 30px;
	position: relative;
	color: white;
}
.msg-receive:before{
	content: '';
	width: 0px;
	height: 0px;
	position: absolute;
	border: 15px solid;
	border-color: transparent #3498db transparent transparent;
	left: -29px;
	top: 7px;
}
.msg-send:after{
	content: '';
	width: 0px;
	height: 0px;
	position: absolute;
	border: 15px solid;
	border-color: transparent transparent transparent #2ecc71;
	right: -29px;
	top: 7px;
}
.msg-receive:hover, .msg-send:hover{
	opacity: .9;
}

$(function(){
	var arrow = $('.chat-head img');
	var textarea = $('.chat-text textarea');

	arrow.on('click', function(){
		var src = arrow.attr('src');

		$('.chat-body').slideToggle('fast');
		if(src == 'https://maxcdn.icons8.com/windows10/PNG/16/Arrows/angle_down-16.png'){
			arrow.attr('src', 'https://maxcdn.icons8.com/windows10/PNG/16/Arrows/angle_up-16.png');
		}
		else{
			arrow.attr('src', 'https://maxcdn.icons8.com/windows10/PNG/16/Arrows/angle_down-16.png');
		}
	});

	textarea.keypress(function(event) {
		var $this = $(this);

		if(event.keyCode == 13){
			var msg = $this.val();
			$this.val('');
			$('.msg-insert').prepend("<div class='msg-send'>"+msg+"</div>");
			}
	});

});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js