JSFiddle - React, Tailwind, and code Playground

HTML

<div id="chatApplicationClassic">
	<div id="chatHeaderClassic">
		<div id="chatHeaderArrowClassic">
			Arr
		</div><div id="chatHeaderTextClassic">
			Top
		</div>
	</div>
	<div id="chatBodyClassic">
    bod<br />
    bod<br />
    bod<br />
    bod<br />
    bod<br />
    bod<br />
    bod<br />
    bod<br />
    bod<br />
    bod<br />
    bod<br />
    bod<br />
    bod<br />
    bod<br />
    bod<br />
    bod<br />
    bod<br />
    bod<br />
    bod<br />
    bod<br />
    bod<br />
    bod<br />
    bod<br />
    bod<br />
    bod<br />
    bod<br />
    bod<br />
    bod<br />
    bod<br />
    bod<br />
	</div>
  <!--
	<div id="chatFooterClassic">
		<div id="chatInputContainerClassic">
			<input placeholder="type here..." id="chatInputClassic" type="text" /> 
		</div>
		<div id="chatSendButton">
			<div id="chatSendButtonText">Send</div>
		</div>
	</div>-->
</div>

CSS

#chatApplicationClassic {
				padding:0;
				margin:0;
				border:0;
				position:fixed;
				bottom:0px;
				right:30px;
				width:300px;
				background-color: lime;
				box-sizing: border-box;
				border-radius: 5px 5px 0 0;
				box-shadow: 0px 0px 5px #000000;
			}

			#chatHeaderClassic {
				padding:0;
				margin:0;
				border:0;
				width:100%;
				background-color:pink;
				cursor:pointer;
				border-radius: 5px 5px 0 0;
				border-top:0px solid red;
				border-left:0px solid red;
				border-right:0px solid red;
				border-bottom:0px solid red;
				box-sizing: border-box;
			}
			#chatHeaderTextClassic {
				padding:0;
				margin:0;
				border:0;
				color:#ffff33;
				font-family: 'Open Sans', sans-serif;
				padding:6px;
				font-size:18px;
				font-weight:100;
				display:inline-block;
				border-radius:5px 5px 0 0;
			}
			#chatHeaderArrowClassic {
				padding:0;
				margin:0;
				border:0;
				color:#9900ff;
				display:inline-block;
				float:right;
				padding:6px;
				font-size:18px;
			}

			#chatBodyClassic {
				padding:0;
				margin:0;
				border:0;
				background-color:white;
				border-left:5px solid pink;
				border-right:5px solid pink;
				height:200px;
				width:100%;
				box-sizing: border-box;
				padding-top:10px;
				overflow:scroll;
			}

			.chatAgentBubbleClassic {
				padding:0;
				margin:0;
				border:0;
				background-color:#664eff;
				margin-right:40px;
				margin-top:10px;
				box-sizing: border-box;
				border-radius:4px;
			}
			.chatVisitorBubbleClassic {
				padding:0;
				margin:0;
				border:0;
				background-color:#6600ff;
				margin-left:40px;
				margin-top:10px;
				box-sizing: border-box;
				border-radius:4px;
			}


			.chatAgentBubbleTextClassic {
				font-size:12px;
				padding:8px;
				font-family:sans-serif;
				color:lightblue;
			}											
			.chatVisitorBubbleTextClassic {
				font-size:12px;
				padding:6px;
				font-family:sans-serif;
				color:skyblue;
			}