JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    
	<title>Help</title>
	<!-- Bootstrap -->
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
    <link href="chat.css" rel="stylesheet">
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
	
	<script>
		$(document).ready(
			function() {
				var $content = $('#content');

				function submit() {
					addMess("  I  : "+$content.val());
					$content.val('').focus();
				}
				
				function addMess(m){
					$('#msg').append('<p>' +m+'</p>');
				}
				$content.keypress(function(e) {
					if (e.keyCode == 13) {
						submit();
						return false;
					}
				});
				$('#submit_msg').click(submit);
			}
		);
	</script>
</head>
<body>
    <div id="concon" class="container">
		<div id="hon" class="row">
			<div id="honhon" class="col-lg-offset-3 col-lg-6 col-xs-12">		
			      <div id="hehe">
					<nav>
					  <ul class="nav nav-pills pull-right">
						<li role="presentation"><a href="#">Back</a></li>
					  </ul>
					</nav>
					<!--h3 class="text-muted">Project name</h3-->
				  </div>

				  <div id="msg" ></div>
				  
				<div id="input" class="input-group">
					<textarea class="form-control custom-control" id="content" rows="1" style="resize:none"></textarea>
					<span class="input-group-btn"><input type="button" class="btn btn-primary" value="submit" id="submit_msg"/>
					</span>
				</div>
			</div>	
		</div>
	</div>  	
	
	  
	  
</body>
</html>

CSS

#onlinep{
    position: fixed;
    top: 5px;
    left: 5px;
	z-index: 999;
}


html{ height: 100%;}
body{ height: 100%;margin: 0;padding: 0;}
#con{height: 100%;min-height: 100%;}
#hon{height: 100%;min-height: 100%;}
#honhon{height: 100%;min-height: 100%;
}

#msg{
  margin-top: 30px;
  margin-bottom: 30px;
}
#input{
background: green;
  position: fixed;
  bottom:0px;	
  height: 30px;
}

#hehe{
height: 30px;
  background: red;
  position: fixed;
  top:0px;
}